nova stranka flow a obsluha

2026-04-10 22:13:58 +02:00
parent 64221f701a
commit f714cab0ab
14 changed files with 1670 additions and 4 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6,6 +6,8 @@
    "": {
      "name": "ems-frontend",
      "dependencies": {
+        "@nivo/core": "^0.99.0",
+        "@nivo/sankey": "^0.99.0",
        "axios": "^1.7.9",
        "chart.js": "^4.4.8",
        "lucide-react": "^0.468.0",
@@ -740,6 +742,304 @@
      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
    },
+    "node_modules/@nivo/colors": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.99.0.tgz",
+      "integrity": "sha512-hyYt4lEFIfXOUmQ6k3HXm3KwhcgoJpocmoGzLUqzk7DzuhQYJo+4d5jIGGU0N/a70+9XbHIdpKNSblHAIASD3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-color": "^3.0.0",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "d3-color": "^3.1.0",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/core": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.99.0.tgz",
+      "integrity": "sha512-olCItqhPG3xHL5ei+vg52aB6o+6S+xR2idpkd9RormTTUniZb8U2rOdcQojOojPY5i9kVeQyLFBpV4YfM7OZ9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-shape": "^3.1.6",
+        "d3-color": "^3.1.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21",
+        "react-virtualized-auto-sizer": "^1.0.26",
+        "use-debounce": "^10.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nivo/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/@react-spring/web": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/core": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@nivo/core/node_modules/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/@nivo/core/node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@nivo/legends": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.99.0.tgz",
+      "integrity": "sha512-P16FjFqNceuTTZphINAh5p0RF0opu3cCKoWppe2aRD9IuVkvRm/wS5K1YwMCxDzKyKh5v0AuTlu9K6o3/hk8hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-scale": "^4.0.8",
+        "d3-scale": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/sankey": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/sankey/-/sankey-0.99.0.tgz",
+      "integrity": "sha512-u5hySywsachjo9cHdUxCR9qwD6gfRVPEAcpuIUKiA0WClDjdGbl3vkrQcQcFexJUBThqSSbwGCDWR+2INXSbTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/legends": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-sankey": "^0.11.2",
+        "@types/d3-shape": "^3.1.6",
+        "d3-sankey": "^0.12.3",
+        "d3-shape": "^3.2.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/sankey/node_modules/@react-spring/web": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/core": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@nivo/text": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/text/-/text-0.99.0.tgz",
+      "integrity": "sha512-ho3oZpAZApsJNjsIL5WJSAdg/wjzTBcwo1KiHBlRGUmD+yUWO8qp7V+mnYRhJchwygtRVALlPgZ/rlcW2Xr/MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/text/node_modules/@react-spring/web": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/core": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@nivo/theming": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/theming/-/theming-0.99.0.tgz",
+      "integrity": "sha512-KvXlf0nqBzh/g2hAIV9bzscYvpq1uuO3TnFN3RDXGI72CrbbZFTGzprPju3sy/myVsauv+Bb+V4f5TZ0jkYKRg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/tooltip": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.99.0.tgz",
+      "integrity": "sha512-weoEGR3xAetV4k2P6k96cdamGzKQ5F2Pq+uyDaHr1P3HYArM879Pl+x+TkU0aWjP6wgUZPx/GOBiV1Hb1JxIqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/tooltip/node_modules/@react-spring/web": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/core": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/animated": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
+      "integrity": "sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.3.tgz",
+      "integrity": "sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.3.tgz",
+      "integrity": "sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.3.tgz",
+      "integrity": "sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.3.tgz",
+      "integrity": "sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==",
+      "license": "MIT"
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.27",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1501,6 +1801,30 @@
      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
    },
+    "node_modules/@types/d3-sankey": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-shape": "^1"
+      }
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
    "node_modules/@types/d3-scale": {
      "version": "4.0.9",
      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
@@ -1509,6 +1833,12 @@
        "@types/d3-time": "*"
      }
    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/d3-shape": {
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -1778,6 +2108,46 @@
        "node": ">=12"
      }
    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
    "node_modules/d3-scale": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -1793,6 +2163,19 @@
        "node": ">=12"
      }
    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-shape": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -2929,6 +3312,18 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/use-debounce": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.1.1.tgz",
+      "integrity": "sha512-kvds8BHR2k28cFsxW8k3nc/tRga2rs1RHYCqmmGqb90MEeE++oALwzh2COiuBLO1/QXiOuShXoSN2ZpWnMmvuQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/victory-vendor": {
      "version": "36.9.2",
      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
@@ -3421,6 +3816,233 @@
      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
    },
+    "@nivo/colors": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.99.0.tgz",
+      "integrity": "sha512-hyYt4lEFIfXOUmQ6k3HXm3KwhcgoJpocmoGzLUqzk7DzuhQYJo+4d5jIGGU0N/a70+9XbHIdpKNSblHAIASD3w==",
+      "requires": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-color": "^3.0.0",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "d3-color": "^3.1.0",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "@nivo/core": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.99.0.tgz",
+      "integrity": "sha512-olCItqhPG3xHL5ei+vg52aB6o+6S+xR2idpkd9RormTTUniZb8U2rOdcQojOojPY5i9kVeQyLFBpV4YfM7OZ9g==",
+      "requires": {
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-shape": "^3.1.6",
+        "d3-color": "^3.1.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21",
+        "react-virtualized-auto-sizer": "^1.0.26",
+        "use-debounce": "^10.0.4"
+      },
+      "dependencies": {
+        "@react-spring/web": {
+          "version": "10.0.3",
+          "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+          "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+          "requires": {
+            "@react-spring/animated": "~10.0.3",
+            "@react-spring/core": "~10.0.3",
+            "@react-spring/shared": "~10.0.3",
+            "@react-spring/types": "~10.0.3"
+          }
+        },
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
+        },
+        "d3-format": {
+          "version": "1.4.5",
+          "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+          "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+        },
+        "d3-time": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+          "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+          "requires": {
+            "d3-array": "2"
+          }
+        },
+        "d3-time-format": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+          "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+          "requires": {
+            "d3-time": "1 - 2"
+          }
+        },
+        "internmap": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+          "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+        },
+        "react-virtualized-auto-sizer": {
+          "version": "1.0.26",
+          "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+          "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+          "requires": {}
+        }
+      }
+    },
+    "@nivo/legends": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.99.0.tgz",
+      "integrity": "sha512-P16FjFqNceuTTZphINAh5p0RF0opu3cCKoWppe2aRD9IuVkvRm/wS5K1YwMCxDzKyKh5v0AuTlu9K6o3/hk8hA==",
+      "requires": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-scale": "^4.0.8",
+        "d3-scale": "^4.0.2"
+      }
+    },
+    "@nivo/sankey": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/sankey/-/sankey-0.99.0.tgz",
+      "integrity": "sha512-u5hySywsachjo9cHdUxCR9qwD6gfRVPEAcpuIUKiA0WClDjdGbl3vkrQcQcFexJUBThqSSbwGCDWR+2INXSbTw==",
+      "requires": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/legends": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-sankey": "^0.11.2",
+        "@types/d3-shape": "^3.1.6",
+        "d3-sankey": "^0.12.3",
+        "d3-shape": "^3.2.0",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "@react-spring/web": {
+          "version": "10.0.3",
+          "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+          "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+          "requires": {
+            "@react-spring/animated": "~10.0.3",
+            "@react-spring/core": "~10.0.3",
+            "@react-spring/shared": "~10.0.3",
+            "@react-spring/types": "~10.0.3"
+          }
+        }
+      }
+    },
+    "@nivo/text": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/text/-/text-0.99.0.tgz",
+      "integrity": "sha512-ho3oZpAZApsJNjsIL5WJSAdg/wjzTBcwo1KiHBlRGUmD+yUWO8qp7V+mnYRhJchwygtRVALlPgZ/rlcW2Xr/MQ==",
+      "requires": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "dependencies": {
+        "@react-spring/web": {
+          "version": "10.0.3",
+          "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+          "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+          "requires": {
+            "@react-spring/animated": "~10.0.3",
+            "@react-spring/core": "~10.0.3",
+            "@react-spring/shared": "~10.0.3",
+            "@react-spring/types": "~10.0.3"
+          }
+        }
+      }
+    },
+    "@nivo/theming": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/theming/-/theming-0.99.0.tgz",
+      "integrity": "sha512-KvXlf0nqBzh/g2hAIV9bzscYvpq1uuO3TnFN3RDXGI72CrbbZFTGzprPju3sy/myVsauv+Bb+V4f5TZ0jkYKRg==",
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
+    "@nivo/tooltip": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.99.0.tgz",
+      "integrity": "sha512-weoEGR3xAetV4k2P6k96cdamGzKQ5F2Pq+uyDaHr1P3HYArM879Pl+x+TkU0aWjP6wgUZPx/GOBiV1Hb1JxIqg==",
+      "requires": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "dependencies": {
+        "@react-spring/web": {
+          "version": "10.0.3",
+          "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+          "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+          "requires": {
+            "@react-spring/animated": "~10.0.3",
+            "@react-spring/core": "~10.0.3",
+            "@react-spring/shared": "~10.0.3",
+            "@react-spring/types": "~10.0.3"
+          }
+        }
+      }
+    },
+    "@react-spring/animated": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
+      "integrity": "sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==",
+      "requires": {
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      }
+    },
+    "@react-spring/core": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.3.tgz",
+      "integrity": "sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==",
+      "requires": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.3.tgz",
+      "integrity": "sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg=="
+    },
+    "@react-spring/shared": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.3.tgz",
+      "integrity": "sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==",
+      "requires": {
+        "@react-spring/rafz": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      }
+    },
+    "@react-spring/types": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.3.tgz",
+      "integrity": "sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ=="
+    },
    "@rolldown/pluginutils": {
      "version": "1.0.0-beta.27",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -3865,6 +4487,29 @@
      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
    },
+    "@types/d3-sankey": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+      "requires": {
+        "@types/d3-shape": "^1"
+      },
+      "dependencies": {
+        "@types/d3-path": {
+          "version": "1.0.11",
+          "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+          "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw=="
+        },
+        "@types/d3-shape": {
+          "version": "1.3.12",
+          "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+          "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+          "requires": {
+            "@types/d3-path": "^1"
+          }
+        }
+      }
+    },
    "@types/d3-scale": {
      "version": "4.0.9",
      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
@@ -3873,6 +4518,11 @@
        "@types/d3-time": "*"
      }
    },
+    "@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
+    },
    "@types/d3-shape": {
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -4056,6 +4706,43 @@
      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
    },
+    "d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "requires": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
+        },
+        "d3-path": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+          "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "d3-shape": {
+          "version": "1.3.7",
+          "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+          "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+          "requires": {
+            "d3-path": "1"
+          }
+        },
+        "internmap": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+          "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+        }
+      }
+    },
    "d3-scale": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -4068,6 +4755,15 @@
        "d3-time-format": "2 - 4"
      }
    },
+    "d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
    "d3-shape": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -4756,6 +5452,12 @@
        "picocolors": "^1.1.1"
      }
    },
+    "use-debounce": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.1.1.tgz",
+      "integrity": "sha512-kvds8BHR2k28cFsxW8k3nc/tRga2rs1RHYCqmmGqb90MEeE++oALwzh2COiuBLO1/QXiOuShXoSN2ZpWnMmvuQ==",
+      "requires": {}
+    },
    "victory-vendor": {
      "version": "36.9.2",
      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,8 +8,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "chart.js": "^4.4.8",
+    "@nivo/core": "^0.99.0",
+    "@nivo/sankey": "^0.99.0",
    "axios": "^1.7.9",
+    "chart.js": "^4.4.8",
    "lucide-react": "^0.468.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { SiteSelectionProvider, useSiteSelection } from './context/SiteSelection
 import { useWsLogErrorCount } from './hooks/useWsLogErrorCount'
 import { Dashboard } from './pages/Dashboard'
 import Economics from './pages/Economics'
+import EnergyFlows from './pages/EnergyFlows'
 import { Logs } from './pages/Logs'
 import Planning from './pages/Planning'
 import { Settings } from './pages/Settings'
@@ -71,6 +72,9 @@ function AppLayout() {
          <NavLink to="/economics" className={tabClass}>
            Ekonomika
          </NavLink>
+          <NavLink to="/energy-flows" className={tabClass}>
+            Toky
+          </NavLink>
          <NavLink to="/settings" className={tabClass}>
            Nastavení
          </NavLink>
@@ -104,6 +108,7 @@ export default function App() {
          <Route index element={<Dashboard />} />
          <Route path="planning" element={<Planning />} />
          <Route path="economics" element={<Economics />} />
+          <Route path="energy-flows" element={<EnergyFlows />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route path="logs" element={<Logs />} />
--- a/frontend/src/components/EnergyFlowSankey.tsx
+++ b/frontend/src/components/EnergyFlowSankey.tsx
@@ -0,0 +1,101 @@
+import { ResponsiveSankey } from '@nivo/sankey'
+
+export type FlowTotals = {
+  pv_to_load_kwh: number
+  pv_to_batt_kwh: number
+  pv_to_grid_kwh: number
+  batt_to_load_kwh: number
+  batt_to_grid_kwh: number
+  grid_to_load_kwh: number
+  grid_to_batt_kwh: number
+}
+
+const NODES = [
+  { id: 'FVE' },
+  { id: 'Síť' },
+  { id: 'Baterie' },
+  { id: 'Spotřeba' },
+] as const
+
+function buildLinks(t: FlowTotals): { source: string; target: string; value: number }[] {
+  const out: { source: string; target: string; value: number }[] = []
+  const add = (source: string, target: string, v: number) => {
+    if (v > 0.0005) out.push({ source, target, value: v })
+  }
+  add('FVE', 'Spotřeba', t.pv_to_load_kwh)
+  add('FVE', 'Baterie', t.pv_to_batt_kwh)
+  add('FVE', 'Síť', t.pv_to_grid_kwh)
+  add('Baterie', 'Spotřeba', t.batt_to_load_kwh)
+  add('Baterie', 'Síť', t.batt_to_grid_kwh)
+  add('Síť', 'Spotřeba', t.grid_to_load_kwh)
+  add('Síť', 'Baterie', t.grid_to_batt_kwh)
+  return out
+}
+
+type Props = {
+  totals: FlowTotals | null
+}
+
+export function EnergyFlowSankey({ totals }: Props) {
+  if (!totals) {
+    return (
+      <div className="flex h-[440px] items-center justify-center text-sm text-slate-500">
+        Žádná data
+      </div>
+    )
+  }
+
+  const links = buildLinks(totals)
+  if (links.length === 0) {
+    return (
+      <div className="flex h-[440px] items-center justify-center text-sm text-slate-500">
+        V tomto měsíci nejsou žádné modelované toky (chybí audit / telemetrie).
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-[440px] w-full min-h-[320px]">
+      <ResponsiveSankey
+        data={{ nodes: [...NODES], links }}
+        margin={{ top: 24, right: 180, bottom: 24, left: 24 }}
+        align="justify"
+        sort="input"
+        colors={{ scheme: 'set2' }}
+        nodeOpacity={1}
+        nodeHoverOpacity={1}
+        nodeThickness={20}
+        nodeSpacing={28}
+        nodeBorderWidth={0}
+        linkOpacity={0.45}
+        linkHoverOpacity={0.75}
+        linkContract={2}
+        enableLinkGradient
+        labelPosition="outside"
+        labelOrientation="horizontal"
+        labelPadding={12}
+        labelTextColor={{ from: 'color', modifiers: [['darker', 1.2]] }}
+        theme={{
+          background: 'transparent',
+          labels: {
+            text: {
+              fill: '#e2e8f0',
+              fontSize: 12,
+              fontWeight: 500,
+            },
+          },
+          tooltip: {
+            container: {
+              background: '#1e293b',
+              color: '#f8fafc',
+              fontSize: 12,
+              borderRadius: 8,
+              border: '1px solid #334155',
+            },
+          },
+        }}
+        valueFormat={(v) => `${Number(v).toFixed(2)} kWh`}
+      />
+    </div>
+  )
+}
--- a/frontend/src/hooks/useEnergyFlows.ts
+++ b/frontend/src/hooks/useEnergyFlows.ts
@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from 'react'
+import { backendClient } from '../api/backend'
+import type {
+  DailyEnergyFlows,
+  DailyEnergyFlowsResponse,
+  IntervalEnergyFlows,
+} from '../types/energy-flows'
+
+export function useEnergyFlowsDaily(siteId: number | null, month: string) {
+  const [days, setDays] = useState<DailyEnergyFlows[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    if (siteId == null || !month) return
+    setLoading(true)
+    setError(null)
+    try {
+      const { data } = await backendClient.get<DailyEnergyFlowsResponse>(
+        `/sites/${siteId}/energy-flows/daily`,
+        { params: { month }, timeout: 30_000 },
+      )
+      setDays(data.days ?? [])
+    } catch {
+      setDays([])
+      setError('Nepodařilo se načíst toky energie')
+    } finally {
+      setLoading(false)
+    }
+  }, [siteId, month])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  return { days, loading, error, reload: load }
+}
+
+export function useEnergyFlowsIntervals(siteId: number | null, day: string | null) {
+  const [intervals, setIntervals] = useState<IntervalEnergyFlows[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const load = useCallback(async () => {
+    if (siteId == null || !day) {
+      setIntervals([])
+      return
+    }
+    setLoading(true)
+    try {
+      const { data } = await backendClient.get<IntervalEnergyFlows[]>(
+        `/sites/${siteId}/energy-flows/daily/${day}/intervals`,
+        { timeout: 30_000 },
+      )
+      setIntervals(Array.isArray(data) ? data : [])
+    } catch {
+      setIntervals([])
+    } finally {
+      setLoading(false)
+    }
+  }, [siteId, day])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  return { intervals, loading }
+}
--- a/frontend/src/pages/EnergyFlows.tsx
+++ b/frontend/src/pages/EnergyFlows.tsx
@@ -0,0 +1,321 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'
+import { Fragment, useMemo, useState } from 'react'
+
+import { EnergyFlowSankey, type FlowTotals } from '../components/EnergyFlowSankey'
+import { useEnergyFlowsDaily, useEnergyFlowsIntervals } from '../hooks/useEnergyFlows'
+import { useSiteStatus } from '../hooks/useSiteStatus'
+import { pragueCalendarDay } from '../lib/pragueDate'
+import type { DailyEnergyFlows } from '../types/energy-flows'
+
+function currentMonth(): string {
+  return pragueCalendarDay().slice(0, 7)
+}
+
+function monthLabel(ym: string): string {
+  const [y, m] = ym.split('-').map(Number)
+  const names = [
+    'Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen',
+    'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec',
+  ]
+  return `${names[m - 1]} ${y}`
+}
+
+function shiftMonth(ym: string, delta: number): string {
+  const [y, m] = ym.split('-').map(Number)
+  const d = new Date(y, m - 1 + delta, 1)
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+}
+
+function fmtDay(iso: string): string {
+  const d = new Date(iso + 'T00:00:00')
+  return d.toLocaleDateString('cs-CZ', { weekday: 'short', day: 'numeric', month: 'numeric' })
+}
+
+function fmtTime(iso: string): string {
+  const d = new Date(iso)
+  return d.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Prague' })
+}
+
+function kwh(v: number | null | undefined, d = 2): string {
+  if (v == null) return '–'
+  return v.toFixed(d)
+}
+
+function aggregateFlows(days: DailyEnergyFlows[]): FlowTotals & {
+  pv_production_kwh: number
+  grid_import_kwh: number
+  grid_export_kwh: number
+  batt_charge_kwh: number
+  batt_discharge_kwh: number
+  load_kwh: number
+} {
+  const z = {
+    pv_production_kwh: 0,
+    grid_import_kwh: 0,
+    grid_export_kwh: 0,
+    batt_charge_kwh: 0,
+    batt_discharge_kwh: 0,
+    load_kwh: 0,
+    pv_to_load_kwh: 0,
+    pv_to_batt_kwh: 0,
+    pv_to_grid_kwh: 0,
+    batt_to_load_kwh: 0,
+    batt_to_grid_kwh: 0,
+    grid_to_load_kwh: 0,
+    grid_to_batt_kwh: 0,
+  }
+  for (const d of days) {
+    z.pv_production_kwh += d.pv_production_kwh
+    z.grid_import_kwh += d.grid_import_kwh
+    z.grid_export_kwh += d.grid_export_kwh
+    z.batt_charge_kwh += d.batt_charge_kwh
+    z.batt_discharge_kwh += d.batt_discharge_kwh
+    z.load_kwh += d.load_kwh
+    z.pv_to_load_kwh += d.pv_to_load_kwh
+    z.pv_to_batt_kwh += d.pv_to_batt_kwh
+    z.pv_to_grid_kwh += d.pv_to_grid_kwh
+    z.batt_to_load_kwh += d.batt_to_load_kwh
+    z.batt_to_grid_kwh += d.batt_to_grid_kwh
+    z.grid_to_load_kwh += d.grid_to_load_kwh
+    z.grid_to_batt_kwh += d.grid_to_batt_kwh
+  }
+  return z
+}
+
+function IntervalDetail({ siteId, day }: { siteId: number; day: string }) {
+  const { intervals, loading } = useEnergyFlowsIntervals(siteId, day)
+
+  if (loading) {
+    return <div className="py-3 text-center text-xs text-slate-500">Načítání intervalů…</div>
+  }
+  if (intervals.length === 0) {
+    return <div className="py-3 text-center text-xs text-slate-500">Žádné intervaly</div>
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-xs">
+        <thead>
+          <tr className="border-b border-slate-700 text-slate-400">
+            <th className="px-2 py-1 text-left">Čas</th>
+            <th className="px-2 py-1 text-right">PV→Load</th>
+            <th className="px-2 py-1 text-right">PV→Batt</th>
+            <th className="px-2 py-1 text-right">PV→Grid</th>
+            <th className="px-2 py-1 text-right">Batt→Load</th>
+            <th className="px-2 py-1 text-right">Batt→Grid</th>
+            <th className="px-2 py-1 text-right">Grid→Load</th>
+            <th className="px-2 py-1 text-right">Grid→Batt</th>
+          </tr>
+        </thead>
+        <tbody>
+          {intervals.map((iv) => (
+            <tr key={iv.interval_start} className="border-b border-slate-800 hover:bg-slate-800/40">
+              <td className="px-2 py-1 text-slate-300">{fmtTime(iv.interval_start)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.pv_to_load_kwh)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.pv_to_batt_kwh)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.pv_to_grid_kwh)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.batt_to_load_kwh)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.batt_to_grid_kwh)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.grid_to_load_kwh)}</td>
+              <td className="px-2 py-1 text-right">{kwh(iv.grid_to_batt_kwh)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default function EnergyFlows() {
+  const { site: siteRow, ready: siteReady, error: siteError } = useSiteStatus()
+  const siteId = siteRow?.site_id ?? null
+
+  const [month, setMonth] = useState(currentMonth)
+  const [expandedDay, setExpandedDay] = useState<string | null>(null)
+
+  const { days, loading, error, reload } = useEnergyFlowsDaily(siteId, month)
+
+  const totals = useMemo(() => (days.length > 0 ? aggregateFlows(days) : null), [days])
+
+  const flowOnly: FlowTotals | null = totals
+    ? {
+        pv_to_load_kwh: totals.pv_to_load_kwh,
+        pv_to_batt_kwh: totals.pv_to_batt_kwh,
+        pv_to_grid_kwh: totals.pv_to_grid_kwh,
+        batt_to_load_kwh: totals.batt_to_load_kwh,
+        batt_to_grid_kwh: totals.batt_to_grid_kwh,
+        grid_to_load_kwh: totals.grid_to_load_kwh,
+        grid_to_batt_kwh: totals.grid_to_batt_kwh,
+      }
+    : null
+
+  const battEff =
+    totals && totals.batt_charge_kwh > 0.01
+      ? Math.min(100, (totals.batt_discharge_kwh / totals.batt_charge_kwh) * 100)
+      : null
+
+  return (
+    <main className="mx-auto max-w-7xl space-y-6 px-4 py-6 md:px-8">
+      {siteReady && siteRow && (
+        <p className="text-xs text-slate-500">
+          Lokalita: <span className="text-slate-400">{siteRow.site_code}</span> — toky jsou{' '}
+          <strong className="text-slate-400">modelované</strong> prioritní alokací z minutové telemetrie (
+          <code className="rounded bg-slate-800 px-1">fn_fill_audit_interval</code>), ne přímé měření větví.
+        </p>
+      )}
+      {siteError && (
+        <div className="rounded-lg border border-amber-900/50 bg-amber-950/30 px-3 py-2 text-sm text-amber-200">
+          {siteError}
+        </div>
+      )}
+
+      <div className="flex items-center gap-4">
+        <button
+          type="button"
+          onClick={() => setMonth((m) => shiftMonth(m, -1))}
+          className="rounded-lg p-2 text-slate-400 transition hover:bg-slate-800 hover:text-white"
+        >
+          <ChevronLeft size={20} />
+        </button>
+        <h1 className="min-w-[200px] text-center text-lg font-semibold text-white">
+          Toky energie — {monthLabel(month)}
+        </h1>
+        <button
+          type="button"
+          onClick={() => setMonth((m) => shiftMonth(m, 1))}
+          className="rounded-lg p-2 text-slate-400 transition hover:bg-slate-800 hover:text-white"
+        >
+          <ChevronRight size={20} />
+        </button>
+      </div>
+
+      {!siteReady ? (
+        <div className="py-12 text-center text-sm text-slate-500">Načítání lokality…</div>
+      ) : siteId == null ? (
+        <div className="py-12 text-center text-sm text-slate-500">Vyberte lokalitu v horní liště.</div>
+      ) : loading ? (
+        <div className="py-12 text-center text-sm text-slate-500">Načítání…</div>
+      ) : error ? (
+        <div className="rounded-lg border border-red-900/50 bg-red-950/30 px-4 py-3 text-sm text-red-300">
+          {error}
+        </div>
+      ) : (
+        <>
+          {totals && (
+            <div className="grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
+                <p className="text-xs font-medium uppercase tracking-wide text-amber-400">Perspektiva FVE</p>
+                <p className="mt-2 text-2xl font-semibold text-white">{totals.pv_production_kwh.toFixed(1)} kWh</p>
+                <ul className="mt-2 space-y-1 text-xs text-slate-400">
+                  <li>→ spotřeba: {totals.pv_to_load_kwh.toFixed(2)} kWh</li>
+                  <li>→ baterie: {totals.pv_to_batt_kwh.toFixed(2)} kWh</li>
+                  <li>→ síť (export): {totals.pv_to_grid_kwh.toFixed(2)} kWh</li>
+                </ul>
+              </div>
+              <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
+                <p className="text-xs font-medium uppercase tracking-wide text-sky-400">Perspektiva síť</p>
+                <p className="mt-2 text-sm text-slate-400">
+                  Import: <span className="font-semibold text-red-300">{totals.grid_import_kwh.toFixed(2)}</span> kWh
+                  {' · '}
+                  Export:{' '}
+                  <span className="font-semibold text-green-300">{totals.grid_export_kwh.toFixed(2)}</span> kWh
+                </p>
+                <ul className="mt-2 space-y-1 text-xs text-slate-400">
+                  <li>Import → spotřeba: {totals.grid_to_load_kwh.toFixed(2)} kWh</li>
+                  <li>Import → baterie: {totals.grid_to_batt_kwh.toFixed(2)} kWh</li>
+                </ul>
+              </div>
+              <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
+                <p className="text-xs font-medium uppercase tracking-wide text-emerald-400">Perspektiva baterie</p>
+                <p className="mt-2 text-sm text-slate-400">
+                  Nabito: <span className="text-white">{totals.batt_charge_kwh.toFixed(2)}</span> kWh · Vybito:{' '}
+                  <span className="text-white">{totals.batt_discharge_kwh.toFixed(2)}</span> kWh
+                </p>
+                <ul className="mt-2 space-y-1 text-xs text-slate-400">
+                  <li>Z FVE: {totals.pv_to_batt_kwh.toFixed(2)} kWh · Ze sítě: {totals.grid_to_batt_kwh.toFixed(2)} kWh</li>
+                  <li>Do spotřeby: {totals.batt_to_load_kwh.toFixed(2)} kWh · Do sítě: {totals.batt_to_grid_kwh.toFixed(2)} kWh</li>
+                  {battEff != null && (
+                    <li className="text-slate-500">Poměr vybití/nabití: {battEff.toFixed(0)} % (zjednodušeně)</li>
+                  )}
+                </ul>
+              </div>
+            </div>
+          )}
+
+          <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
+            <h2 className="mb-2 text-sm font-medium text-slate-300">Sankey — součet za měsíc</h2>
+            <EnergyFlowSankey totals={flowOnly} />
+          </div>
+
+          <div className="overflow-hidden rounded-xl border border-slate-800 bg-slate-900">
+            <div className="border-b border-slate-800 px-4 py-3">
+              <h2 className="text-sm font-medium text-slate-300">Denní přehled</h2>
+            </div>
+            {days.length === 0 ? (
+              <div className="px-4 py-10 text-center text-sm text-slate-500">
+                Žádná data — zkuste jiný měsíc nebo backfill auditu (
+                <code className="rounded bg-slate-800 px-1">fn_fill_audit_range</code>).
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-slate-700 text-xs text-slate-400">
+                      <th className="px-3 py-2 text-left">Den</th>
+                      <th className="px-3 py-2 text-right">PV kWh</th>
+                      <th className="px-3 py-2 text-right">Import</th>
+                      <th className="px-3 py-2 text-right">Export</th>
+                      <th className="px-3 py-2 text-right">Nabití</th>
+                      <th className="px-3 py-2 text-right">Vybití</th>
+                      <th className="px-3 py-2 text-right">Spotřeba</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {days.map((row) => (
+                      <Fragment key={row.day}>
+                        <tr
+                          className="cursor-pointer border-b border-slate-800 hover:bg-slate-800/50"
+                          onClick={() => setExpandedDay((p) => (p === row.day ? null : row.day))}
+                        >
+                          <td className="px-3 py-2 text-sm text-slate-200">
+                            <span className="mr-1 inline-block w-4">
+                              {expandedDay === row.day ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                            </span>
+                            {fmtDay(row.day)}
+                          </td>
+                          <td className="px-3 py-2 text-right text-sm">{row.pv_production_kwh.toFixed(1)}</td>
+                          <td className="px-3 py-2 text-right text-sm">{row.grid_import_kwh.toFixed(2)}</td>
+                          <td className="px-3 py-2 text-right text-sm">{row.grid_export_kwh.toFixed(2)}</td>
+                          <td className="px-3 py-2 text-right text-sm">{row.batt_charge_kwh.toFixed(2)}</td>
+                          <td className="px-3 py-2 text-right text-sm">{row.batt_discharge_kwh.toFixed(2)}</td>
+                          <td className="px-3 py-2 text-right text-sm">{row.load_kwh.toFixed(1)}</td>
+                        </tr>
+                        {expandedDay === row.day && siteId != null ? (
+                          <tr>
+                            <td colSpan={7} className="bg-slate-900/50 px-4 py-2">
+                              <IntervalDetail siteId={siteId} day={row.day} />
+                            </td>
+                          </tr>
+                        ) : null}
+                      </Fragment>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          <p className="text-center text-xs text-slate-600">
+            <button
+              type="button"
+              className="underline hover:text-slate-400"
+              onClick={() => void reload()}
+            >
+              Znovu načíst
+            </button>
+          </p>
+        </>
+      )}
+    </main>
+  )
+}
--- a/frontend/src/types/energy-flows.ts
+++ b/frontend/src/types/energy-flows.ts
@@ -0,0 +1,38 @@
+export type DailyEnergyFlows = {
+  day: string
+  interval_count: number
+  pv_production_kwh: number
+  grid_import_kwh: number
+  grid_export_kwh: number
+  batt_charge_kwh: number
+  batt_discharge_kwh: number
+  load_kwh: number
+  pv_to_load_kwh: number
+  pv_to_batt_kwh: number
+  pv_to_grid_kwh: number
+  batt_to_load_kwh: number
+  batt_to_grid_kwh: number
+  grid_to_load_kwh: number
+  grid_to_batt_kwh: number
+}
+
+export type DailyEnergyFlowsResponse = {
+  days: DailyEnergyFlows[]
+}
+
+export type IntervalEnergyFlows = {
+  interval_start: string
+  pv_production_kwh: number | null
+  grid_import_kwh: number | null
+  grid_export_kwh: number | null
+  batt_charge_kwh: number | null
+  batt_discharge_kwh: number | null
+  load_kwh: number | null
+  pv_to_load_kwh: number | null
+  pv_to_batt_kwh: number | null
+  pv_to_grid_kwh: number | null
+  batt_to_load_kwh: number | null
+  batt_to_grid_kwh: number | null
+  grid_to_load_kwh: number | null
+  grid_to_batt_kwh: number | null
+}