separate benefits into different sections

Citizen-Knowledge-Graph · Mar 3, 2025 · 880e0af · 880e0af
1 parent 6ea8a8f
commit 880e0af
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 38 deletions.
diff --git a/public/assets/data/requirement-profiles/requirement-profiles-hydration.json b/public/assets/data/requirement-profiles/requirement-profiles-hydration.json
@@ -1,6 +1,7 @@
 {
   "https://foerderfunke.org/default#hilfe-zum-lebensunterhalt": {
     "id": "ff:hilfe-zum-lebensunterhalt",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Hilfe zum Lebensunterhalt",
@@ -13,6 +14,7 @@
   },
   "https://foerderfunke.org/default#kindergeld": {
     "id": "ff:kindergeld",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Kindergeld",
@@ -153,6 +155,7 @@
   },
   "https://foerderfunke.org/default#kinderzuschlag": {
     "id": "ff:kinderzuschlag",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Kinderzuschlag",
@@ -283,6 +286,7 @@
   },
   "https://foerderfunke.org/default#bafoeg": {
     "id": "ff:bafoeg",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "BAföG",
@@ -295,6 +299,7 @@
   },
   "https://foerderfunke.org/default#buergergeld": {
     "id": "ff:buergergeld",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Bürgergeld",
@@ -307,6 +312,7 @@
   },
   "https://foerderfunke.org/default#arbeitslosengeld": {
     "id": "ff:arbeitslosengeld",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Arbeitslosengeld",
@@ -319,6 +325,7 @@
   },
   "https://foerderfunke.org/default#berufsausbildungsbeihilfe-bab": {
     "id": "ff:berufsausbildungsbeihilfe-bab",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Berufsausbildungsbeihilfe (BAB)",
@@ -331,6 +338,7 @@
   },
   "https://foerderfunke.org/default#wohngeld": {
     "id": "ff:wohngeld",
+    "category": "social_benefit",
     "status": "production",
     "leika_id": "99107023037000",
     "title": {
@@ -436,6 +444,7 @@
   },
   "https://foerderfunke.org/default#grundsicherung-im-alter-und-bei-erwerbsminderung": {
     "id": "ff:grundsicherung-im-alter-und-bei-erwerbsminderung",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Grundsicherung im Alter und bei Erwerbsminderung",
@@ -448,6 +457,7 @@
   },
   "https://foerderfunke.org/default#bildung-und-teilhabe-bei-bezug-von-buergergeld": {
     "id": "ff:bildung-und-teilhabe-bei-bezug-von-buergergeld",
+    "category": "social_benefit",
     "status": "production",
     "title": {
       "de": "Bildung und Teilhabe - bei Bezug von Bürgergeld",
@@ -460,6 +470,7 @@
   },
   "https://foerderfunke.org/default#exist-gruendungsstipendium": {
     "id": "ff:exist-gruendungsstipendium",
+    "category": "business",
     "status": "beta",
     "title": {
       "de": "EXIST-Gründungsstipendium",
@@ -472,6 +483,7 @@
   },
   "https://foerderfunke.org/default#ibb-gruendungsbonus": {
     "id": "ff:ibb-gruendungsbonus",
+    "category": "business",
     "status": "beta",
     "title": {
       "de": "IBB-Gründungsbonus",
@@ -484,6 +496,7 @@
   },
   "https://foerderfunke.org/default#ibb-altersgerecht-wohnen": {
     "id": "ff:ibb-altersgerecht-wohnen",
+    "category": "business",
     "status": "beta",
     "title": {
       "de": "IBB Altersgerecht Wohnen",
@@ -590,6 +603,7 @@
   },
   "https://foerderfunke.org/default#ifb-gruendung-nachfolge": {
     "id": "ff:ifb-gruendung-nachfolge",
+    "category": "business",
     "status": "beta",
     "title": {
       "de": "Hamburg-Kredit Gründung und Nachfolge III 2025",
@@ -708,6 +722,7 @@
   },
   "https://foerderfunke.org/default#ifb-inno-founder": {
     "id": "ff:ifb-inno-founder",
+    "category": "business",
     "status": "beta",
     "title": {
       "de": "InnoFounder - Förderprogramm für innovative und wissensbasierte Gründungsvorhaben",

diff --git a/src/core/utilities/buildEligibilityReports.js b/src/core/utilities/buildEligibilityReports.js
@@ -1,5 +1,3 @@
-import { ValidationResult } from '@foerderfunke/matching-engine';
-
 export const buildEligibilityReports = (validationReport, hydrationData, language) => {
     if (!validationReport || !('reports' in validationReport)) {
         return {
@@ -10,33 +8,32 @@ export const buildEligibilityReports = (validationReport, hydrationData, languag
     }
 
     const { reports } = validationReport;
-    const eligibilityData = {
-        eligible: [],
-        nonEligible: [],
-        missingData: []
-    };
 
-    for (let report of reports) {
+    const allReports = reports.map(report => {
         let { rpUri, result } = report;
         const id = hydrationData[rpUri]?.id || 'Unknown Id';
         const title = hydrationData[rpUri]?.title?.[language] || 'Unknown Title';
+        const category = hydrationData[rpUri]?.category || 'Unknown Category';
         const description = hydrationData[rpUri]?.description?.[language] || 'Unknown Description';
         const status = hydrationData[rpUri]?.status || 'Unknown Status';
         const requiredDocuments = hydrationData[rpUri]?.required_documents?.[language] || [];
         const additionalSupport = hydrationData[rpUri]?.additional_support?.[language] || {};
         const legalBasis = hydrationData[rpUri]?.legal_basis?.[language] || {};
         const furtherInformation = hydrationData[rpUri]?.further_information?.[language] || [];
-        const data = { uri: rpUri, id, title, description, status, requiredDocuments, additionalSupport, legalBasis, furtherInformation };
-        if (result === ValidationResult.ELIGIBLE) {
-            eligibilityData.eligible.push(data);
-        }
-        if (result === ValidationResult.INELIGIBLE) {
-            eligibilityData.nonEligible.push(data);
+        return { uri: rpUri, result, id, title, category, description, status, requiredDocuments, additionalSupport, legalBasis, furtherInformation };
+    });    
+
+    return allReports.reduce((acc, report) => {
+        const { category, result } = report;
+
+        if (!acc[category]) {
+            acc[category] = {};
         }
-        if (result === ValidationResult.UNDETERMINABLE) {
-            eligibilityData.missingData.push(data);
+        if (!acc[category][result]) {
+            acc[category][result] = [];
         }
-    }
-
-    return eligibilityData;
+
+        acc[category][result].push(report);
+        return acc;
+    }, {});
 };
diff --git a/src/theme.js b/src/theme.js
@@ -65,11 +65,21 @@ const theme = createTheme({
             color: '#333333',
         },
         h6: {
-            fontSize: '20px',
-            fontWeight: 'bold',
-            lineHeight: '1.5',
+            lineHeight: '1.3',
+            color: '#333333',
+            fontFamily: '"Funnel Display", sans-serif',
+            fontSize: '20px', // Default font size
+            [`@media (max-width:600px)`]: { fontSize: '16px' }, // Smaller screens
+            [`@media (min-width:960px)`]: { fontSize: '18px' }, // Large screens
+        },
+        h5: {
+            fontWeight: '500',
+            lineHeight: '1.3',
             color: '#333333',
             fontFamily: '"Funnel Display", sans-serif',
+            fontSize: '18px', // Default font size
+            [`@media (max-width:600px)`]: { fontSize: '16px' }, // Smaller screens
+            [`@media (min-width:960px)`]: { fontSize: '20px' }, // Large screens
         },
         h4: {
             fontWeight: 'bold',
@@ -106,7 +116,7 @@ const theme = createTheme({
                 root: {
                     textTransform: 'none',
                     borderRadius: "16px",
-                    padding: '16px 28px',
+                    padding: '12px 20px',
                     fontSize: '18px',
                     fontWeight: '400',
                     fontFamily: '"Funnel Display", sans-serif',

diff --git a/src/ui/screens/eligibilty-overview/EligibilityOverviewScreen.js b/src/ui/screens/eligibilty-overview/EligibilityOverviewScreen.js
@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import EligibilityOverviewHeader from "./components/EligibilityOverviewHeader";
 import Layout from "../../shared-components/Layout";
-import EligibilityOverviewList from "./components/EligibilityOverviewList";
 import AppScreenWrapper from "../../shared-components/AppScreenWrapper";
 import { CircularProgress } from "@mui/material";
 import { LanguageContext } from "../../language/LanguageContext";
@@ -10,31 +9,47 @@ import { useValidationUpdate } from "../../storage/updates";
 import useFetchData from "../../shared-hooks/useFetchData";
 import { VBox } from '../../shared-components/LayoutBoxes';
 import useEligibilityData from "./hooks/useEligibilityData";
+import EligibilityOverviewSection from "./components/EligibilityOverviewSection";
+import useTranslation from "../../language/useTranslation";
+import theme from '../../../theme';
 
 const EligibilityOverviewScreen = () => {
+    const { t } = useTranslation();
     const { language } = useContext(LanguageContext);
 
     const validationReport = useValidationReportStore((state) => state.validationReport);
     const validationIsLoading = useValidationUpdate((state) => state.validationIsLoading);
     const hydrationData = useFetchData('assets/data/requirement-profiles/requirement-profiles-hydration.json')
     const eligibilityData = useEligibilityData(validationReport, hydrationData, language);
 
+    console.log('EligibilityOverviewScreen', eligibilityData);
+
     return (
         <Layout isApp={true} logo={true}>
             <AppScreenWrapper back={true}>
-                <VBox sx={{ gap: 3 }} >
+                <VBox sx={{ gap: 6 }} >
                     <EligibilityOverviewHeader />
                     {
                         eligibilityData && !validationIsLoading ? (
                             <>
-                                {eligibilityData.eligible.length > 0 &&
-                                    <EligibilityOverviewList items={eligibilityData.eligible} eligible={'eligible'} />}
-                                {eligibilityData.missingData.length > 0 &&
-                                    <EligibilityOverviewList items={eligibilityData.missingData}
-                                        eligible={'indeterminate'} />}
-                                {eligibilityData.nonEligible.length > 0 &&
-                                    <EligibilityOverviewList items={eligibilityData.nonEligible}
-                                        eligible={'non-eligible'} />}
+                                {
+                                    eligibilityData["social_benefit"] && (
+                                        <EligibilityOverviewSection
+                                            color={theme.palette.yellow.main}
+                                            category={t('app.topicSelection.socialBenefitsTitle')}
+                                            eligibilitySection={eligibilityData["social_benefit"]}
+                                        />
+                                    )
+                                }
+                                {
+                                    eligibilityData["business"] && (
+                                        <EligibilityOverviewSection
+                                            color={theme.palette.blue.main}
+                                            category={t('app.topicSelection.businessTitle')}
+                                            eligibilitySection={eligibilityData["business"]}
+                                        />
+                                    )
+                                }
                             </>
                         ) :
                             <VBox sx={{ alignItems: "center" }}><CircularProgress /></VBox>

diff --git a/src/ui/screens/eligibilty-overview/components/EligibilityOverviewItem.js b/src/ui/screens/eligibilty-overview/components/EligibilityOverviewItem.js
@@ -23,7 +23,7 @@ const EligibilityOverviewItem = ({ item, eligible }) => {
                 <Circle sx={{ color: color }} />
                 <HBox sx={{ width: '100%' }}>
                     <HBox sx={{ alignItems: 'center' }}>
-                        <Typography variant='h6' sx={{ fontWeight: fontWeight }} onClick={toggleDescription}>
+                        <Typography variant='h5' sx={{ fontWeight: fontWeight }} onClick={toggleDescription}>
                             {item.title}
                         </Typography>
                         {item.status === "beta" && (

diff --git a/src/ui/screens/eligibilty-overview/components/EligibilityOverviewSection.js b/src/ui/screens/eligibilty-overview/components/EligibilityOverviewSection.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { ValidationResult } from "@foerderfunke/matching-engine"
+import { VBox } from "../../../shared-components/LayoutBoxes"
+import EligibilityOverviewList from "./EligibilityOverviewList"
+import ContentBox from '../../../shared-components/ContentBox';
+
+
+const EligibilityOverviewSection = ({ color, category, eligibilitySection }) => {
+
+
+    const eligibleBenefits = eligibilitySection[ValidationResult.ELIGIBLE] || []
+    const ineligibleBenefits = eligibilitySection[ValidationResult.INELIGIBLE] || []
+    const undeterminableBenefits = eligibilitySection[ValidationResult.UNDETERMINABLE] || []
+
+    console.log('category', eligibilitySection);
+    console.log('eligible', eligibleBenefits);
+    console.log('undeterminable', undeterminableBenefits);
+    console.log('ineligible', ineligibleBenefits);
+
+
+    return (
+        <VBox sx={{ gap: 3 }}>
+            <ContentBox sx={{ backgroundColor: color }}>
+                <Typography variant="h4">
+                    {category}
+                </Typography>
+            </ContentBox>
+            <VBox>
+                {eligibleBenefits.length > 0 &&
+                    <EligibilityOverviewList items={eligibleBenefits} eligible={'eligible'} />}
+                {ineligibleBenefits.length > 0 &&
+                    <EligibilityOverviewList items={ineligibleBenefits} eligible={'non-eligible'} />}
+                {undeterminableBenefits.length > 0 &&
+                    <EligibilityOverviewList items={undeterminableBenefits} eligible={'missing-data'} />}
+            </VBox>
+        </VBox >
+    );
+}
+
+export default EligibilityOverviewSection;
diff --git a/src/ui/screens/eligibilty-overview/hooks/useEligibilityData.js b/src/ui/screens/eligibilty-overview/hooks/useEligibilityData.js
@@ -9,6 +9,7 @@ const useEligibilityData = (validationReport, hydrationData, language) => {
             const data = buildEligibilityReports(validationReport, hydrationData, language);
             setEligibilityData(data);
         }
+
     }, [validationReport, hydrationData, language]);
 
     return eligibilityData;

diff --git a/src/ui/screens/landing-page/components/LandingPageWAppButton.js b/src/ui/screens/landing-page/components/LandingPageWAppButton.js
@@ -1,15 +1,27 @@
 import React from "react";
-import { Button } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { Link } from "react-router-dom";
 import useTranslation from "../../../language/useTranslation";
 
 const LandingPageWAppButton = () => {
     const { t } = useTranslation();
-    
+
     return (
         <Button variant="outlined"
             component={Link}
-            to="/user-routing">{t('home.global.actionButton')}</Button>
+            to="/user-routing"
+            sx={{
+                "&:hover": {
+                    color: "white",
+                },
+            }}>
+            <Typography sx={{
+                fontWeight: 400,
+                "&:hover": {
+                    color: "white !important",
+                },
+            }} variant="h6">{t('home.global.actionButton')}</Typography>
+        </Button>
     );
 }
 

diff --git a/src/ui/screens/landing-page/sections/top-section/components/LandingPageTopSectionShared.js b/src/ui/screens/landing-page/sections/top-section/components/LandingPageTopSectionShared.js
@@ -22,7 +22,7 @@ const LandingPageTopSectionShared = () => {
             <VBox sx={{ alignItems: 'flex-start', gap: theme.spacing(0) }}>
                 <HBox sx={{ alignItems: "flex-end", gap: theme.spacing(2) }}>
                     <Typography variant="h1">{t("home.hero.headerShard1")}</Typography>
-                    <Typography variant="h1" sx={{ color: theme.palette.blue.main, fontWeight: "bold"}}>
+                    <Typography variant="h1" sx={{ color: theme.palette.blue.main, fontWeight: "bold" }}>
                         <motion.span
                             key={words[currentWordIndex]}
                             initial={{ opacity: 0, y: 20 }}