Initial commit — utilities app (meter readings, tariffs, cost tracking)
Fastify + pg backend, React/TS/Vite frontend. Categories (electric, gas, oil, water), meters with sub-metering rollup, tariffs with time-of-use rate windows, standing charges, Climate Change Levy and VAT, manual reading entry, consumption/cost reports, period cost estimates, and an API-key-gated /api/internal/* surface for the reports app's Directors Report. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
commit
4fc5230d79
44 changed files with 10249 additions and 0 deletions
38
frontend/src/App.tsx
Normal file
38
frontend/src/App.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import AuthGate from './components/AuthGate'
|
||||
import { UpdateBanner } from './components/UpdateBanner'
|
||||
import { useVersionCheck } from './hooks/useVersionCheck'
|
||||
import Layout from './components/Layout'
|
||||
import Meters from './pages/Meters'
|
||||
import MeterDetail from './pages/MeterDetail'
|
||||
import Tariffs from './pages/Tariffs'
|
||||
import Readings from './pages/Readings'
|
||||
import Reports from './pages/Reports'
|
||||
import Estimates from './pages/Estimates'
|
||||
import Settings from './pages/Settings'
|
||||
|
||||
export default function App() {
|
||||
const updateAvailable = useVersionCheck('/utilities/health')
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter basename="/utilities">
|
||||
<AuthGate>
|
||||
<Layout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/meters" replace />} />
|
||||
<Route path="/meters" element={<Meters />} />
|
||||
<Route path="/meters/:id" element={<MeterDetail />} />
|
||||
<Route path="/readings" element={<Readings />} />
|
||||
<Route path="/tariffs" element={<Tariffs />} />
|
||||
<Route path="/reports" element={<Reports />} />
|
||||
<Route path="/estimates" element={<Estimates />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="*" element={<Navigate to="/meters" replace />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
</AuthGate>
|
||||
</BrowserRouter>
|
||||
<UpdateBanner visible={updateAvailable} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
152
frontend/src/api.ts
Normal file
152
frontend/src/api.ts
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import type {
|
||||
Category, Meter, MeterDetail, Tariff, Reading, ConsumptionCostReport, RollupReport,
|
||||
EstimateReport, AppConfig,
|
||||
} from './types'
|
||||
|
||||
const BASE = '/utilities/api'
|
||||
|
||||
async function request<T>(path: string, opts: RequestInit = {}): Promise<T> {
|
||||
const res = await fetch(`${BASE}${path}`, {
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json', ...opts.headers },
|
||||
...opts,
|
||||
})
|
||||
if (res.status === 401) {
|
||||
;(window.top ?? window).location.href = '/login'
|
||||
throw new Error('Unauthenticated')
|
||||
}
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: res.statusText }))
|
||||
throw new Error(err.error || `Request failed: ${res.status}`)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
// Categories
|
||||
export function fetchCategories(): Promise<Category[]> {
|
||||
return request('/categories')
|
||||
}
|
||||
export function createCategory(body: Partial<Category>): Promise<Category> {
|
||||
return request('/categories', { method: 'POST', body: JSON.stringify(body) })
|
||||
}
|
||||
export function updateCategory(id: number, body: Partial<Category>): Promise<Category> {
|
||||
return request(`/categories/${id}`, { method: 'PATCH', body: JSON.stringify(body) })
|
||||
}
|
||||
|
||||
// Meters
|
||||
export function fetchMeters(filters: { category_id?: number; active?: boolean } = {}): Promise<Meter[]> {
|
||||
const params = new URLSearchParams()
|
||||
if (filters.category_id) params.set('category_id', String(filters.category_id))
|
||||
if (filters.active !== undefined) params.set('active', String(filters.active))
|
||||
const qs = params.toString()
|
||||
return request(`/meters${qs ? `?${qs}` : ''}`)
|
||||
}
|
||||
export function fetchMeter(id: number): Promise<MeterDetail> {
|
||||
return request(`/meters/${id}`)
|
||||
}
|
||||
export function createMeter(body: Record<string, unknown>): Promise<Meter> {
|
||||
return request('/meters', { method: 'POST', body: JSON.stringify(body) })
|
||||
}
|
||||
export function updateMeter(id: number, body: Record<string, unknown>): Promise<Meter> {
|
||||
return request(`/meters/${id}`, { method: 'PATCH', body: JSON.stringify(body) })
|
||||
}
|
||||
export async function uploadMeterImage(meterId: number, file: File): Promise<Meter> {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
const res = await fetch(`${BASE}/meters/${meterId}/image`, { method: 'POST', credentials: 'include', body: form })
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: res.statusText }))
|
||||
throw new Error(err.error || `Upload failed: ${res.status}`)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
export function deleteMeterImage(meterId: number): Promise<Meter> {
|
||||
return request(`/meters/${meterId}/image`, { method: 'DELETE' })
|
||||
}
|
||||
export function uploadUrl(filePath: string): string {
|
||||
return `${BASE}/uploads${filePath}`
|
||||
}
|
||||
|
||||
// Tariffs
|
||||
export function fetchTariffs(categoryId?: number): Promise<Tariff[]> {
|
||||
return request(`/tariffs${categoryId ? `?category_id=${categoryId}` : ''}`)
|
||||
}
|
||||
export function fetchTariff(id: number): Promise<Tariff> {
|
||||
return request(`/tariffs/${id}`)
|
||||
}
|
||||
export function createTariff(body: Record<string, unknown>): Promise<Tariff> {
|
||||
return request('/tariffs', { method: 'POST', body: JSON.stringify(body) })
|
||||
}
|
||||
export function updateTariff(id: number, body: Record<string, unknown>): Promise<Tariff> {
|
||||
return request(`/tariffs/${id}`, { method: 'PATCH', body: JSON.stringify(body) })
|
||||
}
|
||||
export function replaceTariffWindows(id: number, windows: Record<string, unknown>[]): Promise<unknown> {
|
||||
return request(`/tariffs/${id}/windows`, { method: 'PUT', body: JSON.stringify({ windows }) })
|
||||
}
|
||||
export function assignMeterTariff(meterId: number, tariffId: number, effectiveFrom: string): Promise<unknown> {
|
||||
return request(`/meters/${meterId}/assign-tariff`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ tariff_id: tariffId, effective_from: effectiveFrom }),
|
||||
})
|
||||
}
|
||||
|
||||
// Readings
|
||||
export function fetchReadings(filters: { meter_id?: number; from?: string; to?: string; limit?: number } = {}): Promise<Reading[]> {
|
||||
const params = new URLSearchParams()
|
||||
if (filters.meter_id) params.set('meter_id', String(filters.meter_id))
|
||||
if (filters.from) params.set('from', filters.from)
|
||||
if (filters.to) params.set('to', filters.to)
|
||||
if (filters.limit) params.set('limit', String(filters.limit))
|
||||
const qs = params.toString()
|
||||
return request(`/readings${qs ? `?${qs}` : ''}`)
|
||||
}
|
||||
export function createReading(body: { meter_id: number; reading_value: number; reading_date: string; notes?: string }): Promise<Reading> {
|
||||
return request('/readings', { method: 'POST', body: JSON.stringify(body) })
|
||||
}
|
||||
export function updateReading(id: number, body: Record<string, unknown>): Promise<Reading> {
|
||||
return request(`/readings/${id}`, { method: 'PATCH', body: JSON.stringify(body) })
|
||||
}
|
||||
export function deleteReading(id: number): Promise<{ ok: boolean }> {
|
||||
return request(`/readings/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
export async function uploadReadingPhoto(readingId: number, file: File): Promise<Reading> {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
const res = await fetch(`${BASE}/readings/${readingId}/photo`, { method: 'POST', credentials: 'include', body: form })
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: res.statusText }))
|
||||
throw new Error(err.error || `Upload failed: ${res.status}`)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
// Reports
|
||||
export function fetchConsumptionCostReport(period?: string, categoryId?: number): Promise<ConsumptionCostReport> {
|
||||
const params = new URLSearchParams()
|
||||
if (period) params.set('period', period)
|
||||
if (categoryId) params.set('category_id', String(categoryId))
|
||||
const qs = params.toString()
|
||||
return request(`/reports/consumption-cost${qs ? `?${qs}` : ''}`)
|
||||
}
|
||||
export function fetchRollupReport(period?: string): Promise<RollupReport> {
|
||||
return request(`/reports/rollup${period ? `?period=${period}` : ''}`)
|
||||
}
|
||||
|
||||
// Estimates
|
||||
export function fetchEstimates(categoryId?: number): Promise<EstimateReport> {
|
||||
return request(`/estimates${categoryId ? `?category_id=${categoryId}` : ''}`)
|
||||
}
|
||||
export function setCategoryEstimateWindow(categoryId: number, days: number | null): Promise<Category> {
|
||||
return request(`/estimates/category/${categoryId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ estimate_trailing_days: days }),
|
||||
})
|
||||
}
|
||||
|
||||
// Settings (global config)
|
||||
export function fetchConfig(): Promise<AppConfig> {
|
||||
return request('/config')
|
||||
}
|
||||
export function updateConfig(key: string, value: unknown): Promise<{ ok: boolean }> {
|
||||
return request(`/config/${key}`, { method: 'PUT', body: JSON.stringify({ value }) })
|
||||
}
|
||||
164
frontend/src/components/AuthGate.tsx
Normal file
164
frontend/src/components/AuthGate.tsx
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
import { useEffect, useRef, useState, createContext, useContext } from 'react'
|
||||
import type { User } from '../types'
|
||||
|
||||
function getInactivityMs(): number | null {
|
||||
if (window.matchMedia('(display-mode: standalone)').matches) return null
|
||||
const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins='))
|
||||
if (!c) return null
|
||||
const mins = parseInt(c.split('=')[1])
|
||||
return isNaN(mins) || mins <= 0 ? null : mins * 60 * 1000
|
||||
}
|
||||
|
||||
// Only bounce to the central login when actually embedded in the portal shell.
|
||||
// A standalone PWA or a directly-opened browser tab must never navigate away
|
||||
// from its own start_url/scope — otherwise it loses its installed-app context.
|
||||
function isEmbedded() {
|
||||
return window.top !== window
|
||||
}
|
||||
|
||||
interface AuthCtx { user: User }
|
||||
const Ctx = createContext<AuthCtx | null>(null)
|
||||
|
||||
export function useAuth() {
|
||||
const ctx = useContext(Ctx)
|
||||
if (!ctx) throw new Error('useAuth must be used inside AuthGate')
|
||||
return ctx
|
||||
}
|
||||
|
||||
export default function AuthGate({ children }: { children: React.ReactNode }) {
|
||||
const [state, setState] = useState<'checking' | 'authed' | 'login'>('checking')
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/auth/verify?app=utilities', { credentials: 'include' })
|
||||
.then(async r => {
|
||||
if (r.ok) {
|
||||
setUser(await r.json())
|
||||
setState('authed')
|
||||
} else if (isEmbedded()) {
|
||||
window.top!.location.href = `/login?from=${encodeURIComponent('/app/utilities')}`
|
||||
} else {
|
||||
setState('login')
|
||||
}
|
||||
})
|
||||
.catch(() => { if (!isEmbedded()) setState('login') })
|
||||
}, [])
|
||||
|
||||
// Inactivity auto-logout — disabled for installed PWAs; configurable per
|
||||
// device (Admin Settings → Device) for shared/front-desk browser sessions.
|
||||
useEffect(() => {
|
||||
const ms = getInactivityMs()
|
||||
if (state !== 'authed' || !ms) return
|
||||
const timeoutMs: number = ms
|
||||
|
||||
async function forceLogout() {
|
||||
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
|
||||
setUser(null)
|
||||
setState('login')
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (timerRef.current) clearTimeout(timerRef.current)
|
||||
timerRef.current = setTimeout(forceLogout, timeoutMs)
|
||||
}
|
||||
|
||||
const events = ['mousemove', 'keydown', 'click', 'touchstart'] as const
|
||||
events.forEach(e => window.addEventListener(e, reset, { passive: true }))
|
||||
reset()
|
||||
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current)
|
||||
events.forEach(e => window.removeEventListener(e, reset))
|
||||
}
|
||||
}, [state])
|
||||
|
||||
async function login(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST', credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password }),
|
||||
})
|
||||
if (!res.ok) { setError('Invalid email or password'); return }
|
||||
const verify = await fetch('/api/auth/verify?app=utilities', { credentials: 'include' })
|
||||
if (verify.ok) {
|
||||
setUser(await verify.json())
|
||||
setState('authed')
|
||||
} else {
|
||||
setError("You don't have access to this app.")
|
||||
}
|
||||
} catch {
|
||||
setError('Connection error — please try again')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (state === 'checking') {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
height: '100vh', fontFamily: 'var(--font)', color: 'var(--text-mid)'
|
||||
}}>
|
||||
Loading…
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state === 'login') {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||
justifyContent: 'center', height: '100dvh', padding: '1.5rem',
|
||||
background: 'var(--navy-dark)',
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'var(--navy)', borderRadius: 'var(--radius)',
|
||||
padding: '2rem', width: '100%', maxWidth: '360px',
|
||||
border: '1px solid var(--surface-2)',
|
||||
}}>
|
||||
<h1 style={{ fontSize: '1.4rem', marginBottom: '1.5rem', color: 'var(--gold)' }}>
|
||||
Utilities
|
||||
</h1>
|
||||
<form onSubmit={login} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||
<input
|
||||
type="email" value={email} onChange={e => setEmail(e.target.value)}
|
||||
placeholder="Email" required autoComplete="email"
|
||||
style={inputStyle}
|
||||
/>
|
||||
<input
|
||||
type="password" value={password} onChange={e => setPassword(e.target.value)}
|
||||
placeholder="Password" required autoComplete="current-password"
|
||||
style={inputStyle}
|
||||
/>
|
||||
{error && <p style={{ color: 'var(--danger)', fontSize: '0.875rem' }}>{error}</p>}
|
||||
<button type="submit" disabled={loading} style={{
|
||||
background: loading ? 'var(--surface-2)' : 'var(--gold)',
|
||||
color: loading ? 'var(--text-muted)' : 'var(--navy-dark)',
|
||||
border: 'none', borderRadius: '6px', padding: '0.625rem',
|
||||
fontSize: '1rem', fontWeight: 600, marginTop: '0.25rem',
|
||||
}}>
|
||||
{loading ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <Ctx.Provider value={{ user: user! }}>{children}</Ctx.Provider>
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
|
||||
borderRadius: '6px', color: 'var(--text)', padding: '0.625rem 0.75rem',
|
||||
fontSize: '1rem', width: '100%', outline: 'none',
|
||||
}
|
||||
75
frontend/src/components/Layout.tsx
Normal file
75
frontend/src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { NavLink, useLocation } from 'react-router-dom'
|
||||
import { Zap, Gauge, Receipt, BarChart3, TrendingUp, Settings, Menu, LogOut } from 'lucide-react'
|
||||
import { useAuth } from './AuthGate'
|
||||
import { can } from '../types'
|
||||
|
||||
const ICON_PROPS = { size: 16, strokeWidth: 1.75 }
|
||||
|
||||
const NAV = [
|
||||
{ to: '/meters', label: 'Meters', icon: Gauge, cap: 'meters' },
|
||||
{ to: '/readings', label: 'Readings', icon: Zap, cap: 'readings' },
|
||||
{ to: '/tariffs', label: 'Tariffs', icon: Receipt, cap: 'tariffs' },
|
||||
{ to: '/reports', label: 'Reports', icon: BarChart3, cap: 'reports' },
|
||||
{ to: '/estimates', label: 'Estimates', icon: TrendingUp, cap: 'estimates' },
|
||||
{ to: '/settings', label: 'Settings', icon: Settings, cap: 'settings' },
|
||||
]
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const { user } = useAuth()
|
||||
const items = NAV.filter(n => can(user, n.cap))
|
||||
const location = useLocation()
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
|
||||
async function logout() {
|
||||
await fetch('/utilities/api/auth/logout', { method: 'POST', credentials: 'include' })
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
useEffect(() => { setMenuOpen(false) }, [location.pathname])
|
||||
|
||||
return (
|
||||
<div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-logo">
|
||||
<Zap size={18} strokeWidth={1.75} />
|
||||
Utilities
|
||||
</div>
|
||||
<nav className="sidebar-nav">
|
||||
{items.map(({ to, label, icon: Icon }) => (
|
||||
<NavLink key={to} to={to} className={({ isActive }) => isActive ? 'active' : ''}>
|
||||
<Icon {...ICON_PROPS} />
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
<div className="sidebar-user" style={{ whiteSpace: 'normal' }}>
|
||||
<div style={{ fontWeight: 600, color: 'var(--text)', fontSize: '12px', marginBottom: '2px' }}>{user.name}</div>
|
||||
<div style={{ fontSize: '11px', marginBottom: '8px' }}>{user.email}</div>
|
||||
<button onClick={logout} style={{
|
||||
display: 'flex', alignItems: 'center', gap: '6px',
|
||||
background: 'none', border: 'none', color: 'inherit',
|
||||
fontSize: '12px', padding: 0, cursor: 'pointer',
|
||||
}}>
|
||||
<LogOut size={13} strokeWidth={1.75} />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{menuOpen && <div className="menu-backdrop" onClick={() => setMenuOpen(false)} />}
|
||||
|
||||
<header className="top-bar">
|
||||
<button className="top-bar-burger" onClick={() => setMenuOpen(o => !o)}>
|
||||
<Menu size={20} strokeWidth={1.75} />
|
||||
</button>
|
||||
<Zap size={18} strokeWidth={1.75} color="var(--gold)" />
|
||||
<span className="top-bar-title">Utilities</span>
|
||||
</header>
|
||||
|
||||
<main className="page-content">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
44
frontend/src/components/UpdateBanner.tsx
Normal file
44
frontend/src/components/UpdateBanner.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { RefreshCw } from 'lucide-react'
|
||||
|
||||
export function UpdateBanner({ visible }: { visible: boolean }) {
|
||||
if (!visible) return null
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 9999,
|
||||
background: 'var(--navy)',
|
||||
color: 'var(--text)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '12px',
|
||||
padding: '10px 16px',
|
||||
fontSize: '14px',
|
||||
boxShadow: '0 -2px 8px rgba(0,0,0,0.3)',
|
||||
}}>
|
||||
<span>A new version is available.</span>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
background: 'var(--gold)',
|
||||
color: 'var(--navy)',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
padding: '6px 14px',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
<RefreshCw size={14} strokeWidth={1.75} />
|
||||
Reload
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
43
frontend/src/hooks/useVersionCheck.ts
Normal file
43
frontend/src/hooks/useVersionCheck.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
|
||||
const POLL_MS = 2 * 60 * 1000
|
||||
|
||||
export function useVersionCheck(healthUrl: string) {
|
||||
const [updateAvailable, setUpdateAvailable] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let seenVersion: string | null = null
|
||||
|
||||
async function check() {
|
||||
try {
|
||||
const res = await fetch(healthUrl, { cache: 'no-store' })
|
||||
if (!res.ok) return
|
||||
const data = await res.json()
|
||||
const v: string | undefined = data.version
|
||||
if (!v) return
|
||||
if (seenVersion === null) {
|
||||
seenVersion = v
|
||||
} else if (v !== seenVersion) {
|
||||
setUpdateAvailable(true)
|
||||
}
|
||||
} catch {
|
||||
// network error — skip silently
|
||||
}
|
||||
}
|
||||
|
||||
check()
|
||||
const interval = setInterval(check, POLL_MS)
|
||||
|
||||
function onVisible() {
|
||||
if (document.visibilityState === 'visible') check()
|
||||
}
|
||||
document.addEventListener('visibilitychange', onVisible)
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
document.removeEventListener('visibilitychange', onVisible)
|
||||
}
|
||||
}, [healthUrl])
|
||||
|
||||
return updateAvailable
|
||||
}
|
||||
407
frontend/src/index.css
Normal file
407
frontend/src/index.css
Normal file
|
|
@ -0,0 +1,407 @@
|
|||
/* Stack design system tokens — include verbatim in every app */
|
||||
:root {
|
||||
--navy: #1a1a2e;
|
||||
--navy-dark: #0f0f20;
|
||||
--gold: #c9a84c;
|
||||
--gold-light: #e8c96d;
|
||||
--surface: rgba(255,255,255,0.07);
|
||||
--surface-2: rgba(255,255,255,0.08);
|
||||
--text: rgba(255,255,255,0.88);
|
||||
--text-muted: rgba(255,255,255,0.48);
|
||||
--body-bg: #f4f5f7;
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #e4e8ee;
|
||||
--text-dark: #1e293b;
|
||||
--text-mid: #64748b;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
||||
--danger: #dc2626;
|
||||
--radius: 10px;
|
||||
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
body { background: var(--body-bg); color: var(--text-dark); font-family: var(--font); }
|
||||
|
||||
/* App theme + semantic tokens */
|
||||
:root {
|
||||
--app-primary: #1e6091;
|
||||
--app-primary-light: #2c7fb8;
|
||||
|
||||
/* Meter category colour coding (content only — buttons stay gold) */
|
||||
--cat-electric: #d97706;
|
||||
--cat-gas: #dc2626;
|
||||
--cat-oil: #78716c;
|
||||
--cat-water: #0284c7;
|
||||
|
||||
--danger-bg: #fef2f2;
|
||||
--warn-bg: #fffbeb;
|
||||
--ok-bg: #f0fdf4;
|
||||
|
||||
--sidebar-w: 240px;
|
||||
--topbar-h: 56px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body, #root { height: 100%; margin: 0; font-size: 14px; }
|
||||
|
||||
::-webkit-scrollbar { width: 4px; height: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }
|
||||
|
||||
/* ── App shell ─────────────────────────────────────────────── */
|
||||
.app-shell { display: flex; height: 100vh; overflow: hidden; }
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-w);
|
||||
background: var(--navy);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 16px 12px;
|
||||
color: var(--gold);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.sidebar-logo svg { opacity: .8; }
|
||||
.sidebar-nav { flex: 1; padding: 8px 0; }
|
||||
.sidebar-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 13.5px;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.sidebar-nav a:hover { background: var(--surface); color: var(--text); }
|
||||
.sidebar-nav a.active { background: rgba(201,168,76,.1); color: var(--gold); }
|
||||
.sidebar-user {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--surface-2);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: none;
|
||||
height: var(--topbar-h);
|
||||
background: var(--navy);
|
||||
color: var(--text);
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.top-bar-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--gold); }
|
||||
.top-bar-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
|
||||
.top-bar-nav::-webkit-scrollbar { display: none; }
|
||||
.top-bar-nav a {
|
||||
color: var(--text-muted);
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-bar-nav a.active { color: var(--gold); }
|
||||
|
||||
.page-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
z-index: 200;
|
||||
transform: translateX(calc(-1 * var(--sidebar-w)));
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.app-shell.menu-open .sidebar { transform: translateX(0); }
|
||||
.top-bar { display: flex; }
|
||||
.app-shell { flex-direction: column; }
|
||||
.field-row { flex-direction: column; }
|
||||
}
|
||||
|
||||
.menu-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
.top-bar-burger {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Page chrome ───────────────────────────────────────────── */
|
||||
.page { padding: 20px; max-width: 1200px; width: 100%; margin: 0 auto; }
|
||||
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.page-header h1 { font-size: 18px; margin: 0; flex: 1; }
|
||||
|
||||
/* ── Buttons ───────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--card-border);
|
||||
background: var(--card-bg);
|
||||
color: var(--text-dark);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 14px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
transition: background .12s, border-color .12s;
|
||||
}
|
||||
.btn:hover { border-color: var(--text-mid); }
|
||||
.btn:disabled { opacity: .5; cursor: default; }
|
||||
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
|
||||
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }
|
||||
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
|
||||
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
|
||||
|
||||
/* ── Forms ─────────────────────────────────────────────────── */
|
||||
.field { margin-bottom: 12px; }
|
||||
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-mid); margin-bottom: 4px; }
|
||||
.field input[type="text"], .field input[type="email"], .field input[type="date"], .field input[type="time"],
|
||||
.field input[type="number"], .field select, .field textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
font-size: 13.5px;
|
||||
font-family: var(--font);
|
||||
color: var(--text-dark);
|
||||
background: var(--card-bg);
|
||||
}
|
||||
.field textarea { min-height: 72px; resize: vertical; }
|
||||
.field-row { display: flex; gap: 12px; }
|
||||
.field-row > .field { flex: 1; }
|
||||
.field-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
|
||||
.field-check input { width: 16px; height: 16px; accent-color: var(--gold); }
|
||||
.field-hint { font-size: 11.5px; color: var(--text-mid); margin-top: 3px; }
|
||||
|
||||
/* ── Cards & lists ─────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.meter-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow .12s;
|
||||
}
|
||||
.meter-card:hover { box-shadow: var(--shadow-md); }
|
||||
.meter-card.inactive { opacity: .55; }
|
||||
.meter-thumb {
|
||||
width: 48px; height: 48px; border-radius: 8px; object-fit: cover;
|
||||
border: 1px solid var(--card-border); flex-shrink: 0; background: var(--body-bg);
|
||||
}
|
||||
.meter-thumb-placeholder {
|
||||
width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--body-bg); color: var(--text-mid);
|
||||
}
|
||||
.meter-card-main { flex: 1; min-width: 0; }
|
||||
.meter-card-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
.meter-card-meta { font-size: 12px; color: var(--text-mid); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
||||
.meter-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
|
||||
.meter-reading-val { font-weight: 700; font-size: 14px; }
|
||||
.meter-reading-date { font-size: 11px; color: var(--text-mid); }
|
||||
|
||||
/* ── Category tabs ─────────────────────────────────────────── */
|
||||
.tab-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
|
||||
.tab-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px; border-radius: 20px; border: 1px solid var(--card-border);
|
||||
background: var(--card-bg); cursor: pointer; font-size: 13px; color: var(--text-mid);
|
||||
font-family: var(--font); transition: all .12s;
|
||||
}
|
||||
.tab-btn:hover { border-color: var(--gold); color: var(--text-dark); }
|
||||
.tab-btn.active { background: var(--navy); border-color: var(--navy); color: var(--gold); font-weight: 600; }
|
||||
|
||||
/* Category colour dots (content coding, not buttons) */
|
||||
.cat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
||||
.cat-electric { background: var(--cat-electric); }
|
||||
.cat-gas { background: var(--cat-gas); }
|
||||
.cat-oil { background: var(--cat-oil); }
|
||||
.cat-water { background: var(--cat-water); }
|
||||
|
||||
/* ── Badges ────────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 20px;
|
||||
padding: 2px 9px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--card-border);
|
||||
color: var(--text-mid);
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-anomaly { background: var(--danger); }
|
||||
.badge-tou { background: var(--app-primary); }
|
||||
|
||||
/* ── Chips ─────────────────────────────────────────────────── */
|
||||
.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; align-items: center; }
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--card-border);
|
||||
background: var(--card-bg);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--text-mid);
|
||||
user-select: none;
|
||||
font-family: var(--font);
|
||||
transition: all .12s;
|
||||
}
|
||||
.chip:hover { border-color: var(--gold); color: var(--text-dark); }
|
||||
.chip.active { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
|
||||
|
||||
/* ── Modal ─────────────────────────────────────────────────── */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15,15,32,.55);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 24px 12px;
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-md);
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
padding: 20px;
|
||||
margin: auto 0;
|
||||
}
|
||||
.modal-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
|
||||
.modal-header h2 { font-size: 16px; margin: 0; flex: 1; }
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-mid);
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
}
|
||||
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
|
||||
|
||||
/* ── Tables ────────────────────────────────────────────────── */
|
||||
.table-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
|
||||
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
table.data th {
|
||||
text-align: left;
|
||||
padding: 9px 12px;
|
||||
font-size: 11.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
color: var(--text-mid);
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--card-border); vertical-align: top; }
|
||||
table.data tr:last-child td { border-bottom: none; }
|
||||
table.data tr.clickable { cursor: pointer; }
|
||||
table.data tr.clickable:hover td { background: var(--body-bg); }
|
||||
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
table.data tr.total-row td { font-weight: 700; background: var(--body-bg); border-top: 2px solid var(--card-border); }
|
||||
table.data tr.anomaly-row td { background: var(--danger-bg); }
|
||||
|
||||
/* ── Stats strip ───────────────────────────────────────────── */
|
||||
.stats-strip { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
|
||||
.stat-box {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 10px 16px;
|
||||
min-width: 110px;
|
||||
}
|
||||
.stat-box .stat-value { font-size: 18px; font-weight: 700; }
|
||||
.stat-box .stat-label { font-size: 11px; color: var(--text-mid); text-transform: uppercase; letter-spacing: .04em; }
|
||||
|
||||
/* ── Settings ──────────────────────────────────────────────── */
|
||||
.settings-section { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
|
||||
.settings-section-header { padding: 14px 20px; border-bottom: 1px solid var(--card-border); font-weight: 600; font-size: 15px; }
|
||||
.settings-section-body { padding: 16px 20px; }
|
||||
.settings-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
|
||||
.settings-row:last-child { border-bottom: none; }
|
||||
.settings-label { flex: 1; font-size: 13px; }
|
||||
|
||||
/* ── Misc ──────────────────────────────────────────────────── */
|
||||
.empty-state { text-align: center; color: var(--text-mid); padding: 40px 16px; font-size: 13.5px; }
|
||||
.error-banner {
|
||||
background: var(--danger-bg);
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
border-radius: var(--radius);
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.info-banner {
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--gold);
|
||||
color: var(--text-dark);
|
||||
border-radius: var(--radius);
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mid); margin: 18px 0 8px; }
|
||||
.muted { color: var(--text-mid); }
|
||||
.loading-state { text-align: center; color: var(--text-mid); padding: 40px 16px; font-size: 13.5px; }
|
||||
|
||||
/* Sidebar scrollbar */
|
||||
.nav-scroll::-webkit-scrollbar,
|
||||
.sidebar::-webkit-scrollbar,
|
||||
.sidebar-nav::-webkit-scrollbar { width: 4px; }
|
||||
.nav-scroll::-webkit-scrollbar-track,
|
||||
.sidebar::-webkit-scrollbar-track,
|
||||
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
|
||||
.nav-scroll::-webkit-scrollbar-thumb,
|
||||
.sidebar::-webkit-scrollbar-thumb,
|
||||
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
|
||||
.nav-scroll::-webkit-scrollbar-thumb:hover,
|
||||
.sidebar::-webkit-scrollbar-thumb:hover,
|
||||
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
|
||||
.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }
|
||||
10
frontend/src/main.tsx
Normal file
10
frontend/src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
)
|
||||
150
frontend/src/pages/Estimates.tsx
Normal file
150
frontend/src/pages/Estimates.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import { can, formatMoney, formatUnits } from '../types'
|
||||
import type { Category, EstimateReport } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
const WINDOW_OPTIONS = [7, 14, 30]
|
||||
|
||||
export default function Estimates() {
|
||||
const { user } = useAuth()
|
||||
const canEdit = can(user, 'estimates')
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [categoryId, setCategoryId] = useState<number | ''>('')
|
||||
const [report, setReport] = useState<EstimateReport | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [savingCat, setSavingCat] = useState<number | null>(null)
|
||||
|
||||
const loadCategories = useCallback(() => {
|
||||
api.fetchCategories().then(setCategories).catch(err => setError(err.message))
|
||||
}, [])
|
||||
useEffect(() => { loadCategories() }, [loadCategories])
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true)
|
||||
api.fetchEstimates(categoryId || undefined)
|
||||
.then(setReport)
|
||||
.catch(err => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [categoryId])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
async function setWindow(catId: number, days: number | null) {
|
||||
setSavingCat(catId)
|
||||
try {
|
||||
await api.setCategoryEstimateWindow(catId, days)
|
||||
await loadCategories()
|
||||
load()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save')
|
||||
} finally {
|
||||
setSavingCat(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<h1>Estimates</h1>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<select value={categoryId} onChange={e => setCategoryId(e.target.value ? parseInt(e.target.value) : '')}>
|
||||
<option value="">All categories</option>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
|
||||
{loading || !report ? (
|
||||
<div className="loading-state">Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="info-banner">
|
||||
Projected cost for the current open period ({report.period.start} to {report.period.end}) — trailing average
|
||||
daily consumption × remaining days, plus standing charge, CCL and VAT for the full period.
|
||||
</div>
|
||||
|
||||
<div className="stats-strip">
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.total_pence)}</div><div className="stat-label">Projected total</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.usage_cost_pence)}</div><div className="stat-label">Usage</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.standing_cost_pence)}</div><div className="stat-label">Standing</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.ccl_cost_pence)}</div><div className="stat-label">CCL</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.vat_pence)}</div><div className="stat-label">VAT</div></div>
|
||||
</div>
|
||||
|
||||
{report.meters.length === 0 ? (
|
||||
<div className="empty-state">No active meters to estimate.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Meter</th><th>Category</th><th className="num">Trailing window</th>
|
||||
<th className="num">Daily rate</th><th className="num">Actual to date</th>
|
||||
<th className="num">Remaining days</th><th className="num">Projected consumption</th>
|
||||
<th className="num">Projected cost</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{report.meters.map(m => (
|
||||
<tr key={m.meter_id}>
|
||||
<td>{m.meter_name}</td>
|
||||
<td>{m.category_name}</td>
|
||||
<td className="num">{m.trailing_window_days}d</td>
|
||||
<td className="num">{m.daily_rate != null ? formatUnits(m.daily_rate, `${m.unit_label}/day`) : '—'}</td>
|
||||
<td className="num">{formatUnits(m.actual_to_date, m.unit_label)}</td>
|
||||
<td className="num">{m.remaining_days}</td>
|
||||
<td className="num">{formatUnits(m.projected_consumption, m.unit_label)}</td>
|
||||
<td className="num">{formatMoney(m.total_pence)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="section-title">Trailing-window assumptions per category</div>
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead><tr><th>Category</th><th>Window</th>{canEdit && <th></th>}</tr></thead>
|
||||
<tbody>
|
||||
{categories.map(c => (
|
||||
<tr key={c.id}>
|
||||
<td>{c.name}</td>
|
||||
<td>
|
||||
{c.estimate_trailing_days
|
||||
? `${c.estimate_trailing_days} days (override)`
|
||||
: `${report.global_default_window} days (global default)`}
|
||||
</td>
|
||||
{canEdit && (
|
||||
<td style={{ display: 'flex', gap: 6 }}>
|
||||
{WINDOW_OPTIONS.map(d => (
|
||||
<button
|
||||
key={d}
|
||||
className={`chip${c.estimate_trailing_days === d ? ' active' : ''}`}
|
||||
disabled={savingCat === c.id}
|
||||
onClick={() => setWindow(c.id, d)}
|
||||
>
|
||||
{d}d
|
||||
</button>
|
||||
))}
|
||||
{c.estimate_trailing_days && (
|
||||
<button className="btn btn-sm" disabled={savingCat === c.id} onClick={() => setWindow(c.id, null)}>
|
||||
Use default
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
198
frontend/src/pages/MeterDetail.tsx
Normal file
198
frontend/src/pages/MeterDetail.tsx
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { ArrowLeft, Gauge } from 'lucide-react'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import { can, formatUnits } from '../types'
|
||||
import type { MeterDetail as MeterDetailType, Tariff } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
export default function MeterDetail() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { user } = useAuth()
|
||||
const canManageMeters = can(user, 'meters')
|
||||
const canManageTariffs = can(user, 'tariffs')
|
||||
|
||||
const [meter, setMeter] = useState<MeterDetailType | null>(null)
|
||||
const [tariffs, setTariffs] = useState<Tariff[]>([])
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [assignTariffId, setAssignTariffId] = useState<number | ''>('')
|
||||
const [assignFrom, setAssignFrom] = useState(new Date().toISOString().slice(0, 10))
|
||||
const [imageFile, setImageFile] = useState<File | null>(null)
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!id) return
|
||||
api.fetchMeter(parseInt(id)).then(setMeter).catch(err => setError(err.message))
|
||||
}, [id])
|
||||
useEffect(() => { load() }, [load])
|
||||
useEffect(() => {
|
||||
if (meter) api.fetchTariffs(meter.category_id).then(setTariffs).catch(() => {})
|
||||
}, [meter?.category_id])
|
||||
|
||||
if (error) return <div className="page"><div className="error-banner">{error}</div></div>
|
||||
if (!meter) return <div className="page"><div className="loading-state">Loading…</div></div>
|
||||
|
||||
const currentTariff = meter.tariff_history.find(t => !t.effective_to)
|
||||
|
||||
async function uploadImage() {
|
||||
if (!imageFile || !meter) return
|
||||
try {
|
||||
await api.uploadMeterImage(meter.id, imageFile)
|
||||
setImageFile(null)
|
||||
load()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Upload failed')
|
||||
}
|
||||
}
|
||||
|
||||
async function removeImage() {
|
||||
if (!meter) return
|
||||
await api.deleteMeterImage(meter.id).catch(err => setError(err.message))
|
||||
load()
|
||||
}
|
||||
|
||||
async function assignTariff() {
|
||||
if (!meter || !assignTariffId) return
|
||||
try {
|
||||
await api.assignMeterTariff(meter.id, assignTariffId, assignFrom)
|
||||
setAssignTariffId('')
|
||||
load()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to assign tariff')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<button className="btn btn-sm" onClick={() => navigate('/meters')}>
|
||||
<ArrowLeft size={14} strokeWidth={1.75} /> Back
|
||||
</button>
|
||||
<h1>{meter.name}</h1>
|
||||
{!meter.active && <span className="badge badge-outline">inactive</span>}
|
||||
</div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
{meter.image_path ? (
|
||||
<img src={api.uploadUrl(meter.image_path)} alt={meter.name} style={{ width: 140, height: 140, objectFit: 'cover', borderRadius: 8, border: '1px solid var(--card-border)' }} />
|
||||
) : (
|
||||
<div style={{ width: 140, height: 140, borderRadius: 8, background: 'var(--body-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-mid)' }}>
|
||||
<Gauge size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
)}
|
||||
{canManageMeters && (
|
||||
<div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<input type="file" accept="image/*" onChange={e => setImageFile(e.target.files?.[0] || null)} style={{ fontSize: 11 }} />
|
||||
{imageFile && <button className="btn btn-sm" onClick={uploadImage}>Upload</button>}
|
||||
{meter.image_path && <button className="btn btn-sm btn-danger" onClick={removeImage}>Remove photo</button>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 200 }}>
|
||||
<div className="stats-strip">
|
||||
<div className="stat-box"><div className="stat-value">{meter.category_name}</div><div className="stat-label">Category</div></div>
|
||||
<div className="stat-box">
|
||||
<div className="stat-value">{formatUnits(meter.latest_reading_value ? Number(meter.latest_reading_value) : null, meter.unit_label)}</div>
|
||||
<div className="stat-label">Latest reading</div>
|
||||
</div>
|
||||
<div className="stat-box"><div className="stat-value">{currentTariff?.tariff_name || '—'}</div><div className="stat-label">Current tariff</div></div>
|
||||
</div>
|
||||
<div className="field-row">
|
||||
<div className="field"><label>Location</label><div>{meter.location || '—'}</div></div>
|
||||
<div className="field"><label>Serial number</label><div>{meter.serial_number || '—'}</div></div>
|
||||
</div>
|
||||
<div className="field-row">
|
||||
<div className="field"><label>Parent meter</label><div>{meter.parent_name || '—'}</div></div>
|
||||
<div className="field"><label>Install date</label><div>{meter.install_date ? new Date(meter.install_date).toLocaleDateString('en-GB') : '—'}</div></div>
|
||||
</div>
|
||||
{meter.notes && <div className="field"><label>Notes</label><div>{meter.notes}</div></div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{meter.children.length > 0 && (
|
||||
<>
|
||||
<div className="section-title">Sub-meters</div>
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead><tr><th>Name</th><th>Latest reading</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{meter.children.map(c => (
|
||||
<tr key={c.id} className="clickable" onClick={() => navigate(`/meters/${c.id}`)}>
|
||||
<td>{c.name}</td>
|
||||
<td>{c.latest_reading_value ? `${Number(c.latest_reading_value).toLocaleString()} (${new Date(c.latest_reading_date!).toLocaleDateString('en-GB')})` : 'no readings'}</td>
|
||||
<td><Link to={`/meters/${c.id}`}>View</Link></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="section-title">Tariff history</div>
|
||||
{canManageTariffs && (
|
||||
<div className="card">
|
||||
<div className="field-row" style={{ alignItems: 'flex-end' }}>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Assign tariff</label>
|
||||
<select value={assignTariffId} onChange={e => setAssignTariffId(e.target.value ? parseInt(e.target.value) : '')}>
|
||||
<option value="">Select…</option>
|
||||
{tariffs.map(t => <option key={t.id} value={t.id}>{t.name} ({t.supplier || 'no supplier'})</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Effective from</label>
|
||||
<input type="date" value={assignFrom} onChange={e => setAssignFrom(e.target.value)} />
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={assignTariff} style={{ marginBottom: 1 }}>Assign</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{meter.tariff_history.length === 0 ? (
|
||||
<div className="empty-state">No tariff has been assigned to this meter yet.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead><tr><th>Tariff</th><th>Supplier</th><th>From</th><th>To</th></tr></thead>
|
||||
<tbody>
|
||||
{meter.tariff_history.map(t => (
|
||||
<tr key={t.id}>
|
||||
<td>{t.tariff_name}</td>
|
||||
<td>{t.supplier || '—'}</td>
|
||||
<td>{new Date(t.effective_from).toLocaleDateString('en-GB')}</td>
|
||||
<td>{t.effective_to ? new Date(t.effective_to).toLocaleDateString('en-GB') : <span className="badge badge-outline">current</span>}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="section-title">Recent readings</div>
|
||||
{meter.recent_readings.length === 0 ? (
|
||||
<div className="empty-state">No readings recorded yet.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead><tr><th>Date</th><th className="num">Value</th><th>Recorded by</th><th>Notes</th></tr></thead>
|
||||
<tbody>
|
||||
{meter.recent_readings.map(r => (
|
||||
<tr key={r.id}>
|
||||
<td>{new Date(r.reading_date).toLocaleDateString('en-GB')}</td>
|
||||
<td className="num">{Number(r.reading_value).toLocaleString()} {meter.unit_label}</td>
|
||||
<td>{r.recorded_by || '—'}</td>
|
||||
<td>{r.notes || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
229
frontend/src/pages/Meters.tsx
Normal file
229
frontend/src/pages/Meters.tsx
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Plus, X, Image as ImageIcon, Gauge } from 'lucide-react'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import { can, CATEGORY_DOT_CLASS, formatUnits } from '../types'
|
||||
import type { Category, Meter } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
const emptyForm = {
|
||||
id: 0, category_id: 0, parent_meter_id: '' as number | '', name: '', location: '',
|
||||
serial_number: '', install_date: '', notes: '', active: true,
|
||||
}
|
||||
|
||||
export default function Meters() {
|
||||
const { user } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const canManage = can(user, 'meters')
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [meters, setMeters] = useState<Meter[]>([])
|
||||
const [activeCat, setActiveCat] = useState<number | null>(null)
|
||||
const [showInactive, setShowInactive] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const [form, setForm] = useState<typeof emptyForm | null>(null)
|
||||
const [imageFile, setImageFile] = useState<File | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true)
|
||||
Promise.all([api.fetchCategories(), api.fetchMeters()])
|
||||
.then(([cats, ms]) => { setCategories(cats); setMeters(ms) })
|
||||
.catch(err => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
const filtered = meters.filter(m =>
|
||||
(activeCat === null || m.category_id === activeCat) &&
|
||||
(showInactive || m.active)
|
||||
)
|
||||
|
||||
function openCreate() {
|
||||
setForm({ ...emptyForm, category_id: activeCat || categories[0]?.id || 0 })
|
||||
setImageFile(null)
|
||||
}
|
||||
|
||||
function openEdit(m: Meter) {
|
||||
setForm({
|
||||
id: m.id, category_id: m.category_id, parent_meter_id: m.parent_meter_id || '',
|
||||
name: m.name, location: m.location || '', serial_number: m.serial_number || '',
|
||||
install_date: m.install_date ? m.install_date.slice(0, 10) : '', notes: m.notes || '',
|
||||
active: m.active,
|
||||
})
|
||||
setImageFile(null)
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!form) return
|
||||
if (!form.name.trim() || !form.category_id) { setError('Name and category are required'); return }
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
const body = {
|
||||
category_id: form.category_id,
|
||||
parent_meter_id: form.parent_meter_id || null,
|
||||
name: form.name.trim(),
|
||||
location: form.location || null,
|
||||
serial_number: form.serial_number || null,
|
||||
install_date: form.install_date || null,
|
||||
notes: form.notes || null,
|
||||
active: form.active,
|
||||
}
|
||||
const saved = form.id ? await api.updateMeter(form.id, body) : await api.createMeter(body)
|
||||
if (imageFile) await api.uploadMeterImage(saved.id, imageFile)
|
||||
setForm(null)
|
||||
load()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Save failed')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const parentCandidates = form ? meters.filter(m => m.category_id === form.category_id && m.id !== form.id && !m.parent_meter_id) : []
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<h1>Meters</h1>
|
||||
<label className="field-check" style={{ marginRight: 4 }}>
|
||||
<input type="checkbox" checked={showInactive} onChange={e => setShowInactive(e.target.checked)} />
|
||||
Show inactive
|
||||
</label>
|
||||
{canManage && (
|
||||
<button className="btn btn-primary" onClick={openCreate}>
|
||||
<Plus size={14} strokeWidth={1.75} /> Add Meter
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
|
||||
<div className="tab-bar">
|
||||
<button className={`tab-btn${activeCat === null ? ' active' : ''}`} onClick={() => setActiveCat(null)}>
|
||||
All
|
||||
</button>
|
||||
{categories.map(c => (
|
||||
<button key={c.id} className={`tab-btn${activeCat === c.id ? ' active' : ''}`} onClick={() => setActiveCat(c.id)}>
|
||||
<span className={`cat-dot ${CATEGORY_DOT_CLASS[c.key] || ''}`} />
|
||||
{c.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="loading-state">Loading…</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="empty-state">No meters {activeCat !== null ? 'in this category' : ''} yet.</div>
|
||||
) : (
|
||||
filtered.map(m => (
|
||||
<div key={m.id} className={`card meter-card${m.active ? '' : ' inactive'}`} onClick={() => navigate(`/meters/${m.id}`)}>
|
||||
{m.image_path ? (
|
||||
<img className="meter-thumb" src={api.uploadUrl(m.image_path)} alt={m.name} />
|
||||
) : (
|
||||
<div className="meter-thumb-placeholder"><Gauge size={20} strokeWidth={1.75} /></div>
|
||||
)}
|
||||
<div className="meter-card-main">
|
||||
<div className="meter-card-title">
|
||||
<span className={`cat-dot ${CATEGORY_DOT_CLASS[m.category_key] || ''}`} />
|
||||
{m.name}
|
||||
{m.parent_name && <span className="badge badge-outline">child of {m.parent_name}</span>}
|
||||
{!m.active && <span className="badge badge-outline">inactive</span>}
|
||||
</div>
|
||||
<div className="meter-card-meta">
|
||||
<span>{m.category_name}</span>
|
||||
{m.location && <span>{m.location}</span>}
|
||||
{m.serial_number && <span>S/N {m.serial_number}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="meter-card-side">
|
||||
<span className="meter-reading-val">{formatUnits(m.latest_reading_value ? Number(m.latest_reading_value) : null, m.unit_label)}</span>
|
||||
<span className="meter-reading-date">{m.latest_reading_date ? new Date(m.latest_reading_date).toLocaleDateString('en-GB') : 'no readings'}</span>
|
||||
</div>
|
||||
{canManage && (
|
||||
<button className="btn btn-sm" onClick={e => { e.stopPropagation(); openEdit(m) }}>Edit</button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{form && (
|
||||
<div className="modal-overlay" onClick={() => setForm(null)}>
|
||||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>{form.id ? 'Edit Meter' : 'New Meter'}</h2>
|
||||
<button className="modal-close" onClick={() => setForm(null)}><X size={18} strokeWidth={1.75} /></button>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label>Name</label>
|
||||
<input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="e.g. Main Electric Incomer" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Category</label>
|
||||
<select value={form.category_id} onChange={e => setForm({ ...form, category_id: parseInt(e.target.value), parent_meter_id: '' })}>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label>Location</label>
|
||||
<input type="text" value={form.location} onChange={e => setForm({ ...form, location: e.target.value })} placeholder="e.g. Basement plant room" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Serial number</label>
|
||||
<input type="text" value={form.serial_number} onChange={e => setForm({ ...form, serial_number: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label>Parent meter (sub-metering)</label>
|
||||
<select value={form.parent_meter_id} onChange={e => setForm({ ...form, parent_meter_id: e.target.value ? parseInt(e.target.value) : '' })}>
|
||||
<option value="">None — top-level meter</option>
|
||||
{parentCandidates.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
|
||||
</select>
|
||||
<div className="field-hint">Reports flag when child meters' consumption exceeds the parent's.</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Install date</label>
|
||||
<input type="date" value={form.install_date} onChange={e => setForm({ ...form, install_date: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label>Notes</label>
|
||||
<textarea value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label>Photo</label>
|
||||
<input type="file" accept="image/*" onChange={e => setImageFile(e.target.files?.[0] || null)} />
|
||||
</div>
|
||||
|
||||
{form.id > 0 && (
|
||||
<label className="field-check">
|
||||
<input type="checkbox" checked={form.active} onChange={e => setForm({ ...form, active: e.target.checked })} />
|
||||
Active
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="modal-actions">
|
||||
<button className="btn" onClick={() => setForm(null)}>Cancel</button>
|
||||
<button className="btn btn-primary" onClick={save} disabled={saving}>
|
||||
<ImageIcon size={14} strokeWidth={1.75} style={{ display: imageFile ? 'inline' : 'none' }} />
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
155
frontend/src/pages/Readings.tsx
Normal file
155
frontend/src/pages/Readings.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Camera, Trash2 } from 'lucide-react'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import { can } from '../types'
|
||||
import type { Meter, Reading } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
export default function Readings() {
|
||||
const { user } = useAuth()
|
||||
const canEnter = can(user, 'readings')
|
||||
|
||||
const [meters, setMeters] = useState<Meter[]>([])
|
||||
const [meterId, setMeterId] = useState<number | ''>('')
|
||||
const [readings, setReadings] = useState<Reading[]>([])
|
||||
const [value, setValue] = useState('')
|
||||
const [date, setDate] = useState(new Date().toISOString().slice(0, 10))
|
||||
const [notes, setNotes] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [photoTargetId, setPhotoTargetId] = useState<number | null>(null)
|
||||
|
||||
const loadMeters = useCallback(() => {
|
||||
api.fetchMeters({ active: true }).then(ms => {
|
||||
setMeters(ms)
|
||||
if (!meterId && ms.length) setMeterId(ms[0].id)
|
||||
}).catch(err => setError(err.message))
|
||||
}, [meterId])
|
||||
useEffect(() => { loadMeters() }, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const loadReadings = useCallback(() => {
|
||||
api.fetchReadings({ meter_id: meterId ? Number(meterId) : undefined, limit: 50 })
|
||||
.then(setReadings).catch(err => setError(err.message))
|
||||
}, [meterId])
|
||||
useEffect(() => { loadReadings() }, [loadReadings])
|
||||
|
||||
const selectedMeter = meters.find(m => m.id === meterId)
|
||||
|
||||
async function submit() {
|
||||
if (!meterId || value === '') { setError('Meter and reading value are required'); return }
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
setInfo(null)
|
||||
try {
|
||||
const r = await api.createReading({ meter_id: Number(meterId), reading_value: parseFloat(value), reading_date: date, notes: notes || undefined })
|
||||
setValue('')
|
||||
setNotes('')
|
||||
if (r.warning) setInfo(r.warning)
|
||||
loadReadings()
|
||||
loadMeters()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Save failed')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!window.confirm('Delete this reading?')) return
|
||||
await api.deleteReading(id).catch(err => setError(err.message))
|
||||
loadReadings()
|
||||
loadMeters()
|
||||
}
|
||||
|
||||
async function uploadPhoto(id: number, file: File) {
|
||||
try {
|
||||
await api.uploadReadingPhoto(id, file)
|
||||
loadReadings()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Upload failed')
|
||||
} finally {
|
||||
setPhotoTargetId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header"><h1>Readings</h1></div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{info && <div className="info-banner">{info}</div>}
|
||||
|
||||
{canEnter && (
|
||||
<div className="card">
|
||||
<div className="field-row" style={{ alignItems: 'flex-end' }}>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Meter</label>
|
||||
<select value={meterId} onChange={e => setMeterId(e.target.value ? parseInt(e.target.value) : '')}>
|
||||
{meters.map(m => <option key={m.id} value={m.id}>{m.name} ({m.category_name})</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Reading value{selectedMeter ? ` (${selectedMeter.unit_label})` : ''}</label>
|
||||
<input type="number" step="0.001" value={value} onChange={e => setValue(e.target.value)} placeholder="e.g. 45231.5" />
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Date</label>
|
||||
<input type="date" value={date} onChange={e => setDate(e.target.value)} />
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0, flex: 1.5 }}>
|
||||
<label>Notes</label>
|
||||
<input type="text" value={notes} onChange={e => setNotes(e.target.value)} placeholder="optional" />
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={submit} disabled={saving} style={{ marginBottom: 1 }}>
|
||||
{saving ? 'Saving…' : 'Add reading'}
|
||||
</button>
|
||||
</div>
|
||||
{selectedMeter?.latest_reading_value && (
|
||||
<div className="field-hint" style={{ marginTop: 6 }}>
|
||||
Previous reading: {Number(selectedMeter.latest_reading_value).toLocaleString()} {selectedMeter.unit_label} on {new Date(selectedMeter.latest_reading_date!).toLocaleDateString('en-GB')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="section-title">History</div>
|
||||
{readings.length === 0 ? (
|
||||
<div className="empty-state">No readings for this meter yet.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead>
|
||||
<tr><th>Date</th><th>Meter</th><th className="num">Value</th><th>Recorded by</th><th>Notes</th><th>Photo</th>{canEnter && <th></th>}</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{readings.map(r => (
|
||||
<tr key={r.id}>
|
||||
<td>{new Date(r.reading_date).toLocaleDateString('en-GB')}</td>
|
||||
<td>{r.meter_name}</td>
|
||||
<td className="num">{Number(r.reading_value).toLocaleString()} {r.unit_label}</td>
|
||||
<td>{r.recorded_by || '—'}</td>
|
||||
<td>{r.notes || '—'}</td>
|
||||
<td>
|
||||
{r.photo_path ? (
|
||||
<a href={api.uploadUrl(r.photo_path)} target="_blank" rel="noreferrer">View</a>
|
||||
) : canEnter ? (
|
||||
photoTargetId === r.id ? (
|
||||
<input type="file" accept="image/*" autoFocus onChange={e => e.target.files?.[0] && uploadPhoto(r.id, e.target.files[0])} />
|
||||
) : (
|
||||
<button className="btn btn-sm" onClick={() => setPhotoTargetId(r.id)}><Camera size={13} strokeWidth={1.75} /></button>
|
||||
)
|
||||
) : '—'}
|
||||
</td>
|
||||
{canEnter && (
|
||||
<td><button className="btn btn-sm btn-danger" onClick={() => remove(r.id)}><Trash2 size={13} strokeWidth={1.75} /></button></td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
134
frontend/src/pages/Reports.tsx
Normal file
134
frontend/src/pages/Reports.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { AlertTriangle } from 'lucide-react'
|
||||
import { formatMoney, formatUnits } from '../types'
|
||||
import type { Category, ConsumptionCostReport, RollupReport } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
function currentPeriod(): string {
|
||||
const now = new Date()
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export default function Reports() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [categoryId, setCategoryId] = useState<number | ''>('')
|
||||
const [period, setPeriod] = useState(currentPeriod())
|
||||
const [report, setReport] = useState<ConsumptionCostReport | null>(null)
|
||||
const [rollup, setRollup] = useState<RollupReport | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => { api.fetchCategories().then(setCategories).catch(() => {}) }, [])
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
Promise.all([
|
||||
api.fetchConsumptionCostReport(period, categoryId || undefined),
|
||||
api.fetchRollupReport(period),
|
||||
]).then(([r, ru]) => { setReport(r); setRollup(ru) })
|
||||
.catch(err => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [period, categoryId])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<h1>Reports</h1>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<input type="month" value={period} onChange={e => setPeriod(e.target.value)} />
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<select value={categoryId} onChange={e => setCategoryId(e.target.value ? parseInt(e.target.value) : '')}>
|
||||
<option value="">All categories</option>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{loading || !report ? (
|
||||
<div className="loading-state">Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="stats-strip">
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.total_pence)}</div><div className="stat-label">Total cost</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.usage_cost_pence)}</div><div className="stat-label">Usage</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.standing_cost_pence)}</div><div className="stat-label">Standing</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.ccl_cost_pence)}</div><div className="stat-label">CCL</div></div>
|
||||
<div className="stat-box"><div className="stat-value">{formatMoney(report.totals.vat_pence)}</div><div className="stat-label">VAT</div></div>
|
||||
</div>
|
||||
|
||||
<div className="section-title">Consumption & cost by meter</div>
|
||||
{report.meters.length === 0 ? (
|
||||
<div className="empty-state">No meters to report on.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Meter</th><th>Category</th><th className="num">Consumption</th>
|
||||
<th className="num">Usage</th><th className="num">Standing</th><th className="num">CCL</th>
|
||||
<th className="num">VAT</th><th className="num">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{report.meters.map(m => (
|
||||
<tr key={m.meter_id}>
|
||||
<td>{m.meter_name}{!m.has_data && <span className="badge badge-outline" style={{ marginLeft: 6 }}>no data</span>}</td>
|
||||
<td>{m.category_name}</td>
|
||||
<td className="num">{formatUnits(m.consumption, m.unit_label)}</td>
|
||||
<td className="num">{formatMoney(m.usage_cost_pence)}</td>
|
||||
<td className="num">{formatMoney(m.standing_cost_pence)}</td>
|
||||
<td className="num">{formatMoney(m.ccl_cost_pence)}</td>
|
||||
<td className="num">{formatMoney(m.vat_pence)}</td>
|
||||
<td className="num">{formatMoney(m.total_pence)}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="total-row">
|
||||
<td colSpan={2}>Total</td>
|
||||
<td className="num">{report.totals.consumption.toLocaleString(undefined, { maximumFractionDigits: 1 })}</td>
|
||||
<td className="num">{formatMoney(report.totals.usage_cost_pence)}</td>
|
||||
<td className="num">{formatMoney(report.totals.standing_cost_pence)}</td>
|
||||
<td className="num">{formatMoney(report.totals.ccl_cost_pence)}</td>
|
||||
<td className="num">{formatMoney(report.totals.vat_pence)}</td>
|
||||
<td className="num">{formatMoney(report.totals.total_pence)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="section-title">Sub-metering rollup</div>
|
||||
{!rollup || rollup.rollups.length === 0 ? (
|
||||
<div className="empty-state">No parent/child meter relationships configured.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead><tr><th>Parent meter</th><th className="num">Parent consumption</th><th className="num">Children sum</th><th>Children</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{rollup.rollups.map(r => (
|
||||
<tr key={r.parent_meter_id} className={r.anomaly ? 'anomaly-row' : ''}>
|
||||
<td>{r.parent_meter_name}</td>
|
||||
<td className="num">{formatUnits(r.parent_consumption, r.unit_label)}</td>
|
||||
<td className="num">{formatUnits(r.child_sum, r.unit_label)}</td>
|
||||
<td>{r.children.map(c => c.meter_name).join(', ')}</td>
|
||||
<td>
|
||||
{r.anomaly && (
|
||||
<span className="badge badge-anomaly">
|
||||
<AlertTriangle size={11} strokeWidth={1.75} /> Children exceed parent
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
93
frontend/src/pages/Settings.tsx
Normal file
93
frontend/src/pages/Settings.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import { can } from '../types'
|
||||
import type { AppConfig } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
const WINDOW_OPTIONS = [7, 14, 30]
|
||||
|
||||
export default function Settings() {
|
||||
const { user } = useAuth()
|
||||
const hasCap = (cap: string) => can(user, cap)
|
||||
|
||||
const [config, setConfig] = useState<AppConfig | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
api.fetchConfig().then(setConfig).catch(err => setError(err.message))
|
||||
}, [])
|
||||
|
||||
if (!hasCap('settings')) {
|
||||
return <div className="page"><div className="error-banner">You don't have permission to access settings.</div></div>
|
||||
}
|
||||
|
||||
if (!config) {
|
||||
return <div className="page"><div className="loading-state">Loading…</div></div>
|
||||
}
|
||||
|
||||
async function setDefaultWindow(days: number) {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
await api.updateConfig('estimate_trailing_days', days)
|
||||
setConfig(c => c ? { ...c, estimate_trailing_days: days } : c)
|
||||
setSaved(true)
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Save failed')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header"><h1>Settings</h1></div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
|
||||
<div className="settings-section">
|
||||
<div className="settings-section-header">Estimate defaults</div>
|
||||
<div className="settings-section-body">
|
||||
<div className="settings-row">
|
||||
<div className="settings-label">
|
||||
<div>Global trailing-average window</div>
|
||||
<div className="field-hint">
|
||||
Used to project the remaining days of the current billing period when a category
|
||||
has no override set (see the Estimates page for per-category overrides).
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
{WINDOW_OPTIONS.map(d => (
|
||||
<button
|
||||
key={d}
|
||||
className={`chip${config.estimate_trailing_days === d ? ' active' : ''}`}
|
||||
disabled={saving}
|
||||
onClick={() => setDefaultWindow(d)}
|
||||
>
|
||||
{d} days
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{saved && <div className="field-hint" style={{ color: 'var(--gold)', marginTop: 6 }}>Saved.</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section">
|
||||
<div className="settings-section-header">About</div>
|
||||
<div className="settings-section-body">
|
||||
<p className="muted" style={{ fontSize: 13, lineHeight: 1.6 }}>
|
||||
Meter categories, meters and images are managed from the Meters page. Tariffs, rate
|
||||
windows, standing charges and CCL are managed from the Tariffs page. This app also
|
||||
exposes a read-only internal API (readings/costs/estimate summaries), gated by a static
|
||||
API key, used by the Reports app to build the Directors' report — no configuration is
|
||||
needed here for that integration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
281
frontend/src/pages/Tariffs.tsx
Normal file
281
frontend/src/pages/Tariffs.tsx
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Plus, X, Trash2 } from 'lucide-react'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import { can, formatMoney } from '../types'
|
||||
import type { Category, Tariff, RateWindow } from '../types'
|
||||
import * as api from '../api'
|
||||
|
||||
interface WindowForm extends RateWindow {
|
||||
split_pct: number
|
||||
}
|
||||
|
||||
const emptyWindow = (label: string, sort: number): WindowForm => ({
|
||||
label, start_time: null, end_time: null, days_of_week: null, unit_rate_pence_per_unit: 0, sort_order: sort, split_pct: 100,
|
||||
})
|
||||
|
||||
const emptyForm = {
|
||||
id: 0, category_id: 0, name: '', supplier: '', effective_from: new Date().toISOString().slice(0, 10),
|
||||
effective_to: '', standing_charge_pence_per_day: 0, ccl_rate_pence_per_unit: '' as number | '', ccl_exempt: false,
|
||||
vat_rate_pct: 20, is_time_of_use: false, windows: [emptyWindow('Standard', 0)],
|
||||
}
|
||||
|
||||
export default function Tariffs() {
|
||||
const { user } = useAuth()
|
||||
const canManage = can(user, 'tariffs')
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [tariffs, setTariffs] = useState<Tariff[]>([])
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [form, setForm] = useState<typeof emptyForm | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true)
|
||||
Promise.all([api.fetchCategories(), api.fetchTariffs()])
|
||||
.then(([cats, ts]) => { setCategories(cats); setTariffs(ts) })
|
||||
.catch(err => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
function openCreate() {
|
||||
setForm({ ...emptyForm, category_id: categories[0]?.id || 0 })
|
||||
}
|
||||
|
||||
async function openEdit(t: Tariff) {
|
||||
try {
|
||||
const full = await api.fetchTariff(t.id)
|
||||
const windows: WindowForm[] = (full.windows || []).map(w => ({
|
||||
...w,
|
||||
split_pct: full.fallback_split_pct?.[w.label.toLowerCase()] ?? 0,
|
||||
}))
|
||||
setForm({
|
||||
id: full.id, category_id: full.category_id, name: full.name, supplier: full.supplier || '',
|
||||
effective_from: full.effective_from.slice(0, 10), effective_to: full.effective_to ? full.effective_to.slice(0, 10) : '',
|
||||
standing_charge_pence_per_day: Number(full.standing_charge_pence_per_day),
|
||||
ccl_rate_pence_per_unit: full.ccl_rate_pence_per_unit != null ? Number(full.ccl_rate_pence_per_unit) : '',
|
||||
ccl_exempt: full.ccl_exempt, vat_rate_pct: Number(full.vat_rate_pct), is_time_of_use: full.is_time_of_use,
|
||||
windows: windows.length ? windows : [emptyWindow('Standard', 0)],
|
||||
})
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load tariff')
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTou(on: boolean) {
|
||||
if (!form) return
|
||||
if (on && form.windows.length < 2) {
|
||||
setForm({ ...form, is_time_of_use: true, windows: [emptyWindow('Day', 0), emptyWindow('Night', 1)] })
|
||||
} else if (!on) {
|
||||
setForm({ ...form, is_time_of_use: false, windows: [emptyWindow('Standard', 0)] })
|
||||
} else {
|
||||
setForm({ ...form, is_time_of_use: true })
|
||||
}
|
||||
}
|
||||
|
||||
function updateWindow(i: number, patch: Partial<WindowForm>) {
|
||||
if (!form) return
|
||||
const windows = form.windows.map((w, idx) => idx === i ? { ...w, ...patch } : w)
|
||||
setForm({ ...form, windows })
|
||||
}
|
||||
|
||||
function addWindow() {
|
||||
if (!form) return
|
||||
setForm({ ...form, windows: [...form.windows, emptyWindow('Weekend', form.windows.length)] })
|
||||
}
|
||||
|
||||
function removeWindow(i: number) {
|
||||
if (!form || form.windows.length <= 1) return
|
||||
setForm({ ...form, windows: form.windows.filter((_, idx) => idx !== i) })
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!form) return
|
||||
if (!form.name.trim() || !form.category_id) { setError('Name and category are required'); return }
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
const fallback_split_pct = form.is_time_of_use
|
||||
? Object.fromEntries(form.windows.map(w => [w.label.toLowerCase(), w.split_pct]))
|
||||
: {}
|
||||
const windows = form.windows.map(({ split_pct: _split_pct, ...w }) => w)
|
||||
const body = {
|
||||
category_id: form.category_id, name: form.name.trim(), supplier: form.supplier || null,
|
||||
effective_from: form.effective_from, effective_to: form.effective_to || null,
|
||||
standing_charge_pence_per_day: form.standing_charge_pence_per_day,
|
||||
ccl_rate_pence_per_unit: form.ccl_rate_pence_per_unit === '' ? null : form.ccl_rate_pence_per_unit,
|
||||
ccl_exempt: form.ccl_exempt, vat_rate_pct: form.vat_rate_pct, is_time_of_use: form.is_time_of_use,
|
||||
fallback_split_pct, windows,
|
||||
}
|
||||
if (form.id) {
|
||||
await api.updateTariff(form.id, body)
|
||||
await api.replaceTariffWindows(form.id, windows)
|
||||
} else {
|
||||
await api.createTariff(body)
|
||||
}
|
||||
setForm(null)
|
||||
load()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Save failed')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const splitTotal = form ? form.windows.reduce((s, w) => s + (Number(w.split_pct) || 0), 0) : 0
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<h1>Tariffs</h1>
|
||||
{canManage && (
|
||||
<button className="btn btn-primary" onClick={openCreate}>
|
||||
<Plus size={14} strokeWidth={1.75} /> Add Tariff
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
|
||||
{loading ? (
|
||||
<div className="loading-state">Loading…</div>
|
||||
) : tariffs.length === 0 ? (
|
||||
<div className="empty-state">No tariffs configured yet.</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Category</th><th>Supplier</th><th>From</th><th>To</th><th>Type</th><th className="num">Standing/day</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tariffs.map(t => (
|
||||
<tr key={t.id} className="clickable" onClick={() => canManage && openEdit(t)}>
|
||||
<td>{t.name}</td>
|
||||
<td>{t.category_name}</td>
|
||||
<td>{t.supplier || '—'}</td>
|
||||
<td>{new Date(t.effective_from).toLocaleDateString('en-GB')}</td>
|
||||
<td>{t.effective_to ? new Date(t.effective_to).toLocaleDateString('en-GB') : <span className="badge badge-outline">open</span>}</td>
|
||||
<td>{t.is_time_of_use ? <span className="badge badge-tou">TOU</span> : 'Standard'}</td>
|
||||
<td className="num">{formatMoney(Number(t.standing_charge_pence_per_day))}</td>
|
||||
<td>{t.window_count} window{t.window_count === 1 ? '' : 's'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{form && (
|
||||
<div className="modal-overlay" onClick={() => setForm(null)}>
|
||||
<div className="modal" style={{ maxWidth: 760 }} onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>{form.id ? 'Edit Tariff' : 'New Tariff'}</h2>
|
||||
<button className="modal-close" onClick={() => setForm(null)}><X size={18} strokeWidth={1.75} /></button>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label>Name</label>
|
||||
<input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="e.g. British Gas Commercial 2026" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Category</label>
|
||||
<select value={form.category_id} onChange={e => setForm({ ...form, category_id: parseInt(e.target.value) })}>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label>Supplier</label>
|
||||
<input type="text" value={form.supplier} onChange={e => setForm({ ...form, supplier: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Effective from</label>
|
||||
<input type="date" value={form.effective_from} onChange={e => setForm({ ...form, effective_from: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Effective to (optional)</label>
|
||||
<input type="date" value={form.effective_to} onChange={e => setForm({ ...form, effective_to: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label>Standing charge (pence/day)</label>
|
||||
<input type="number" step="0.01" value={form.standing_charge_pence_per_day} onChange={e => setForm({ ...form, standing_charge_pence_per_day: parseFloat(e.target.value) || 0 })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>VAT rate (%)</label>
|
||||
<input type="number" step="0.1" value={form.vat_rate_pct} onChange={e => setForm({ ...form, vat_rate_pct: parseFloat(e.target.value) || 0 })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>CCL rate (pence/unit)</label>
|
||||
<input type="number" step="0.0001" disabled={form.ccl_exempt} value={form.ccl_rate_pence_per_unit}
|
||||
onChange={e => setForm({ ...form, ccl_rate_pence_per_unit: e.target.value === '' ? '' : parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="field-check" style={{ marginBottom: 14 }}>
|
||||
<input type="checkbox" checked={form.ccl_exempt} onChange={e => setForm({ ...form, ccl_exempt: e.target.checked })} />
|
||||
Climate Change Levy exempt
|
||||
</label>
|
||||
|
||||
<label className="field-check" style={{ marginBottom: 14 }}>
|
||||
<input type="checkbox" checked={form.is_time_of_use} onChange={e => toggleTou(e.target.checked)} />
|
||||
Time-of-use tariff (split cost across rate windows using a fallback %)
|
||||
</label>
|
||||
|
||||
<div className="section-title" style={{ margin: '4px 0 8px' }}>
|
||||
Rate windows {form.is_time_of_use && <span className="muted">— fallback split must total 100%</span>}
|
||||
</div>
|
||||
{form.windows.map((w, i) => (
|
||||
<div key={i} className="field-row" style={{ alignItems: 'flex-end', marginBottom: 8 }}>
|
||||
<div className="field" style={{ marginBottom: 0, flex: 1.2 }}>
|
||||
<label>Label</label>
|
||||
<input type="text" value={w.label} onChange={e => updateWindow(i, { label: e.target.value })} />
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Start</label>
|
||||
<input type="time" value={w.start_time || ''} onChange={e => updateWindow(i, { start_time: e.target.value || null })} />
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>End</label>
|
||||
<input type="time" value={w.end_time || ''} onChange={e => updateWindow(i, { end_time: e.target.value || null })} />
|
||||
</div>
|
||||
<div className="field" style={{ marginBottom: 0 }}>
|
||||
<label>Rate (p/unit)</label>
|
||||
<input type="number" step="0.0001" value={w.unit_rate_pence_per_unit} onChange={e => updateWindow(i, { unit_rate_pence_per_unit: parseFloat(e.target.value) || 0 })} />
|
||||
</div>
|
||||
{form.is_time_of_use && (
|
||||
<div className="field" style={{ marginBottom: 0, maxWidth: 90 }}>
|
||||
<label>Split %</label>
|
||||
<input type="number" step="1" value={w.split_pct} onChange={e => updateWindow(i, { split_pct: parseFloat(e.target.value) || 0 })} />
|
||||
</div>
|
||||
)}
|
||||
{form.windows.length > 1 && (
|
||||
<button className="btn btn-sm btn-danger" style={{ marginBottom: 1 }} onClick={() => removeWindow(i)}>
|
||||
<Trash2 size={13} strokeWidth={1.75} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{form.is_time_of_use && Math.round(splitTotal) !== 100 && (
|
||||
<div className="error-banner">Fallback split currently totals {splitTotal}% — it should total 100%.</div>
|
||||
)}
|
||||
<button className="btn btn-sm" onClick={addWindow} style={{ marginBottom: 14 }}>
|
||||
<Plus size={13} strokeWidth={1.75} /> Add window
|
||||
</button>
|
||||
|
||||
<div className="modal-actions">
|
||||
<button className="btn" onClick={() => setForm(null)}>Cancel</button>
|
||||
<button className="btn btn-primary" onClick={save} disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
218
frontend/src/types.ts
Normal file
218
frontend/src/types.ts
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
export interface User {
|
||||
email: string
|
||||
name: string
|
||||
is_admin: boolean
|
||||
caps: string[] // bare slugs — verify?app=utilities strips the prefix
|
||||
}
|
||||
|
||||
export function can(user: User, cap: string): boolean {
|
||||
return user.is_admin || user.caps.includes(cap)
|
||||
}
|
||||
|
||||
export type UtilCap = 'readings' | 'meters' | 'tariffs' | 'reports' | 'estimates' | 'settings'
|
||||
|
||||
export interface Category {
|
||||
id: number
|
||||
key: string
|
||||
name: string
|
||||
unit_label: string
|
||||
icon: string
|
||||
sort_order: number
|
||||
active: boolean
|
||||
estimate_trailing_days: number | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
// Maps a category key to the CSS content-colour dot class (index.css)
|
||||
export const CATEGORY_DOT_CLASS: Record<string, string> = {
|
||||
electric: 'cat-electric',
|
||||
gas: 'cat-gas',
|
||||
oil: 'cat-oil',
|
||||
water: 'cat-water',
|
||||
}
|
||||
|
||||
export interface Meter {
|
||||
id: number
|
||||
category_id: number
|
||||
category_name: string
|
||||
category_key: string
|
||||
unit_label: string
|
||||
parent_meter_id: number | null
|
||||
parent_name: string | null
|
||||
name: string
|
||||
location: string | null
|
||||
serial_number: string | null
|
||||
image_path: string | null
|
||||
install_date: string | null
|
||||
active: boolean
|
||||
notes: string | null
|
||||
created_at: string
|
||||
latest_reading_value: string | null
|
||||
latest_reading_date: string | null
|
||||
}
|
||||
|
||||
export interface MeterChild {
|
||||
id: number
|
||||
name: string
|
||||
latest_reading_value: string | null
|
||||
latest_reading_date: string | null
|
||||
}
|
||||
|
||||
export interface MeterTariffHistoryRow {
|
||||
id: number
|
||||
effective_from: string
|
||||
effective_to: string | null
|
||||
tariff_id: number
|
||||
tariff_name: string
|
||||
supplier: string | null
|
||||
}
|
||||
|
||||
export interface MeterDetail extends Meter {
|
||||
children: MeterChild[]
|
||||
tariff_history: MeterTariffHistoryRow[]
|
||||
recent_readings: Reading[]
|
||||
}
|
||||
|
||||
export interface RateWindow {
|
||||
id?: number
|
||||
tariff_id?: number
|
||||
label: string
|
||||
start_time: string | null
|
||||
end_time: string | null
|
||||
days_of_week: number[] | null
|
||||
unit_rate_pence_per_unit: number
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
export interface Tariff {
|
||||
id: number
|
||||
category_id: number
|
||||
category_name: string
|
||||
name: string
|
||||
supplier: string | null
|
||||
effective_from: string
|
||||
effective_to: string | null
|
||||
standing_charge_pence_per_day: number
|
||||
ccl_rate_pence_per_unit: number | null
|
||||
ccl_exempt: boolean
|
||||
vat_rate_pct: number
|
||||
is_time_of_use: boolean
|
||||
fallback_split_pct: Record<string, number>
|
||||
window_count?: number
|
||||
windows?: RateWindow[]
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface Reading {
|
||||
id: number
|
||||
meter_id: number
|
||||
meter_name?: string
|
||||
unit_label?: string
|
||||
reading_value: string
|
||||
reading_date: string
|
||||
recorded_at: string
|
||||
source: string
|
||||
recorded_by: string | null
|
||||
photo_path: string | null
|
||||
notes: string | null
|
||||
warning?: string | null
|
||||
}
|
||||
|
||||
export interface CostBreakdown {
|
||||
usage_cost_pence: number
|
||||
standing_cost_pence: number
|
||||
ccl_cost_pence: number
|
||||
subtotal_pence: number
|
||||
vat_pence: number
|
||||
total_pence: number
|
||||
split: Record<string, { share: number; rate: number; cost_pence: number }> | null
|
||||
}
|
||||
|
||||
export interface MeterCostRow extends CostBreakdown {
|
||||
meter_id: number
|
||||
meter_name: string
|
||||
category_id: number
|
||||
category_name: string
|
||||
unit_label: string
|
||||
consumption: number | null
|
||||
has_data: boolean
|
||||
days_in_period: number
|
||||
tariff: Tariff | null
|
||||
}
|
||||
|
||||
export interface ConsumptionCostReport {
|
||||
period: { start: string; end: string; isCurrent: boolean }
|
||||
meters: MeterCostRow[]
|
||||
totals: {
|
||||
consumption: number
|
||||
usage_cost_pence: number
|
||||
standing_cost_pence: number
|
||||
ccl_cost_pence: number
|
||||
vat_pence: number
|
||||
total_pence: number
|
||||
}
|
||||
}
|
||||
|
||||
export interface RollupChild {
|
||||
meter_id: number
|
||||
meter_name: string
|
||||
consumption: number | null
|
||||
has_data: boolean
|
||||
}
|
||||
|
||||
export interface RollupRow {
|
||||
parent_meter_id: number
|
||||
parent_meter_name: string
|
||||
unit_label: string
|
||||
parent_consumption: number | null
|
||||
parent_has_data: boolean
|
||||
children: RollupChild[]
|
||||
child_sum: number | null
|
||||
anomaly: boolean
|
||||
}
|
||||
|
||||
export interface RollupReport {
|
||||
period: { start: string; end: string }
|
||||
rollups: RollupRow[]
|
||||
}
|
||||
|
||||
export interface EstimateRow extends CostBreakdown {
|
||||
meter_id: number
|
||||
meter_name: string
|
||||
category_id: number
|
||||
category_name: string
|
||||
unit_label: string
|
||||
trailing_window_days: number
|
||||
daily_rate: number | null
|
||||
actual_to_date: number | null
|
||||
remaining_days: number
|
||||
projected_consumption: number | null
|
||||
}
|
||||
|
||||
export interface EstimateReport {
|
||||
period: { year: number; month: number; start: string; end: string }
|
||||
global_default_window: number
|
||||
meters: EstimateRow[]
|
||||
totals: {
|
||||
total_pence: number
|
||||
usage_cost_pence: number
|
||||
standing_cost_pence: number
|
||||
ccl_cost_pence: number
|
||||
vat_pence: number
|
||||
}
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
estimate_trailing_days: number
|
||||
}
|
||||
|
||||
// Pence -> pounds, formatted for display
|
||||
export function formatMoney(pence: number | null | undefined): string {
|
||||
if (pence == null) return '—'
|
||||
return `£${(pence / 100).toFixed(2)}`
|
||||
}
|
||||
|
||||
export function formatUnits(value: number | null | undefined, unit: string): string {
|
||||
if (value == null) return '—'
|
||||
return `${value.toLocaleString(undefined, { maximumFractionDigits: 1 })} ${unit}`
|
||||
}
|
||||
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue