Add FAQ Page

src/components/legal/FAQPage.tsx

@@ -0,0 +1,37 @@
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Accordion, AccordionDetails, AccordionSummary, Alert, Divider, Stack, Typography } from '@mui/material';
+import { ReactComponent as FAQSvg } from '../../svg/faq.svg';
+import faqs from '../../utils/Faq.json';
+
+const FAQPage = () => {
+  return (
+    <>
+      <Stack direction="column" alignItems="center" spacing={0}>
+        <FAQSvg width="150px" height="150px" />
+
+        <Typography
+          variant="h4"
+          gutterBottom
+          sx={{
+            background: 'linear-gradient(to right, #49a7cc, #ffa680)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}>
+          Fragen und Antworten
+        </Typography>
+
+        {faqs.map((faq, index) => (
+          <Accordion key={index} sx={{ width: '100%' }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>{faq.question}</AccordionSummary>
+            <AccordionDetails>{faq.answer}</AccordionDetails>
+          </Accordion>
+        ))}
+        <Divider sx={{ py: 2 }} />
+        <Alert severity="info">
+          Falls Du die Antwort auf Deine Frage hier nicht finden konntest, schreib bitte eine E-Mail an [email protected]..
+        </Alert>
+      </Stack>
+    </>
+  );
+};
+export default FAQPage;

src/components/menu/FlyoutMenuList.tsx

@@ -1,4 +1,11 @@
-import { AutorenewOutlined, BeachAccessOutlined, LogoutOutlined, PersonOutlined, SummarizeOutlined } from '@mui/icons-material';
+import {
+  AutorenewOutlined,
+  BeachAccessOutlined,
+  LogoutOutlined,
+  PersonOutlined,
+  QuestionAnswerOutlined,
+  SummarizeOutlined,
+} from '@mui/icons-material';
 import { Avatar, Button, Divider, Link, ListItemIcon, ListItemText, MenuItem, MenuList, Stack, Typography } from '@mui/material';
 import packageJson from '../../../package.json';
 import useNotification from '../../hooks/useNotification';
@@ -87,6 +94,12 @@ const FlyoutMenuList = () => {
             </ListItemIcon>
             <ListItemText>Bericht erstellen</ListItemText>
           </MenuItem>
+          <MenuItem onClick={() => handleMeItemClick(MenuUtils.FAQ)}>
+            <ListItemIcon>
+              <QuestionAnswerOutlined />
+            </ListItemIcon>
+            <ListItemText>Fragen und Antworten</ListItemText>
+          </MenuItem>
         </MenuList>
 
         <MenuList dense sx={{ width: '100%' }}>

src/components/menu/NavigationRouter.tsx

@@ -4,6 +4,7 @@ import ExportPage from '../ExportPage';
 import HomePage from '../HomePage';
 import AbsencesYearPage from '../absences/AbsencesYearPage';
 import UserHomePage from '../home/UserHomePage';
+import FAQPage from '../legal/FAQPage';
 import { default as PolicyPage, default as TermsPage } from '../legal/PolicyPage';
 import ProfileSettingsTabs from '../settings/ProfileSettingsTabs';
 import TimeHistoryPage from '../time/TimeHistoryPage';
@@ -34,6 +35,8 @@ const NavigationRouter = () => {
       return <PolicyPage />;
     case MenuUtils.Terms:
       return <TermsPage />;
+    case MenuUtils.FAQ:
+      return <FAQPage />;
     default:
       return null;
   }

src/index.tsx

@@ -15,8 +15,8 @@ const appVersion = 'kitze@' + packageJson.version;
 Sentry.init({
   dsn: 'https://5ac8b96b19276d1328619195bddd25aa@o4507284505886720.ingest.de.sentry.io/4507284508180560',
   integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+  sampleRate: 1.0,
   tracesSampleRate: 1.0,
-  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
   release: appVersion,

src/utils/Faq.json

@@ -0,0 +1,112 @@
+[
+  {
+    "question": "Was ist die Kindergarten Time Tracker App?",
+    "answer": "Die Kindergarten Time Tracker App ist eine spezialisierte Anwendung zur Arbeitszeiterfassung für Erzieher:innen. Sie ermöglicht die getrennte Erfassung der Arbeitszeit, die direkt mit den Kindern verbracht wird, sowie der Vor- und Nachbereitungszeit. Dadurch bietet sie eine detaillierte Übersicht über die geleisteten Arbeitsstunden und unterstützt eine bessere Planung und Verwaltung der Arbeitszeit.",
+    "category": "Allgemein"
+  },
+  {
+    "question": "Für wen ist die App gedacht?",
+    "answer": "Die App ist speziell für Erzieher:innen in Kindergärten und ähnlichen Einrichtungen konzipiert. Sie richtet sich an Fachkräfte, die eine präzise und übersichtliche Zeiterfassung ihrer Arbeitsstunden benötigen, um ihre Arbeitszeiten effizient zu verwalten und zu dokumentieren.",
+    "category": "Allgemein"
+  },
+  {
+    "question": "Welche Hauptfunktionen bietet die App?",
+    "answer": "Die App bietet die getrennte Erfassung der Arbeitszeit, die direkt mit den Kindern verbracht wird, sowie der Vor- und Nachbereitungszeit. Zusätzlich ermöglicht sie die Generierung von Berichten und Statistiken über die Arbeitszeiten, Urlaubstage und Krankheitstage. Diese Funktionen helfen Erzieher:innen, ihre Arbeitszeit genau zu dokumentieren und zu analysieren.",
+    "category": "Allgemein"
+  },
+  {
+    "question": "Wie kann man die App herunterladen und installieren?",
+    "answer": "Die App kann über die Webseite https://kindergarten-timetracker.web.app/ heruntergeladen und installiert werden. Als Progressive Web App (PWA) ist sie einfach zu installieren und benötigt keine speziellen Anforderungen außer einem kompatiblen Webbrowser.",
+    "category": "Allgemein"
+  },
+  {
+    "question": "Auf welchen Plattformen ist die App verfügbar? (iOS, Android, Web etc.)",
+    "answer": "Derzeit ist die App ausschließlich als Progressive Web App (PWA) verfügbar. Das bedeutet, sie kann auf jedem Gerät mit einem modernen Webbrowser genutzt werden, unabhängig davon, ob es sich um ein iOS-, Android- oder Desktop-Gerät handelt.",
+    "category": "Allgemein"
+  },
+  {
+    "question": "Wie richtet man ein neues Konto in der App ein?",
+    "answer": "Um ein neues Konto in der App einzurichten, können Benutzer:innen sich mit ihrem Google-Account anmelden. Dies vereinfacht den Anmeldeprozess und stellt sicher, dass die Benutzer:innen sofort auf die Funktionen der App zugreifen können.",
+    "category": "Benutzerfreundlichkeit und Bedienung"
+  },
+  {
+    "question": "Welche technischen Anforderungen hat die App?",
+    "answer": "Die App benötigt lediglich eine Internetverbindung und einen modernen Webbrowser, um genutzt werden zu können. Es sind keine speziellen Hardwareanforderungen oder Softwareinstallationen notwendig.",
+    "category": "Technische Aspekte"
+  },
+  {
+    "question": "Wie sicher sind die Daten in der App?",
+    "answer": "Die Sicherheit der Daten hat höchste Priorität. Standardmäßig werden alle inaktiven Daten in Google Firestore mit der Standardverschlüsselung von Google verschlüsselt. Google Firestore übernimmt und verwaltet diese Verschlüsselung, um sicherzustellen, dass die Daten vor unbefugtem Zugriff geschützt sind.",
+    "category": "Datenschutz und Sicherheit"
+  },
+  {
+    "question": "Wie werden die Daten gespeichert und geschützt?",
+    "answer": "Die Daten werden in Google Firebase Firestore gespeichert, einem sicheren und skalierbaren Datenbankdienst. Weitere Informationen zu den Nutzungsbedingungen und Datenschutzrichtlinien finden Sie unter https://firebase.google.com/terms.",
+    "category": "Datenschutz und Sicherheit"
+  },
+  {
+    "question": "Gibt es eine Backup-Funktion für die Daten?",
+    "answer": "Google Firestore sorgt automatisch für die Replikation und hohe Verfügbarkeit der Daten. Die multiregionalen Datenbanken haben eine Verfügbarkeit und Haltbarkeit von 99,999 %. Eine spezielle Backup-Funktion ist daher nicht notwendig, da die Daten automatisch gesichert und repliziert werden.",
+    "category": "Datenschutz und Sicherheit"
+  },
+  {
+    "question": "Welche Berechtigungen benötigt die App auf dem Gerät?",
+    "answer": "Die App benötigt lediglich eine Internetverbindung, um zu funktionieren. Es sind keine weiteren Berechtigungen erforderlich, was die Nutzung der App einfach und sicher macht.",
+    "category": "Datenschutz und Sicherheit"
+  },
+  {
+    "question": "Welche Arten von Berichten oder Statistiken kann die App generieren?",
+    "answer": "Die App kann verschiedene Berichte und Statistiken generieren, darunter: Arbeitszeiten, Urlaubstage und Krankheitstage des aktuellen Monats, der monatliche Verlauf des Jahres und detaillierte Monatsberichte im PDF-Format. Diese Berichte unterstützen Erzieher:innen bei der Dokumentation und Analyse ihrer Arbeitszeit.",
+    "category": "Funktionale Details"
+  },
+  {
+    "question": "Kann man die Anwesenheit für bestimmte Tage rückwirkend ändern?",
+    "answer": "Ja, unter dem Menüpunkt 'Zeiten' kann man die Karte eines bestimmten Tages öffnen und die Zeiten rückwirkend ändern. Dies ermöglicht eine flexible und genaue Nachbearbeitung der erfassten Arbeitszeiten.",
+    "category": "Funktionale Details"
+  },
+  {
+    "question": "Wie detailliert sind die Zeitverfolgungsoptionen?",
+    "answer": "Die Zeitverfolgungsoptionen sind sehr detailliert und ermöglichen eine minutengenaue Erfassung der Arbeitszeiten. Dies hilft, die Arbeitsstunden präzise zu dokumentieren und auszuwerten.",
+    "category": "Funktionale Details"
+  },
+  {
+    "question": "Wie kann man den Kundensupport kontaktieren?",
+    "answer": "Der Kundensupport kann per E-Mail unter [email protected] kontaktiert werden. Bei Fragen oder Problemen steht das Support-Team gerne zur Verfügung.",
+    "category": "Kundensupport und Feedback"
+  },
+  {
+    "question": "Wie kann man Feedback zur App geben?",
+    "answer": "Feedback zur App kann ebenfalls per E-Mail an [email protected] gesendet werden. Das Team freut sich über Rückmeldungen und Vorschläge zur Verbesserung der App.",
+    "category": "Kundensupport und Feedback"
+  },
+  {
+    "question": "Wie oft wird die App aktualisiert?",
+    "answer": "Die App wird unregelmäßig aktualisiert, je nach Bedarf. Updates werden durchgeführt, um Fehler zu beheben oder neue Funktionen hinzuzufügen.",
+    "category": "Updates und Wartung"
+  },
+  {
+    "question": "Wie werden Benutzer über neue Funktionen oder Updates informiert?",
+    "answer": "Benutzer:innen werden über neue Funktionen oder Updates durch das GitHub-Repository informiert: https://github.com/flojud/Kindergarten-timetracker. Zusätzlich gibt es in der App einen Update-Button im Menü, über den man auf die neueste Version prüfen und aktualisieren kann.",
+    "category": "Updates und Wartung"
+  },
+  {
+    "question": "Ist die App kostenlos?",
+    "answer": "Ja, die App ist kostenlos.",
+    "category": "Preisgestaltung und Abonnements"
+  },
+  {
+    "question": "Gibt es In-App-Käufe oder Abonnement-Modelle?",
+    "answer": "Nein, derzeit gibt es keine In-App-Käufe oder Abonnement-Modelle. Alle Funktionen der App sind kostenlos verfügbar.",
+    "category": "Preisgestaltung und Abonnements"
+  },
+  {
+    "question": "Was unterscheidet die Kindergarten Time Tracker App von anderen ähnlichen Apps?",
+    "answer": "Im Vergleich zu anderen Zeiterfassungs-Apps unterscheidet sich die Kindergarten Time Tracker App durch die Möglichkeit, zwischen der Arbeitszeit am Kind und der Vor- und Nachbereitungszeit zu unterscheiden. Diese Funktion bietet eine präzisere und spezifischere Zeiterfassung für Erzieher:innen.",
+    "category": "Vergleich mit anderen Apps"
+  },
+  {
+    "question": "Wie geht die App mit Datenschutzrichtlinien und -bestimmungen um?",
+    "answer": "Die Datenschutzerklärung der App ist über das Menü zugänglich. Sie enthält detaillierte Informationen darüber, wie die App mit persönlichen Daten umgeht und welche Maßnahmen zum Schutz der Daten ergriffen werden.",
+    "category": "Datenschutz und Sicherheit"
+  }
+]

src/utils/MenuUtils.ts

@@ -7,5 +7,6 @@ const Report = 5;
 const Absence = 6;
 const Privacy = 7;
 const Terms = 8;
+const FAQ = 9;
 
-export default { UserHome, TimeHistory, TimeInput, Flyout, Profile, Report, Absence, Privacy, Terms };
+export default { UserHome, TimeHistory, TimeInput, Flyout, Profile, Report, Absence, Privacy, Terms, FAQ };