Spaces:

DAG-UPB
/

HeatTransPlan

Running

App Files Files Community

drzg15 commited on 6 days ago

Commit

7c893d7

1 Parent(s): b187967

with google translator

Browse files

Files changed (13) hide show

frontend/index.html +12 -0
frontend/package-lock.json +96 -3
frontend/package.json +3 -1
frontend/src/components/analysis/EnergyDemands.tsx +14 -12
frontend/src/components/analysis/StreamSelector.tsx +8 -6
frontend/src/components/layout/AppShell.tsx +28 -6
frontend/src/i18n.ts +26 -0
frontend/src/index.css +19 -0
frontend/src/locales/de.json +81 -0
frontend/src/locales/en.json +81 -0
frontend/src/main.tsx +1 -0
frontend/src/pages/HomePage.tsx +19 -23
frontend/src/pages/PotentialAnalysisPage.tsx +13 -11

frontend/index.html CHANGED Viewed

@@ -13,6 +13,18 @@
 </head>
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>

 </head>
 <body>
+  <div id="google_translate_element" style="display:none;"></div>
+  <script type="text/javascript">
+    function googleTranslateElementInit() {
+      new google.translate.TranslateElement({
+        pageLanguage: 'en',
+        includedLanguages: 'de,en',
+        autoDisplay: false
+      }, 'google_translate_element');
+    }
+  </script>
+  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>

frontend/package-lock.json CHANGED Viewed

@@ -1,19 +1,21 @@
 {
-  "name": "frontend",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
         "@types/leaflet": "^1.9.21",
         "axios": "^1.13.5",
         "leaflet": "^1.9.4",
         "plotly.js": "^3.4.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-leaflet": "^5.0.0",
         "react-plotly.js": "^2.6.0",
         "react-router-dom": "^7.13.1",
@@ -268,6 +270,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -4101,6 +4112,43 @@
         "hermes-estree": "0.25.1"
       }
     },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -5190,6 +5238,33 @@
         "react": "^19.2.4"
       }
     },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5906,7 +5981,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -6000,6 +6075,15 @@
         "punycode": "^2.1.0"
       }
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6081,6 +6165,15 @@
         }
       }
     },
     "node_modules/vt-pbf": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",

 {
+  "name": "heattransplan",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "heattransplan",
       "version": "0.0.0",
       "dependencies": {
         "@types/leaflet": "^1.9.21",
         "axios": "^1.13.5",
+        "i18next": "^26.1.0",
         "leaflet": "^1.9.4",
         "plotly.js": "^3.4.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-i18next": "^17.0.7",
         "react-leaflet": "^5.0.0",
         "react-plotly.js": "^2.6.0",
         "react-router-dom": "^7.13.1",
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.1.0.tgz",
+      "integrity": "sha512-dIU6td04DvQuIqVst5S9g0GviTmhZ0DYD4b9ociVGJmuCa5vZ2de/t+Enf4olvj87mF8Y2lwjNQBwC9QZsvzKQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.7.tgz",
+      "integrity": "sha512-rwtPXsb/zwzDafN+gytcjF5YnqGQQIRmCQ6DctBC1VSipRB8GD/MWEVrFP42vjMyuYydxWxM8CZRt+yiNuuoHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.0.10",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vt-pbf": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",

frontend/package.json CHANGED Viewed

@@ -12,10 +12,12 @@
   "dependencies": {
     "@types/leaflet": "^1.9.21",
     "axios": "^1.13.5",
     "leaflet": "^1.9.4",
     "plotly.js": "^3.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-leaflet": "^5.0.0",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^7.13.1",
@@ -35,4 +37,4 @@
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
   }
-}

   "dependencies": {
     "@types/leaflet": "^1.9.21",
     "axios": "^1.13.5",
+    "i18next": "^26.1.0",
     "leaflet": "^1.9.4",
     "plotly.js": "^3.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-i18next": "^17.0.7",
     "react-leaflet": "^5.0.0",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^7.13.1",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
   }
+}

frontend/src/components/analysis/EnergyDemands.tsx CHANGED Viewed

@@ -5,8 +5,10 @@ import { useProjectStore } from '../../store/projectStore';
 import { useAnalysisStore } from '../../store/analysisStore';
 import { getStreamInfo } from '../../utils/streamUtils';
 import ChartHelpButton from '../ui/ChartHelpButton';
 export default function EnergyDemands() {
   const processes = useProjectStore((s) => s.state.processes);
   const energyDemands = useAnalysisStore((s) => s.energyDemands);
   const updateEnergyDemand = useAnalysisStore((s) => s.updateEnergyDemand);
@@ -20,7 +22,7 @@ export default function EnergyDemands() {
     processes.forEach((proc, pi) => {
       (proc.streams ?? []).forEach((stream, si) => {
         const info = getStreamInfo(stream);
-        const name = stream.name || `Stream ${si + 1} in ${proc.name || `Subprocess ${pi + 1}`}`;
         if (info.type?.includes('Hot')) hot.push(name);
         else if (info.type?.includes('Cold')) cold.push(name);
       });
@@ -83,8 +85,8 @@ export default function EnergyDemands() {
         style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
       >
         <span style={{ display: 'flex', alignItems: 'center' }}>
-          Current energy supply
-          <ChartHelpButton inline title="Current Energy Supply" description="Define the baseline energy consumption (heating and cooling) for the selected streams. This represents the 'status quo' before heat integration." />
         </span>
       </h4>
@@ -92,9 +94,9 @@ export default function EnergyDemands() {
           {energyDemands.map((demand, i) => (
             <div key={i} className="pa-demand-card">
               <div className="pa-demand-header">
-                <strong>Supply {i + 1}</strong>
                 {i > 0 && (
-                  <button className="pa-btn-icon" onClick={() => removeEnergyDemand(i)} title="Remove supply">
                     🗑️
                   </button>
                 )}
@@ -102,7 +104,7 @@ export default function EnergyDemands() {
               {/* Heat supply */}
               <label className="pa-input-label">
-                Heat (kW)
                 <input
                   type="number"
                   min={0}
@@ -115,7 +117,7 @@ export default function EnergyDemands() {
                 />
               </label>
               <details className="pa-details" open>
-                <summary>Hot streams selection</summary>
                 <div className="pa-multi-select">
                   {hotNames.map((name) => (
                     <label key={name} className="pa-multi-option" title={name}>
@@ -127,13 +129,13 @@ export default function EnergyDemands() {
                       {name}
                     </label>
                   ))}
-                  {hotNames.length === 0 && <span className="pa-muted">No hot streams</span>}
                 </div>
               </details>
               {/* Cooling supply */}
               <label className="pa-input-label">
-                Cooling (kW)
                 <input
                   type="number"
                   min={0}
@@ -146,7 +148,7 @@ export default function EnergyDemands() {
                 />
               </label>
               <details className="pa-details" open>
-                <summary>Cold streams selection</summary>
                 <div className="pa-multi-select">
                   {coldNames.map((name) => (
                     <label key={name} className="pa-multi-option" title={name}>
@@ -158,7 +160,7 @@ export default function EnergyDemands() {
                       {name}
                     </label>
                   ))}
-                  {coldNames.length === 0 && <span className="pa-muted">No cold streams</span>}
                 </div>
               </details>
@@ -167,7 +169,7 @@ export default function EnergyDemands() {
           ))}
           <button className="pa-btn" onClick={handleAddSupply}>
-            ➕ Add Supply
           </button>
       </>
     </div>

 import { useAnalysisStore } from '../../store/analysisStore';
 import { getStreamInfo } from '../../utils/streamUtils';
 import ChartHelpButton from '../ui/ChartHelpButton';
+import { useTranslation } from 'react-i18next';
 export default function EnergyDemands() {
+  const { t } = useTranslation();
   const processes = useProjectStore((s) => s.state.processes);
   const energyDemands = useAnalysisStore((s) => s.energyDemands);
   const updateEnergyDemand = useAnalysisStore((s) => s.updateEnergyDemand);
     processes.forEach((proc, pi) => {
       (proc.streams ?? []).forEach((stream, si) => {
         const info = getStreamInfo(stream);
+        const name = stream.name || `${t('stream_selector.stream')} ${si + 1} in ${proc.name || `${t('stream_selector.subprocess')} ${pi + 1}`}`;
         if (info.type?.includes('Hot')) hot.push(name);
         else if (info.type?.includes('Cold')) cold.push(name);
       });
         style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
       >
         <span style={{ display: 'flex', alignItems: 'center' }}>
+          {t('energy_demands.title')}
+          <ChartHelpButton inline title={t('energy_demands.title')} description={t('energy_demands.help_desc')} />
         </span>
       </h4>
           {energyDemands.map((demand, i) => (
             <div key={i} className="pa-demand-card">
               <div className="pa-demand-header">
+                <strong>{t('energy_demands.supply')} {i + 1}</strong>
                 {i > 0 && (
+                  <button className="pa-btn-icon" onClick={() => removeEnergyDemand(i)} title={t('energy_demands.remove')}>
                     🗑️
                   </button>
                 )}
               {/* Heat supply */}
               <label className="pa-input-label">
+                {t('energy_demands.heat_kw')}
                 <input
                   type="number"
                   min={0}
                 />
               </label>
               <details className="pa-details" open>
+                <summary>{t('energy_demands.hot_selection')}</summary>
                 <div className="pa-multi-select">
                   {hotNames.map((name) => (
                     <label key={name} className="pa-multi-option" title={name}>
                       {name}
                     </label>
                   ))}
+                  {hotNames.length === 0 && <span className="pa-muted">{t('energy_demands.no_hot')}</span>}
                 </div>
               </details>
               {/* Cooling supply */}
               <label className="pa-input-label">
+                {t('energy_demands.cooling_kw')}
                 <input
                   type="number"
                   min={0}
                 />
               </label>
               <details className="pa-details" open>
+                <summary>{t('energy_demands.cold_selection')}</summary>
                 <div className="pa-multi-select">
                   {coldNames.map((name) => (
                     <label key={name} className="pa-multi-option" title={name}>
                       {name}
                     </label>
                   ))}
+                  {coldNames.length === 0 && <span className="pa-muted">{t('energy_demands.no_cold')}</span>}
                 </div>
               </details>
           ))}
           <button className="pa-btn" onClick={handleAddSupply}>
+            ➕ {t('energy_demands.add_supply')}
           </button>
       </>
     </div>

frontend/src/components/analysis/StreamSelector.tsx CHANGED Viewed

@@ -6,8 +6,10 @@ import { useAnalysisStore } from '../../store/analysisStore';
 import { getStreamInfo } from '../../utils/streamUtils';
 import type { Stream } from '../../types/stream';
 import ChartHelpButton from '../ui/ChartHelpButton';
 export default function StreamSelector() {
   const processes = useProjectStore((s) => s.state.processes);
   const selectedStreams = useAnalysisStore((s) => s.selectedStreams);
   const setSelectedStream = useAnalysisStore((s) => s.setSelectedStream);
@@ -41,7 +43,7 @@ export default function StreamSelector() {
   );
   if (!processes.length) {
-    return <div className="pa-info-box">No processes found. Please add processes in the Data Collection page first.</div>;
   }
   return (
@@ -51,8 +53,8 @@ export default function StreamSelector() {
         style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
       >
         <span style={{ display: 'flex', alignItems: 'center' }}>
-          Streams Selection
-          <ChartHelpButton inline title="Stream Selection" description="Select which streams (heat sources or sinks) to include in the pinch analysis. Deselect streams that are currently inactive or should be excluded." />
         </span>
       </h4>
@@ -60,7 +62,7 @@ export default function StreamSelector() {
           {processes.map((proc, pi) => {
             const streams = proc.streams ?? [];
             if (streams.length === 0) return null;
-            const procName = proc.name || `Subprocess ${pi + 1}`;
             return (
               <div key={pi} className="pa-stream-group">
                 <div className="pa-stream-group-title">{procName}</div>
@@ -68,7 +70,7 @@ export default function StreamSelector() {
                   const key = `stream_${pi}_${si}`;
                   const checked = selectedStreams[key] ?? true;
                   const info = getStreamInfo(stream);
-                  const streamName = stream.name || `Stream ${si + 1}`;
                   const parts: string[] = [];
                   if (info.tin !== null) parts.push(`Tin:${info.tin}°C`);
@@ -86,7 +88,7 @@ export default function StreamSelector() {
                       />
                       <span className="pa-stream-name">{streamName}</span>
                       <span className="pa-stream-info">
-                        {parts.length > 0 ? parts.join(' | ') : '(incomplete data)'}
                       </span>
                     </label>
                   );

 import { getStreamInfo } from '../../utils/streamUtils';
 import type { Stream } from '../../types/stream';
 import ChartHelpButton from '../ui/ChartHelpButton';
+import { useTranslation } from 'react-i18next';
 export default function StreamSelector() {
+  const { t } = useTranslation();
   const processes = useProjectStore((s) => s.state.processes);
   const selectedStreams = useAnalysisStore((s) => s.selectedStreams);
   const setSelectedStream = useAnalysisStore((s) => s.setSelectedStream);
   );
   if (!processes.length) {
+    return <div className="pa-info-box">{t('analysis.messages.no_processes')}</div>;
   }
   return (
         style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
       >
         <span style={{ display: 'flex', alignItems: 'center' }}>
+          {t('stream_selector.title')}
+          <ChartHelpButton inline title={t('stream_selector.title')} description={t('stream_selector.help_desc')} />
         </span>
       </h4>
           {processes.map((proc, pi) => {
             const streams = proc.streams ?? [];
             if (streams.length === 0) return null;
+            const procName = proc.name || `${t('stream_selector.subprocess')} ${pi + 1}`;
             return (
               <div key={pi} className="pa-stream-group">
                 <div className="pa-stream-group-title">{procName}</div>
                   const key = `stream_${pi}_${si}`;
                   const checked = selectedStreams[key] ?? true;
                   const info = getStreamInfo(stream);
+                  const streamName = stream.name || `${t('stream_selector.stream')} ${si + 1}`;
                   const parts: string[] = [];
                   if (info.tin !== null) parts.push(`Tin:${info.tin}°C`);
                       />
                       <span className="pa-stream-name">{streamName}</span>
                       <span className="pa-stream-info">
+                        {parts.length > 0 ? parts.join(' | ') : t('stream_selector.incomplete')}
                       </span>
                     </label>
                   );

frontend/src/components/layout/AppShell.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { type ReactNode, useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 import { useUIStore } from '../../store/uiStore';
 import './AppShell.css';
@@ -8,15 +9,33 @@ interface Props {
 }
 const NAV_ITEMS = [
-  { path: '/', label: 'Home', icon: '💡' },
-  { path: '/data-collection', label: 'Energy Data Collection', icon: '📊' },
-  { path: '/potential-analysis', label: 'Potential Analysis', icon: '📈' },
 ] as const;
 export default function AppShell({ children }: Props) {
   const theme = useUIStore((s) => s.theme);
   const toggleTheme = useUIStore((s) => s.toggleTheme);
   // Sync dark mode class to HTML element
   useEffect(() => {
     console.log('[HeatTransPlan] Current Theme:', theme);
@@ -45,16 +64,19 @@ export default function AppShell({ children }: Props) {
                 `nav-item ${isActive ? 'active' : ''}`
               }
               end={item.path === '/'}
-              title={item.label}
             >
               <span className="nav-icon">{item.icon}</span>
-              <span className="nav-label">{item.label}</span>
             </NavLink>
           ))}
         </nav>
         <div className="nav-actions">
-          <button className="theme-toggle" onClick={toggleTheme} title="Toggle dark mode">
             {theme === 'dark' ? '☀️' : '🌙'}
           </button>
         </div>

 import { type ReactNode, useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useUIStore } from '../../store/uiStore';
 import './AppShell.css';
 }
 const NAV_ITEMS = [
+  { path: '/', translationKey: 'appshell.nav.home', icon: '💡' },
+  { path: '/data-collection', translationKey: 'appshell.nav.data_collection', icon: '📊' },
+  { path: '/potential-analysis', translationKey: 'appshell.nav.potential_analysis', icon: '📈' },
 ] as const;
 export default function AppShell({ children }: Props) {
+  const { t, i18n } = useTranslation();
   const theme = useUIStore((s) => s.theme);
   const toggleTheme = useUIStore((s) => s.toggleTheme);
+  const toggleLanguage = () => {
+    const nextLang = i18n.language === 'en' ? 'de' : 'en';
+    i18n.changeLanguage(nextLang);
+    localStorage.setItem('i18nextLng', nextLang);
+    // Trigger Google Translate widget
+    try {
+      const selectField = document.querySelector('.goog-te-combo') as HTMLSelectElement;
+      if (selectField) {
+        selectField.value = nextLang;
+        selectField.dispatchEvent(new Event('change'));
+      }
+    } catch (e) {
+      console.error('Google Translate trigger failed:', e);
+    }
+  };
   // Sync dark mode class to HTML element
   useEffect(() => {
     console.log('[HeatTransPlan] Current Theme:', theme);
                 `nav-item ${isActive ? 'active' : ''}`
               }
               end={item.path === '/'}
+              title={t(item.translationKey)}
             >
               <span className="nav-icon">{item.icon}</span>
+              <span className="nav-label">{t(item.translationKey)}</span>
             </NavLink>
           ))}
         </nav>
         <div className="nav-actions">
+          <button className="theme-toggle" onClick={toggleLanguage} title={i18n.language === 'en' ? 'Switch to German' : 'Switch to English'}>
+            {i18n.language === 'en' ? '🇩🇪' : '🇬🇧'}
+          </button>
+          <button className="theme-toggle" onClick={toggleTheme} title={theme === 'dark' ? t('appshell.theme.light') : t('appshell.theme.dark')}>
             {theme === 'dark' ? '☀️' : '🌙'}
           </button>
         </div>

frontend/src/i18n.ts ADDED Viewed

	@@ -0,0 +1,26 @@

+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en.json';
+import de from './locales/de.json';
+const resources = {
+  en: { translation: en },
+  de: { translation: de }
+};
+// Check if user previously saved a language choice
+const savedLang = localStorage.getItem('i18nextLng') || 'en';
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: savedLang,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  });
+export default i18n;

frontend/src/index.css CHANGED Viewed

@@ -131,6 +131,25 @@ button {
 }
 /* ── Buttons ──────────────────────────────────────────── */
 .btn {
   display: inline-flex;
   align-items: center;

 }
 /* ── Buttons ──────────────────────────────────────────── */
+.body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  top: 0 !important; /* Prevent Google Translate from pushing body down */
+}
+/* Hide Google Translate UI elements */
+.skiptranslate iframe {
+  display: none !important;
+}
+body {
+  top: 0 !important;
+}
+.goog-te-combo {
+  display: none !important;
+}
 .btn {
   display: inline-flex;
   align-items: center;

frontend/src/locales/de.json ADDED Viewed

	@@ -0,0 +1,81 @@

+{
+  "appshell": {
+    "title": "HeatTransPlan",
+    "nav": {
+      "home": "Startseite",
+      "data_collection": "Datenerfassung",
+      "potential_analysis": "Potenzialanalyse"
+    },
+    "theme": {
+      "light": "Hellmodus",
+      "dark": "Dunkelmodus"
+    },
+    "lang": {
+      "en": "English",
+      "de": "Deutsch"
+    }
+  },
+  "home": {
+    "title": "Startseite",
+    "information": "Informationen",
+    "project_website": "Projekt-Website",
+    "app": "App",
+    "about_link": "Über HeatTransPlan",
+    "about_title": "Über diese App",
+    "about_text": "HeatTransPlan hilft bei der Erfassung von Energiedaten industrieller Prozesse und der Analyse des Wärmerückgewinnungspotenzials sowie der Integrationsmöglichkeiten von Wärmepumpen mittels Pinch-Analyse.",
+    "how_to_use": "So verwenden Sie die App",
+    "instruction_1": "Öffnen Sie <strong>Datenerfassung</strong>, um die Anlage zu lokalisieren, den Prozess zu beschreiben und Energiedaten hinzuzufügen.",
+    "instruction_2": "Fügen Sie Strominformationen hinzu und verfeinern Sie diese. Überprüfen Sie dann die Prozessdaten direkt in den Tabellen- und Kartenansichten.",
+    "instruction_3": "Exportieren Sie aufgezeichnete Daten und Analyseergebnisse.",
+    "examples": "Beispiele",
+    "load_example_1": "Beispiel 1 laden: Wärmeintegrationsbeispiel",
+    "loading": "Wird geladen...",
+    "example_success": "Beispiel geladen! Weiterleitung zur Datenerfassung...",
+    "example_error": "Fehler beim Laden des Beispiels"
+  },
+  "analysis": {
+    "title": "Potenzialanalyse",
+    "buttons": {
+      "save": "Speichern",
+      "load": "Laden",
+      "report": "Bericht",
+      "generating": "Wird erstellt..."
+    },
+    "messages": {
+      "no_processes": "Keine Prozesse gefunden. Bitte fügen Sie zuerst Prozesse auf der Seite Datenerfassung hinzu.",
+      "need_more_streams": "Wählen Sie mindestens 2 Ströme mit vollständigen Daten (Tin, Tout und entweder CP oder ṁ+cp) aus, um die Pinch-Analyse durchzuführen.",
+      "running": "Pinch-Analyse wird ausgeführt…",
+      "error": "Fehler:"
+    },
+    "controls": {
+      "show_shifted": "Verschobene Composite Curves anzeigen"
+    },
+    "sections": {
+      "notes": "Notizen"
+    },
+    "placeholders": {
+      "scenario_name": "Szenario",
+      "notes": "Hier tippen..."
+    }
+  },
+  "stream_selector": {
+    "title": "Stromauswahl",
+    "help_desc": "Wählen Sie aus, welche Ströme (Wärmequellen oder -senken) in die Pinch-Analyse einbezogen werden sollen. Deaktivieren Sie Ströme, die derzeit inaktiv sind oder ausgeschlossen werden sollen.",
+    "subprocess": "Teilprozess",
+    "stream": "Strom",
+    "incomplete": "(unvollständige Daten)"
+  },
+  "energy_demands": {
+    "title": "Aktuelle Energieversorgung",
+    "help_desc": "Definieren Sie den Basisenergieverbrauch (Heizen und Kühlen) für die ausgewählten Ströme. Dies stellt den 'Status quo' vor der Wärmeintegration dar.",
+    "supply": "Versorgung",
+    "remove": "Versorgung entfernen",
+    "heat_kw": "Heizung (kW)",
+    "hot_selection": "Auswahl heißer Ströme",
+    "no_hot": "Keine heißen Ströme",
+    "cooling_kw": "Kühlung (kW)",
+    "cold_selection": "Auswahl kalter Ströme",
+    "no_cold": "Keine kalten Ströme",
+    "add_supply": "Versorgung hinzufügen"
+  }
+}

frontend/src/locales/en.json ADDED Viewed

	@@ -0,0 +1,81 @@

+{
+  "appshell": {
+    "title": "HeatTransPlan",
+    "nav": {
+      "home": "Home",
+      "data_collection": "Data Collection",
+      "potential_analysis": "Potential Analysis"
+    },
+    "theme": {
+      "light": "Light Mode",
+      "dark": "Dark Mode"
+    },
+    "lang": {
+      "en": "English",
+      "de": "Deutsch"
+    }
+  },
+  "home": {
+    "title": "Home Page",
+    "information": "Information",
+    "project_website": "Project website",
+    "app": "App",
+    "about_link": "About HeatTransPlan",
+    "about_title": "About this app",
+    "about_text": "HeatTransPlan helps collect industrial process energy data and analyze heat recovery potential and heat pump integration opportunities using pinch analysis.",
+    "how_to_use": "How to use",
+    "instruction_1": "Open <strong>Energy Data Collection</strong> to locate the facility, describe the process and add energy data.",
+    "instruction_2": "Add and refine stream information, then review process data directly in the table and map views.",
+    "instruction_3": "Export recorded data and analysis results.",
+    "examples": "Examples",
+    "load_example_1": "Load Example 1: Heat integration example",
+    "loading": "Loading...",
+    "example_success": "Example loaded! Redirecting to Data Collection...",
+    "example_error": "Failed to load example"
+  },
+  "analysis": {
+    "title": "Potential Analysis",
+    "buttons": {
+      "save": "Save",
+      "load": "Load",
+      "report": "Report",
+      "generating": "Generating..."
+    },
+    "messages": {
+      "no_processes": "No processes found. Please add processes in the Data Collection page first.",
+      "need_more_streams": "Select at least 2 streams with complete data (Tin, Tout, and either CP or ṁ+cp) to run pinch analysis.",
+      "running": "Running pinch analysis…",
+      "error": "Error:"
+    },
+    "controls": {
+      "show_shifted": "Show Shifted Composite Curves"
+    },
+    "sections": {
+      "notes": "Notes"
+    },
+    "placeholders": {
+      "scenario_name": "Scenario",
+      "notes": "Type here..."
+    }
+  },
+  "stream_selector": {
+    "title": "Streams Selection",
+    "help_desc": "Select which streams (heat sources or sinks) to include in the pinch analysis. Deselect streams that are currently inactive or should be excluded.",
+    "subprocess": "Subprocess",
+    "stream": "Stream",
+    "incomplete": "(incomplete data)"
+  },
+  "energy_demands": {
+    "title": "Current energy supply",
+    "help_desc": "Define the baseline energy consumption (heating and cooling) for the selected streams. This represents the 'status quo' before heat integration.",
+    "supply": "Supply",
+    "remove": "Remove supply",
+    "heat_kw": "Heat (kW)",
+    "hot_selection": "Hot streams selection",
+    "no_hot": "No hot streams",
+    "cooling_kw": "Cooling (kW)",
+    "cold_selection": "Cold streams selection",
+    "no_cold": "No cold streams",
+    "add_supply": "Add Supply"
+  }
+}

frontend/src/main.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import './index.css'
 import App from './App'

 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
+import './i18n'
 import './index.css'
 import App from './App'

frontend/src/pages/HomePage.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useProjectStore } from '../store/projectStore';
 import { getExample } from '../api/io';
 import styles from './HomePage.module.css';
 const PROJECT_IMG_URL =
@@ -13,6 +14,7 @@ function qrImgUrl(url: string, size = 110) {
 }
 export default function HomePage() {
   const navigate = useNavigate();
   const setState = useProjectStore((s) => s.setState);
   const [loadingExample, setLoadingExample] = useState(false);
@@ -26,10 +28,10 @@ export default function HomePage() {
       const data = await getExample(filename);
       // data is the full project state JSON
       setState(data);
-      setSuccessMsg('Example loaded! Redirecting to Data Collection...');
       setTimeout(() => navigate('/data-collection'), 800);
     } catch (e: any) {
-      setError(e.message || 'Failed to load example');
     } finally {
       setLoadingExample(false);
     }
@@ -40,9 +42,9 @@ export default function HomePage() {
       <div className={styles['home-grid']}>
         {/* Left column */}
         <div className={styles['home-left']}>
-          <h1>Home Page</h1>
-          <h2>Information</h2>
           <div className={styles['home-info-row']}>
             <a
@@ -71,7 +73,7 @@ export default function HomePage() {
                     width={110}
                   />
                 </a>
-                <span className={styles['qr-label']}>Project website</span>
               </div>
               <div className={styles['qr-item']}>
                 <a
@@ -87,34 +89,28 @@ export default function HomePage() {
                     width={110}
                   />
                 </a>
-                <span className={styles['qr-label']}>App</span>
               </div>
             </div>
           </div>
-          <p className={styles['home-about-link']}>About HeatTransPlan</p>
-          <h2>About this app</h2>
-          <p>
-            HeatTransPlan helps collect industrial process energy data and
-            analyze heat recovery potential and heat pump integration
-            opportunities using pinch analysis.
-          </p>
-          <h3>How to use</h3>
           <ul className={styles['home-instructions']}>
             <li>
-              Open <strong>Energy Data Collection</strong> to locate the
-              facility, describe the process and add energy data.
             </li>
-            <li>
-              Add and refine stream information, then review process data
-              directly in the table and map views.
-            </li>
-            <li>Export recorded data and analysis results.</li>
           </ul>
-          <h3>Examples</h3>
           {error && <div className={styles['home-error']}>{error}</div>}
           {successMsg && <div className={styles['home-success']}>{successMsg}</div>}
@@ -126,7 +122,7 @@ export default function HomePage() {
             {loadingExample ? (
               <span className="spinner" />
             ) : (
-              'Load Example 1: Heat integration example'
             )}
           </button>
         </div>

 import { useNavigate } from 'react-router-dom';
 import { useProjectStore } from '../store/projectStore';
 import { getExample } from '../api/io';
+import { useTranslation, Trans } from 'react-i18next';
 import styles from './HomePage.module.css';
 const PROJECT_IMG_URL =
 }
 export default function HomePage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const setState = useProjectStore((s) => s.setState);
   const [loadingExample, setLoadingExample] = useState(false);
       const data = await getExample(filename);
       // data is the full project state JSON
       setState(data);
+      setSuccessMsg(t('home.example_success'));
       setTimeout(() => navigate('/data-collection'), 800);
     } catch (e: any) {
+      setError(e.message || t('home.example_error'));
     } finally {
       setLoadingExample(false);
     }
       <div className={styles['home-grid']}>
         {/* Left column */}
         <div className={styles['home-left']}>
+          <h1>{t('home.title')}</h1>
+          <h2>{t('home.information')}</h2>
           <div className={styles['home-info-row']}>
             <a
                     width={110}
                   />
                 </a>
+                <span className={styles['qr-label']}>{t('home.project_website')}</span>
               </div>
               <div className={styles['qr-item']}>
                 <a
                     width={110}
                   />
                 </a>
+                <span className={styles['qr-label']}>{t('home.app')}</span>
               </div>
             </div>
           </div>
+          <p className={styles['home-about-link']}>{t('home.about_link')}</p>
+          <h2>{t('home.about_title')}</h2>
+          <p>{t('home.about_text')}</p>
+          <h3>{t('home.how_to_use')}</h3>
           <ul className={styles['home-instructions']}>
             <li>
+              <Trans i18nKey="home.instruction_1">
+                Open <strong>Energy Data Collection</strong> to locate the facility, describe the process and add energy data.
+              </Trans>
             </li>
+            <li>{t('home.instruction_2')}</li>
+            <li>{t('home.instruction_3')}</li>
           </ul>
+          <h3>{t('home.examples')}</h3>
           {error && <div className={styles['home-error']}>{error}</div>}
           {successMsg && <div className={styles['home-success']}>{successMsg}</div>}
             {loadingExample ? (
               <span className="spinner" />
             ) : (
+              t('home.load_example_1')
             )}
           </button>
         </div>

frontend/src/pages/PotentialAnalysisPage.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ import HPIChart from '../components/analysis/HPIChart';
 import StatusQuoComparison from '../components/analysis/StatusQuoComparison';
 import TemperatureIntervalDiagram from '../components/analysis/TemperatureIntervalDiagram';
 import ScenarioComparison from '../components/analysis/ScenarioComparison';
 import './PotentialAnalysisPage.css';
@@ -33,6 +34,7 @@ import AnalysisHelp from '../components/ui/AnalysisHelp';
 import ChartHelpButton from '../components/ui/ChartHelpButton';
 export default function PotentialAnalysisPage() {
   const processes = useProjectStore((s) => s.state.processes);
   const pinchNotes = useProjectStore((s) => s.state.pinch_notes);
   const setPinchNotes = useProjectStore((s) => s.setPinchNotes);
@@ -413,7 +415,7 @@ export default function PotentialAnalysisPage() {
         border: '1px solid var(--border)',
         boxShadow: 'var(--shadow-sm)'
       }}>
-        <h1 className="pa-title" style={{ fontSize: '1.25rem', whiteSpace: 'nowrap' }}>Potential Analysis</h1>
         {/* Scenarios - Inline */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, overflow: 'hidden' }}>
@@ -474,7 +476,7 @@ export default function PotentialAnalysisPage() {
           <div style={{ display: 'flex', gap: 4, alignItems: 'center', background: 'var(--bg)', padding: '4px', borderRadius: '8px', marginLeft: 8 }}>
             <input
               type="text"
-              placeholder={defaultScenarioName}
               value={scenarioName}
               onChange={(e) => setScenarioName(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && handleSaveScenario()}
@@ -484,17 +486,17 @@ export default function PotentialAnalysisPage() {
               onClick={handleSaveScenario}
               style={{ background: 'var(--success)', color: 'var(--text-on-primary)', padding: '4px 10px', borderRadius: '6px', fontSize: '0.75rem', fontWeight: 600, border: 'none', cursor: 'pointer' }}
             >
-              Save
             </button>
           </div>
         </div>
         <div className="pa-header-actions" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <button className="btn btn-sm" onClick={handleSaveProject} title="Save project to JSON">
-            💾 Save
           </button>
           <label className="btn btn-sm" style={{ cursor: 'pointer' }} title="Load project from JSON">
-            📂 Load
             <input
               ref={fileRef}
               type="file"
@@ -510,7 +512,7 @@ export default function PotentialAnalysisPage() {
             onClick={handleGenerateReport}
             style={{ padding: '6px 14px', fontSize: '0.8rem' }}
           >
-            {reportLoading ? '⏳ Generating…' : '📄 Report'}
           </button>
           <div style={{ width: 1, height: 20, background: 'var(--border)', margin: '0 4px' }} />
           <button
@@ -567,11 +569,11 @@ export default function PotentialAnalysisPage() {
       {processes.length === 0 ? (
         <div className="pa-info-box">
-          No processes found. Please add processes in the Data Collection page first.
         </div>
       ) : streamsData.length < 2 ? (
         <div className="pa-info-box">
-          Select at least 2 streams with complete data (Tin, Tout, and either CP or ṁ+cp) to run pinch analysis.
           {selectedCount > 0 && (
             <div className="pa-data-status">
               <strong>Data status for selected items:</strong>
@@ -611,8 +613,8 @@ export default function PotentialAnalysisPage() {
         </div>
       ) : (
         <>
-          {pinchLoading && <div className="pa-loading">Running pinch analysis…</div>}
-          {pinchError && <div className="pa-error">Error: {pinchError}</div>}
           {pinchResult && (
             <>
@@ -629,7 +631,7 @@ export default function PotentialAnalysisPage() {
                     checked={showShifted}
                     onChange={(e) => setShowShifted(e.target.checked)}
                   />
-                  Show Shifted Composite Curves
                 </label>
                 <label className="pa-input-label pa-tmin-label">

 import StatusQuoComparison from '../components/analysis/StatusQuoComparison';
 import TemperatureIntervalDiagram from '../components/analysis/TemperatureIntervalDiagram';
 import ScenarioComparison from '../components/analysis/ScenarioComparison';
+import { useTranslation } from 'react-i18next';
 import './PotentialAnalysisPage.css';
 import ChartHelpButton from '../components/ui/ChartHelpButton';
 export default function PotentialAnalysisPage() {
+  const { t } = useTranslation();
   const processes = useProjectStore((s) => s.state.processes);
   const pinchNotes = useProjectStore((s) => s.state.pinch_notes);
   const setPinchNotes = useProjectStore((s) => s.setPinchNotes);
         border: '1px solid var(--border)',
         boxShadow: 'var(--shadow-sm)'
       }}>
+        <h1 className="pa-title" style={{ fontSize: '1.25rem', whiteSpace: 'nowrap' }}>{t('analysis.title')}</h1>
         {/* Scenarios - Inline */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, overflow: 'hidden' }}>
           <div style={{ display: 'flex', gap: 4, alignItems: 'center', background: 'var(--bg)', padding: '4px', borderRadius: '8px', marginLeft: 8 }}>
             <input
               type="text"
+              placeholder={t('analysis.placeholders.scenario_name')}
               value={scenarioName}
               onChange={(e) => setScenarioName(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && handleSaveScenario()}
               onClick={handleSaveScenario}
               style={{ background: 'var(--success)', color: 'var(--text-on-primary)', padding: '4px 10px', borderRadius: '6px', fontSize: '0.75rem', fontWeight: 600, border: 'none', cursor: 'pointer' }}
             >
+              {t('analysis.buttons.save')}
             </button>
           </div>
         </div>
         <div className="pa-header-actions" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <button className="btn btn-sm" onClick={handleSaveProject} title="Save project to JSON">
+            💾 {t('analysis.buttons.save')}
           </button>
           <label className="btn btn-sm" style={{ cursor: 'pointer' }} title="Load project from JSON">
+            📂 {t('analysis.buttons.load')}
             <input
               ref={fileRef}
               type="file"
             onClick={handleGenerateReport}
             style={{ padding: '6px 14px', fontSize: '0.8rem' }}
           >
+            {reportLoading ? `⏳ ${t('analysis.buttons.generating')}` : `📄 ${t('analysis.buttons.report')}`}
           </button>
           <div style={{ width: 1, height: 20, background: 'var(--border)', margin: '0 4px' }} />
           <button
       {processes.length === 0 ? (
         <div className="pa-info-box">
+          {t('analysis.messages.no_processes')}
         </div>
       ) : streamsData.length < 2 ? (
         <div className="pa-info-box">
+          {t('analysis.messages.need_more_streams')}
           {selectedCount > 0 && (
             <div className="pa-data-status">
               <strong>Data status for selected items:</strong>
         </div>
       ) : (
         <>
+          {pinchLoading && <div className="pa-loading">{t('analysis.messages.running')}</div>}
+          {pinchError && <div className="pa-error">{t('analysis.messages.error')} {pinchError}</div>}
           {pinchResult && (
             <>
                     checked={showShifted}
                     onChange={(e) => setShowShifted(e.target.checked)}
                   />
+                  {t('analysis.controls.show_shifted')}
                 </label>
                 <label className="pa-input-label pa-tmin-label">