Refactor Overlay in sub components

src/components/ThreeViewer/Dialogs/AdvertismentDialog.jsx

@@ -0,0 +1,60 @@
+import { DataListItem, DataListRoot } from '@/components/ui/data-list'
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * Dialog showing useful links for solar installation resources.
+ */
+export const AdvertismentDialog = ({ isOpen, onOpenChange }) => {
+  const { t } = useTranslation()
+
+  const data = [
+    {
+      label: t('adbox.balkonsolar'),
+      value: 'https://balkon.solar',
+      href: 'https://balkon.solar',
+    },
+    {
+      label: t('adbox.companies'),
+      value: 'https://www.sfv.de',
+      href: 'https://www.sfv.de/solaranlagenberatung/sachverstaendige-1',
+    },
+    {
+      label: t('adbox.bbe'),
+      value: 'https://www.buendnis-buergerenergie.de/',
+      href: 'https://www.buendnis-buergerenergie.de/karte',
+    },
+  ]
+
+  return (
+    <DialogRoot open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('adbox.title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <p>{t('adbox.introduction')}</p>
+          <br />
+          <DataListRoot>
+            {data.map((item) => (
+              <DataListItem
+                key={item.label}
+                label={item.label}
+                value={item.value}
+                href={item.href}
+              />
+            ))}
+          </DataListRoot>
+        </DialogBody>
+        <DialogCloseTrigger />
+      </DialogContent>
+    </DialogRoot>
+  )
+}

src/components/ThreeViewer/Dialogs/ColorLegend.jsx

@@ -0,0 +1,53 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Box, Text, VStack } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { generateColorGradient } from '../utils/colorMapUtils'
+
+/**
+ * Color legend dialog showing the yield color scale.
+ */
+export const ColorLegend = ({ isOpen, onOpenChange }) => {
+  const { t } = useTranslation()
+  const gradient = generateColorGradient()
+
+  return (
+    <DialogRoot open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('colorLegend.button')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <VStack spacing={4}>
+            <Box>
+              <Box display='flex' justifyContent='space-between' px={1}>
+                <Text fontSize='sm'>{t('colorLegend.description')}</Text>
+              </Box>
+              <Box display='flex' justifyContent='space-between' px={1}>
+                <Text fontSize='sm'>0</Text>
+                <Text fontSize='sm'>500</Text>
+                <Text fontSize='sm'>1150</Text>
+              </Box>
+              <Box
+                id='colorLegend'
+                h='20px'
+                w='300px'
+                borderRadius='md'
+                style={{
+                  background: `linear-gradient(to right, ${gradient})`,
+                }}
+              />
+            </Box>
+          </VStack>
+        </DialogBody>
+        <DialogCloseTrigger />
+      </DialogContent>
+    </DialogRoot>
+  )
+}

src/components/ThreeViewer/Dialogs/ControlHelperDialog.jsx

@@ -0,0 +1,40 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { List } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * Dialog showing controls help for navigating the 3D scene.
+ */
+export const ControlHelperDialog = ({ isOpen, onOpenChange }) => {
+  const { t } = useTranslation()
+  const touchDeviceText = window.isTouchDevice ? 'touch.' : ''
+
+  return (
+    <DialogRoot open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('mapControlHelp.title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <List.Root>
+            <List.Item>
+              {t(`mapControlHelp.${touchDeviceText}leftMouse`)}
+            </List.Item>
+            <List.Item>
+              {t(`mapControlHelp.${touchDeviceText}rightMouse`)}
+            </List.Item>
+            <List.Item>{t(`mapControlHelp.${touchDeviceText}wheel`)}</List.Item>
+          </List.Root>
+        </DialogBody>
+        <DialogCloseTrigger />
+      </DialogContent>
+    </DialogRoot>
+  )
+}

src/components/ThreeViewer/Dialogs/NotificationForSelectedPV/SavingCalculationDialog.jsx

@@ -0,0 +1,153 @@
+import { Button } from '@/components/ui/button'
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Field } from '@/components/ui/field'
+import { NumberInputField, NumberInputRoot } from '@/components/ui/number-input'
+import { Box, Collapsible, List, SimpleGrid, Text } from '@chakra-ui/react'
+import { useContext, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SceneContext } from '@/components/context'
+import { calculateSavings } from './savingsCalculator'
+
+/**
+ * Dialog for calculating PV system savings based on consumption and storage.
+ */
+export const SavingCalculationDialog = () => {
+  const { t } = useTranslation()
+  const { selectedPVSystem } = useContext(SceneContext)
+
+  const [annualConsumption, setAnnualConsumption] = useState('3000')
+  const [storageCapacity, setStorageCapacity] = useState('0')
+  const [electricityPrice, setElectricityPrice] = useState('30')
+  const [selfConsumption, setSelfConsumption] = useState(0)
+  const [annualSavings, setAnnualSavings] = useState(0)
+  const [showResults, setShowResults] = useState(false)
+
+  const pvProduction =
+    selectedPVSystem.length > 0
+      ? Math.round(
+          selectedPVSystem.reduce(
+            (previous, current) => previous + current.annualYield,
+            0,
+          ),
+        )
+      : 0
+
+  const handleCalculateSaving = async () => {
+    await calculateSavings({
+      pvProduction,
+      consumptionHousehold: annualConsumption,
+      storageCapacity,
+      electricityPrice,
+      setSelfConsumption,
+      setAnnualSavings,
+    })
+    setShowResults(true)
+  }
+
+  return (
+    <DialogRoot size='lg'>
+      <DialogTrigger asChild>
+        <Button variant='subtle'>{t('savingsCalculation.button')}</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('savingsCalculation.button')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <p>{t('savingsCalculation.disclaimer')}</p>
+          <br />
+          <SimpleGrid
+            columns={1}
+            columnGap='2'
+            rowGap='4'
+            justifyContent='center'
+            alignItems='center'
+          >
+            <Field
+              label={t('savingsCalculation.consumptionTitle')}
+              helperText={t('savingsCalculation.consumptionHelperInfo')}
+            >
+              <NumberInputRoot
+                value={annualConsumption}
+                onValueChange={(e) => setAnnualConsumption(e.value)}
+              >
+                <NumberInputField />
+              </NumberInputRoot>
+            </Field>
+
+            <Field label={t('savingsCalculation.storageTitle')}>
+              <NumberInputRoot
+                maxW='200px'
+                value={storageCapacity}
+                onValueChange={(e) => setStorageCapacity(e.value)}
+              >
+                <NumberInputField />
+              </NumberInputRoot>
+            </Field>
+
+            <Field label={t('savingsCalculation.electricityPriceTitle')}>
+              <NumberInputRoot
+                maxW='200px'
+                value={electricityPrice}
+                onValueChange={(e) => setElectricityPrice(e.value)}
+              >
+                <NumberInputField />
+              </NumberInputRoot>
+            </Field>
+          </SimpleGrid>
+
+          <Collapsible.Root open={showResults}>
+            <Collapsible.Content>
+              <Box
+                p='40px'
+                color='white'
+                mt='4'
+                bg='teal'
+                rounded='md'
+                shadow='md'
+              >
+                <Text>{t('savingsCalculation.disclaimer')}</Text>
+                <br />
+                <List.Root>
+                  <List.Item>
+                    {t('savingsCalculation.results.production')}
+                    <Text as='b' color='white'>
+                      {pvProduction} kWh
+                    </Text>
+                  </List.Item>
+                  <List.Item>
+                    {t('savingsCalculation.results.consumption')}
+                    <Text as='b' color='white'>
+                      {selfConsumption} kWh
+                    </Text>
+                  </List.Item>
+                  <List.Item>
+                    {t('savingsCalculation.results.savings')}
+                    <Text as='b' color='white'>
+                      {annualSavings}€
+                    </Text>
+                  </List.Item>
+                </List.Root>
+              </Box>
+            </Collapsible.Content>
+          </Collapsible.Root>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant='subtle' mr={3} onClick={handleCalculateSaving}>
+            {t('savingsCalculation.calculate')}
+          </Button>
+        </DialogFooter>
+        <DialogCloseTrigger />
+      </DialogContent>
+    </DialogRoot>
+  )
+}

src/components/ThreeViewer/Dialogs/NotificationForSelectedPV/index.jsx

@@ -0,0 +1,53 @@
+import { Button } from '@/components/ui/button'
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { SimpleGrid } from '@chakra-ui/react'
+import { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SceneContext } from '@/components/context'
+import { SavingCalculationDialog } from './SavingCalculationDialog'
+
+/**
+ * Notification dialog shown when a PV system is selected.
+ * Provides options to calculate savings or delete the system.
+ */
+export const NotificationForSelectedPV = () => {
+  const { t } = useTranslation()
+  const { setSelectedPVSystem, setPVSystems } = useContext(SceneContext)
+
+  return (
+    <DialogRoot
+      open={true}
+      placement='bottom'
+      size='xs'
+      onInteractOutside={() => setSelectedPVSystem([])}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('savingsCalculation.notificationLabel')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <SimpleGrid gap='5px'>
+            <SavingCalculationDialog />
+            <Button
+              variant='subtle'
+              onClick={() => {
+                setPVSystems([])
+                setSelectedPVSystem([])
+              }}
+            >
+              {t('delete')}
+            </Button>
+          </SimpleGrid>
+        </DialogBody>
+        <DialogCloseTrigger onClick={() => setSelectedPVSystem([])} />
+      </DialogContent>
+    </DialogRoot>
+  )
+}