M6-T10: frontend contract management + price/cost views + Tibber test
- EnergyPage: Mantine Tabs (Devices kept intact + Contracts/Prices/Costs). - ContractManager/ContractForm: list/activate/add-version + version history; form fields rendered dynamically from /api/energy/profiles structure. - TibberPrices + CostView: Recharts price curve, cost trend/detail/summary, recompute; window-bounded, currency/units from API, empty/error/loading states. - ConfigPage: tri-state Tibber test button (token never shown). - hooks.ts: typed energy hooks; schema.d.ts regenerated via codegen.
This commit is contained in:
@@ -0,0 +1,386 @@
|
||||
/**
|
||||
* ContractForm — create a new energy contract OR add a version to an existing one.
|
||||
*
|
||||
* Form fields are dynamically rendered from the profile structure returned by
|
||||
* GET /api/energy/profiles — never hardcoded. The profile structure provides
|
||||
* section names (energy, standing, credits), leaf keys, and their units.
|
||||
*
|
||||
* Create mode: show Name, Kind (Select from profiles), Currency, optional
|
||||
* effective_from, then dynamically rendered profile value fields.
|
||||
* Add-version mode (contractId provided): show only effective_from (required)
|
||||
* + profile value fields for the contract's kind.
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Modal,
|
||||
Stack,
|
||||
TextInput,
|
||||
NumberInput,
|
||||
Select,
|
||||
Button,
|
||||
Group,
|
||||
Alert,
|
||||
Loader,
|
||||
Center,
|
||||
Text,
|
||||
Divider,
|
||||
Title,
|
||||
} from '@mantine/core'
|
||||
import { useEnergyProfiles, useCreateContract, useAddContractVersion } from './hooks'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface ContractFormProps {
|
||||
/** When provided: add-version mode; contract must exist. */
|
||||
contractId?: number
|
||||
/** Existing contract kind (for add-version mode or edit). */
|
||||
defaultKind?: string
|
||||
onClose: () => void
|
||||
onSaved: () => void
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers for dynamic profile field rendering
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* A leaf in the profile structure is any object with a `unit` key.
|
||||
* Returns true if the value is a leaf (renderable field).
|
||||
*/
|
||||
function isLeaf(val: unknown): val is { unit: string; default?: unknown } {
|
||||
return typeof val === 'object' && val !== null && 'unit' in val
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract all leaf fields from a profile section, returning
|
||||
* [dotPath, unit, defaultValue] tuples. E.g.:
|
||||
* "energy.buy.normal" → "EUR/kWh"
|
||||
* "energy.energy_tax" → "EUR/kWh"
|
||||
*/
|
||||
interface LeafField {
|
||||
/** Dot-separated path within the section, e.g. "buy.normal" */
|
||||
fieldPath: string
|
||||
unit: string
|
||||
defaultValue?: number
|
||||
}
|
||||
|
||||
function extractLeafFields(obj: Record<string, unknown>, prefix = ''): LeafField[] {
|
||||
const fields: LeafField[] = []
|
||||
for (const [key, val] of Object.entries(obj)) {
|
||||
// Skip non-object values (e.g. dual_tariff: true)
|
||||
if (typeof val !== 'object' || val === null) continue
|
||||
const path = prefix ? `${prefix}.${key}` : key
|
||||
if (isLeaf(val)) {
|
||||
fields.push({
|
||||
fieldPath: path,
|
||||
unit: val.unit,
|
||||
defaultValue: typeof val.default === 'number' ? val.default : undefined,
|
||||
})
|
||||
} else {
|
||||
fields.push(...extractLeafFields(val as Record<string, unknown>, path))
|
||||
}
|
||||
}
|
||||
return fields
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a nested values object from flat field values.
|
||||
* E.g. { "buy.normal": 0.133, "buy.dal": 0.127 } → { buy: { normal: 0.133, dal: 0.127 } }
|
||||
*/
|
||||
function buildNestedValues(
|
||||
sectionFields: Record<string, LeafField[]>,
|
||||
fieldValues: Record<string, number | string>,
|
||||
): Record<string, unknown> {
|
||||
const result: Record<string, unknown> = {}
|
||||
|
||||
for (const [section, fields] of Object.entries(sectionFields)) {
|
||||
const sectionObj: Record<string, unknown> = {}
|
||||
for (const field of fields) {
|
||||
const raw = fieldValues[`${section}.${field.fieldPath}`]
|
||||
const numVal = typeof raw === 'number' ? raw : parseFloat(String(raw))
|
||||
// Set nested path
|
||||
const parts = field.fieldPath.split('.')
|
||||
let current = sectionObj
|
||||
for (let i = 0; i < parts.length - 1; i++) {
|
||||
if (!(parts[i] in current)) current[parts[i]] = {}
|
||||
current = current[parts[i]] as Record<string, unknown>
|
||||
}
|
||||
current[parts[parts.length - 1]] = isNaN(numVal) ? 0 : numVal
|
||||
}
|
||||
result[section] = sectionObj
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* Label formatter: converts "buy.normal" → "Buy Normal", "energy_tax" → "Energy Tax"
|
||||
*/
|
||||
function formatLabel(path: string): string {
|
||||
return path
|
||||
.replace(/\./g, ' ')
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (c) => c.toUpperCase())
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function ContractForm({ contractId, defaultKind, onClose, onSaved }: ContractFormProps) {
|
||||
const isAddVersion = contractId != null
|
||||
|
||||
// Profiles query
|
||||
const profilesQuery = useEnergyProfiles()
|
||||
|
||||
// Create mode fields
|
||||
const [name, setName] = useState('')
|
||||
const [selectedKind, setSelectedKind] = useState<string | null>(defaultKind ?? null)
|
||||
const [currency, setCurrency] = useState('EUR')
|
||||
// ISO date string "YYYY-MM-DD" for effective_from; empty = default to now
|
||||
const [effectiveFromStr, setEffectiveFromStr] = useState('')
|
||||
|
||||
// Dynamic profile field values: key = "<section>.<fieldPath>", value = number
|
||||
const [fieldValues, setFieldValues] = useState<Record<string, number | string>>({})
|
||||
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const createMutation = useCreateContract()
|
||||
const addVersionMutation = useAddContractVersion()
|
||||
|
||||
const isBusy = createMutation.isPending || addVersionMutation.isPending
|
||||
|
||||
// Resolve the effective kind (add-version mode uses defaultKind)
|
||||
const effectiveKind = isAddVersion ? (defaultKind ?? null) : selectedKind
|
||||
|
||||
// Build profile options from API response
|
||||
const profiles = profilesQuery.data?.profiles ?? []
|
||||
const profileOptions = profiles.map((p: Record<string, unknown>) => ({
|
||||
value: p.kind as string,
|
||||
label: (p.label as string | undefined) ?? (p.kind as string),
|
||||
}))
|
||||
|
||||
// Find the selected profile structure
|
||||
const selectedProfile = profiles.find((p: Record<string, unknown>) => p.kind === effectiveKind)
|
||||
|
||||
// Extract section → leaf fields mapping from the selected profile
|
||||
const sectionFields: Record<string, LeafField[]> = {}
|
||||
if (selectedProfile) {
|
||||
const profileObj = selectedProfile as Record<string, unknown>
|
||||
for (const [key, val] of Object.entries(profileObj)) {
|
||||
// Skip metadata fields
|
||||
if (key === 'kind' || key === 'label') continue
|
||||
if (typeof val === 'object' && val !== null && !isLeaf(val)) {
|
||||
sectionFields[key] = extractLeafFields(val as Record<string, unknown>)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleFieldChange(key: string, val: number | string) {
|
||||
setFieldValues((prev) => ({ ...prev, [key]: val }))
|
||||
}
|
||||
|
||||
// Initialize default values when profile changes
|
||||
function initDefaults(kind: string | null) {
|
||||
if (!kind) return
|
||||
const profile = profiles.find((p: Record<string, unknown>) => p.kind === kind)
|
||||
if (!profile) return
|
||||
const profileObj = profile as Record<string, unknown>
|
||||
const defaults: Record<string, number | string> = {}
|
||||
for (const [sectionKey, sectionVal] of Object.entries(profileObj)) {
|
||||
if (sectionKey === 'kind' || sectionKey === 'label') continue
|
||||
if (typeof sectionVal === 'object' && sectionVal !== null && !isLeaf(sectionVal)) {
|
||||
const leaves = extractLeafFields(sectionVal as Record<string, unknown>)
|
||||
for (const leaf of leaves) {
|
||||
defaults[`${sectionKey}.${leaf.fieldPath}`] = leaf.defaultValue ?? 0
|
||||
}
|
||||
}
|
||||
}
|
||||
setFieldValues(defaults)
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
|
||||
if (!isAddVersion && !name.trim()) {
|
||||
setError('Contract name is required.')
|
||||
return
|
||||
}
|
||||
if (!effectiveKind) {
|
||||
setError('Contract kind is required.')
|
||||
return
|
||||
}
|
||||
|
||||
const values = buildNestedValues(sectionFields, fieldValues)
|
||||
|
||||
try {
|
||||
// Convert local date string to ISO datetime if provided
|
||||
const effectiveFromISO = effectiveFromStr
|
||||
? new Date(effectiveFromStr).toISOString()
|
||||
: undefined
|
||||
|
||||
if (isAddVersion) {
|
||||
const body = {
|
||||
effective_from: effectiveFromISO ?? new Date().toISOString(),
|
||||
values,
|
||||
}
|
||||
await addVersionMutation.mutateAsync({ id: contractId, body })
|
||||
} else {
|
||||
const body = {
|
||||
name: name.trim(),
|
||||
kind: effectiveKind,
|
||||
currency,
|
||||
values,
|
||||
...(effectiveFromISO ? { effective_from: effectiveFromISO } : {}),
|
||||
}
|
||||
await createMutation.mutateAsync(body)
|
||||
}
|
||||
onSaved()
|
||||
onClose()
|
||||
} catch {
|
||||
setError('Failed to save. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Render
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const title = isAddVersion ? 'Add Contract Version' : 'New Energy Contract'
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
size="md"
|
||||
data-testid="contract-form-modal"
|
||||
>
|
||||
{profilesQuery.isLoading && (
|
||||
<Center py="md">
|
||||
<Loader size="sm" data-testid="contract-form-loading" />
|
||||
</Center>
|
||||
)}
|
||||
|
||||
{profilesQuery.isError && (
|
||||
<Alert color="red" mb="sm" data-testid="contract-form-profiles-error">
|
||||
Failed to load pricing profiles. Cannot continue.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{!profilesQuery.isLoading && (
|
||||
<form onSubmit={handleSubmit} data-testid="contract-form">
|
||||
<Stack gap="sm">
|
||||
{/* Create mode fields */}
|
||||
{!isAddVersion && (
|
||||
<>
|
||||
<TextInput
|
||||
label="Contract name"
|
||||
required
|
||||
value={name}
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
data-testid="contract-name"
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Pricing kind"
|
||||
required
|
||||
data={profileOptions}
|
||||
value={selectedKind}
|
||||
onChange={(val) => {
|
||||
setSelectedKind(val)
|
||||
initDefaults(val)
|
||||
}}
|
||||
data-testid="contract-kind"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Currency"
|
||||
value={currency}
|
||||
onChange={(e) => setCurrency(e.currentTarget.value)}
|
||||
data-testid="contract-currency"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Effective from — required for add-version, optional for create */}
|
||||
<TextInput
|
||||
label={isAddVersion ? 'Effective from (required)' : 'Effective from (optional, defaults to now)'}
|
||||
description="Date in YYYY-MM-DD format"
|
||||
type="date"
|
||||
required={isAddVersion}
|
||||
value={effectiveFromStr}
|
||||
onChange={(e) => setEffectiveFromStr(e.currentTarget.value)}
|
||||
data-testid="contract-effective-from"
|
||||
/>
|
||||
|
||||
{/* Dynamic profile fields */}
|
||||
{effectiveKind && Object.keys(sectionFields).length > 0 && (
|
||||
<>
|
||||
<Divider mt="xs" />
|
||||
{Object.entries(sectionFields).map(([section, fields]) => (
|
||||
<Stack key={section} gap="xs" data-testid={`contract-section-${section}`}>
|
||||
<Title order={6} tt="capitalize" c="dimmed">
|
||||
{section.replace(/_/g, ' ')}
|
||||
</Title>
|
||||
{fields.map((field) => {
|
||||
const key = `${section}.${field.fieldPath}`
|
||||
const raw = fieldValues[key]
|
||||
const numVal = typeof raw === 'number' ? raw : parseFloat(String(raw))
|
||||
return (
|
||||
<NumberInput
|
||||
key={key}
|
||||
label={formatLabel(field.fieldPath)}
|
||||
description={field.unit}
|
||||
value={isNaN(numVal) ? 0 : numVal}
|
||||
onChange={(val) => handleFieldChange(key, val)}
|
||||
decimalScale={6}
|
||||
step={0.001}
|
||||
data-testid={`contract-field-${key}`}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!effectiveKind && !isAddVersion && (
|
||||
<Text size="sm" c="dimmed" data-testid="contract-form-kind-hint">
|
||||
Select a pricing kind to see the rate fields.
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert color="red" data-testid="contract-form-error">
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button
|
||||
type="button"
|
||||
variant="default"
|
||||
onClick={onClose}
|
||||
data-testid="contract-form-cancel"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={isBusy}
|
||||
data-testid="contract-form-submit"
|
||||
>
|
||||
{isAddVersion ? 'Add Version' : 'Create Contract'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user