M8-T19: add scope-aware energy contract and cost UI

frontend/src/energy/ContractManager.test.tsx

@@ -66,6 +66,11 @@ const INACTIVE_CONTRACT = {
   updated_at: '2026-06-02T00:00:00Z',
 }
 
+const ACTIVE_THERMAL_CONTRACT = {
+  id: 3, name: 'Active Heat Contract', kind: 'district_heating', active: true, currency: 'EUR',
+  created_at: '2026-06-03T00:00:00Z', updated_at: '2026-06-03T00:00:00Z',
+}
+
 const PROFILES_RESPONSE = {
   profiles: [
     {
@@ -202,4 +207,39 @@ describe('ContractManager', () => {
       expect(screen.getByTestId('contract-form-modal')).toBeInTheDocument()
     })
   })
+
+  it('keeps the selector available while thermal data loads and requests each scope separately', async () => {
+    const user = userEvent.setup()
+    mockGet.mockImplementation((path: string, options?: { params?: { query?: { scope?: string } } }) => {
+      if (path === '/api/energy/contracts' && options?.params?.query?.scope === 'thermal') return new Promise(() => {})
+      if (path === '/api/energy/contracts') return Promise.resolve({ data: { items: [ACTIVE_CONTRACT], total: 1 } })
+      return Promise.resolve({ data: PROFILES_RESPONSE })
+    })
+    renderWithProviders(<ContractManager />)
+    await waitFor(() => expect(screen.getByTestId('contracts-scope-selector')).toBeInTheDocument())
+    await user.click(screen.getByText('Thermal'))
+    expect(screen.getByTestId('contracts-loading')).toBeInTheDocument()
+    expect(screen.getByTestId('contracts-scope-selector')).toBeInTheDocument()
+    await user.click(screen.getByText('Electricity'))
+    await waitFor(() => expect(screen.getByTestId('contracts-table')).toBeInTheDocument())
+    expect(mockGet).toHaveBeenCalledWith('/api/energy/contracts', { params: { query: { scope: 'thermal' } } })
+  })
+
+  it('keeps simultaneous active electricity and thermal contracts isolated across repeated switches', async () => {
+    const user = userEvent.setup()
+    mockGet.mockImplementation((_path: string, options?: { params?: { query?: { scope?: string } } }) =>
+      Promise.resolve({ data: { items: options?.params?.query?.scope === 'thermal'
+        ? [ACTIVE_THERMAL_CONTRACT] : [ACTIVE_CONTRACT], total: 1 } }),
+    )
+    renderWithProviders(<ContractManager />)
+    await waitFor(() => expect(screen.getByText('My Active Contract')).toBeInTheDocument())
+    for (let i = 0; i < 2; i += 1) {
+      await user.click(screen.getByText('Thermal'))
+      await waitFor(() => expect(screen.getByText('Active Heat Contract')).toBeInTheDocument())
+      expect(screen.queryByText('My Active Contract')).not.toBeInTheDocument()
+      await user.click(screen.getByText('Electricity'))
+      await waitFor(() => expect(screen.getByText('My Active Contract')).toBeInTheDocument())
+      expect(screen.queryByText('Active Heat Contract')).not.toBeInTheDocument()
+    }
+  })
 })