diff --git a/tomatic/ui/src/pages/CallinfoPage/ContractAlarms.js b/tomatic/ui/src/pages/CallinfoPage/ContractAlarms.js
new file mode 100644
index 00000000..300f12e4
--- /dev/null
+++ b/tomatic/ui/src/pages/CallinfoPage/ContractAlarms.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import Card from '@mui/material/Card'
+import Box from '@mui/material/Box'
+
+export default function ContractAlarms({ contract }) {
+ const alarms = [
+ [contract.selfconsumption, 'label-selfconsumption', 'Autoconsum.'],
+ [contract.generation, 'label-generation', 'Rep Generation.'],
+ [contract.energetica, 'label-energetica', "És d'EnergÈtica."],
+ [contract.suspended_invoicing, 'label-alert', 'Facturació suspesa.'],
+ [contract.has_debt, 'label-alert', 'Té deute: ' + contract.has_debt],
+ ].filter(([active, className, message]) => active)
+
+ if (alarms.length===0) {
+ return {'No hi ha informació extra.'}
+ }
+ return (
+
+ {alarms.map(([active, className, message]) => (
+ {message}
+ ))}
+
+ )
+}
diff --git a/tomatic/ui/src/pages/CallinfoPage/ContractInfo.js b/tomatic/ui/src/pages/CallinfoPage/ContractInfo.js
index c402b627..5ab0d9bd 100644
--- a/tomatic/ui/src/pages/CallinfoPage/ContractInfo.js
+++ b/tomatic/ui/src/pages/CallinfoPage/ContractInfo.js
@@ -2,6 +2,7 @@ import React from 'react'
import Box from '@mui/material/Box'
import CallInfo from '../../mithril/components/callinfo'
import TabbedCard from './TabbedCard'
+import ContractAlarms from './ContractAlarms'
import { useSubscriptable } from '../../services/subscriptable'
function formatContractNumber(number) {
@@ -114,9 +115,7 @@ function ContractContent() {
{contract.pending_state ? contract.pending_state : 'Esborrany'}
- {
- //TODO extraInfo(contract),
- }
+
)
}