From f155e752f406efe48980d664a2a3471dc7b681b2 Mon Sep 17 00:00:00 2001 From: SvenVw <37927107+SvenVw@users.noreply.github.com> Date: Tue, 10 Feb 2026 15:32:12 +0100 Subject: [PATCH 1/5] feat: Enhanced the farm selection screen with a modernized UI, clearer feature breakdowns for new users, and a dedicated Atlas section for existing farms. Improved sidebar navigation by adding "muted" states for unavailable features and clarifying the distinction between the farm list and farm overview --- .changeset/calm-rivers-flow.md | 5 + .../app/components/blocks/sidebar/apps.tsx | 402 ++++++----- .../app/components/blocks/sidebar/farm.tsx | 472 +++++++------ fdm-app/app/routes/farm._index.tsx | 634 ++++++++++-------- 4 files changed, 841 insertions(+), 672 deletions(-) create mode 100644 .changeset/calm-rivers-flow.md diff --git a/.changeset/calm-rivers-flow.md b/.changeset/calm-rivers-flow.md new file mode 100644 index 000000000..88b003239 --- /dev/null +++ b/.changeset/calm-rivers-flow.md @@ -0,0 +1,5 @@ +--- +"@svenvw/fdm-app": patch +--- + +Enhanced the farm selection screen with a modernized UI, clearer feature breakdowns for new users, and a dedicated Atlas section for existing farms. Improved sidebar navigation by adding "muted" states for unavailable features and clarifying the distinction between the farm list and farm overview. diff --git a/fdm-app/app/components/blocks/sidebar/apps.tsx b/fdm-app/app/components/blocks/sidebar/apps.tsx index 0158b6e24..621f90802 100644 --- a/fdm-app/app/components/blocks/sidebar/apps.tsx +++ b/fdm-app/app/components/blocks/sidebar/apps.tsx @@ -25,6 +25,12 @@ import { SidebarMenuSubButton, SidebarMenuSubItem, } from "~/components/ui/sidebar" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "~/components/ui/tooltip" export function SidebarApps() { const farmId = useFarmStore((state) => state.farmId) @@ -97,200 +103,234 @@ export function SidebarApps() { omBalanceLink = undefined } return ( - - Apps - - - - - {atlasLink ? ( - + + + Apps + + + + + {atlasLink ? ( + + + + Atlas + + + + + ) : ( - - Atlas - - + + + Atlas + - - ) : ( + )} + + + + {atlasFieldsLink ? ( + + + + Gewaspercelen + + + + ) : null} + + + {atlasElevationLink ? ( + + + Hoogtekaart + + + ) : null} + + + {atlasSoilLink ? ( + + + Bodemkaart + + + ) : null} + + + + + + + + {nitrogenBalanceLink ? ( + + + + Balans + + + + + ) : ( + + + + + + Balans + + + + + Selecteer een bedrijf om de balansen + te raadplegen + + + )} + + + + {nitrogenBalanceLink ? ( + + + Stikstof + + + ) : null} + + + {omBalanceLink ? ( + + + + Organische stof + + + + ) : null} + + + + + + + {nutrientAdviceLink ? ( - - - Atlas - + + + Bemestingsadvies + + ) : ( + + + + + + Bemestingsadvies + + + + + Selecteer een bedrijf voor + bemestingsadvies + + )} - - - - {atlasFieldsLink ? ( - - - Gewaspercelen - - - ) : null} - - - {atlasElevationLink ? ( - - - Hoogtekaart - - - ) : null} - - - {atlasSoilLink ? ( - - - Bodemkaart - - - ) : null} - - - - - - {nitrogenBalanceLink ? ( - - - - Balans - - - - - ) : ( + {normsLink ? ( - - - Balans - + + + Gebruiksruimte + + ) : ( + + + + + + Gebruiksruimte + + + + + Selecteer een bedrijf om de + gebruiksruimte te berekenen + + )} - - - - {nitrogenBalanceLink ? ( - - - Stikstof - - - ) : null} - - - {omBalanceLink ? ( - - - Organische stof - - - ) : null} - - - - - - {nutrientAdviceLink ? ( - - - - Bemestingsadvies - - - ) : ( - - - - Bemestingsadvies - - - )} - - - {normsLink ? ( - - - - Gebruiksruimte - - - ) : ( - - - - Gebruiksruimte - - - )} - - - - + + + + ) } diff --git a/fdm-app/app/components/blocks/sidebar/farm.tsx b/fdm-app/app/components/blocks/sidebar/farm.tsx index 2e3252f1f..a112b907c 100644 --- a/fdm-app/app/components/blocks/sidebar/farm.tsx +++ b/fdm-app/app/components/blocks/sidebar/farm.tsx @@ -4,6 +4,7 @@ import { Check, ChevronRight, House, + LayoutGrid, Shapes, Sprout, Square, @@ -30,6 +31,12 @@ import { SidebarMenuSubButton, SidebarMenuSubItem, } from "~/components/ui/sidebar" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "~/components/ui/tooltip" export function SidebarFarm({ farm, @@ -61,19 +68,12 @@ export function SidebarFarm({ location.pathname.includes("farm/create") || searchParams.get("returnUrl")?.includes("farm/create") const farmRole = farm ? getSuperiorRole(farm.roles) : null - // Set the farm link - let farmLink: string - let farmLinkDisplay: string - if (isCreateFarmWizard) { - farmLink = "/farm" - farmLinkDisplay = "Terug naar bedrijven" - } else if (farmId && farmId !== "undefined") { - farmLink = `/farm/${farmId}` - farmLinkDisplay = farm?.b_name_farm ? farm.b_name_farm : "Bedrijf" - } else { - farmLink = "/farm" - farmLinkDisplay = "Overzicht bedrijven" - } + + const isFarmOverview = + location.pathname === "/farm" || location.pathname === "/farm/" + + const isFarmSelected = + farmId && farmId !== "undefined" && !isCreateFarmWizard let fieldsLink: string | undefined if (isCreateFarmWizard) { @@ -101,214 +101,268 @@ export function SidebarFarm({ } return ( - - Bedrijf - - - - - - - - {farmLinkDisplay} - - {farmRole && ( - - {farmRole === "owner" - ? "Eigenaar" - : farmRole === "advisor" - ? "Adviseur" - : farmRole === "researcher" - ? "Onderzoeker" - : "Onbekend"} - - )} - - - - {/* Conditionally render the Kalender item */} - {farmId && !isCreateFarmWizard ? ( - - - - - - Kalender - {!isCalendarOpen && ( - - {selectedCalendar === "all" - ? "Alle jaren" - : selectedCalendar} - - )} - - - - - - {calendarSelection?.map((item) => { - // Construct the new URL with the selected calendar - const newUrl = - location.pathname.replace( - /\/(\d{4}|all)/, - `/${item}`, - ) - return ( - - - setCalendar(item) - } - > - - - {item === "all" - ? "Alle jaren" - : item} - - {selectedCalendar === - item && ( - - )} - - - - ) - })} - - - - - ) : ( + + + Bedrijf + + - - - Kalender - - - - )} - - {fieldsLink ? ( - - - - Percelen + + + + {isCreateFarmWizard + ? "Terug naar bedrijven" + : "Mijn bedrijven"} + - ) : ( - - - - Percelen - - - )} - - - {rotationLink ? ( - - - - Bouwplan - - - ) : ( - - - - Bouwplan - - + + + {isFarmSelected && ( + + + + + + {farm?.b_name_farm ?? "Overzicht"} + + {farmRole && ( + + {farmRole === "owner" + ? "Eigenaar" + : farmRole === "advisor" + ? "Adviseur" + : farmRole === + "researcher" + ? "Onderzoeker" + : "Lid"} + + )} + + + )} - - - {fertilizersLink ? ( - - - - Meststoffen - - + + + + + Kalender + {!isCalendarOpen && ( + + {selectedCalendar === "all" + ? "Alle jaren" + : selectedCalendar} + + )} + + + + + + {calendarSelection?.map((item) => { + // Construct the new URL with the selected calendar + const newUrl = + location.pathname.replace( + /\/(\d{4}|all)/, + `/${item}`, + ) + return ( + + + setCalendar( + item, + ) + } + > + + + {item === + "all" + ? "Alle jaren" + : item} + + {selectedCalendar === + item && ( + + )} + + + + ) + })} + + + + ) : ( - - - - Meststoffen - - + + + + + + + Kalender + + + + + Selecteer een bedrijf om de kalender te + gebruiken + + + )} - - {/* - - - - Stal & dieren + + {fieldsLink ? ( + + + + Percelen - */} - - - + ) : ( + + + + + + Percelen + + + + + Selecteer een bedrijf om uw percelen te + beheren + + + )} + + + {rotationLink ? ( + + + + Bouwplan + + + ) : ( + + + + + + Bouwplan + + + + + Selecteer een bedrijf om het bouwplan te + beheren + + + )} + + + {fertilizersLink ? ( + + + + Meststoffen + + + ) : ( + + + + + + Meststoffen + + + + + Selecteer een bedrijf om meststoffen te + beheren + + + )} + + + + + ) } diff --git a/fdm-app/app/routes/farm._index.tsx b/fdm-app/app/routes/farm._index.tsx index af935c12b..7ee0d4ee8 100644 --- a/fdm-app/app/routes/farm._index.tsx +++ b/fdm-app/app/routes/farm._index.tsx @@ -1,5 +1,15 @@ import { getFarms } from "@svenvw/fdm-core" -import { CheckIcon, House, MapIcon, PlusCircle, PlusIcon } from "lucide-react" +import { + ArrowRight, + Check, + House, + Layers, + LifeBuoy, + Map, + Mountain, + Plus, + PlusCircle, +} from "lucide-react" import { type LoaderFunctionArgs, type MetaFunction, @@ -33,7 +43,7 @@ export const meta: MetaFunction = () => { { title: `Bedrijf | ${clientConfig.name}` }, { name: "description", - content: "Selecteer een bedrijf.", + content: "Beheer uw landbouwbedrijf en percelen.", }, ] } @@ -79,6 +89,27 @@ export async function loader({ request }: LoaderFunctionArgs) { } } +function SupportNote() { + return ( +
+ + + Hulp nodig of vragen? Neem contact op via{" "} + + +
+ ) +} + /** * Renders the user interface for farm management. * @@ -98,134 +129,144 @@ export default function AppIndex() { farmOptions={loaderData.farmOptions} /> -
+
{loaderData.farms.length === 0 ? ( -
- -
- - - - - - Nieuw bedrijf aanmaken - - - - Start met het aanmaken van je bedrijf en - voeg je percelen toe. - - - -

- Een bedrijf vormt de basis voor al je - analyses en adviezen. Krijg toegang tot: -

-
    -
  • - - - Toegang tot de{" "} - Stikstofbalans,{" "} - Bemestingsadvies en{" "} - Gebruiksruimte. - -
    • -
  • - - - Beheer van meerdere jaren voor - een compleet overzicht. - -
    • -
  • - - - Een uitgebreide lijst van - meststoffen die je zelf kunt - aanpassen en uitbreiden. - -
    • -
  • - - - De mogelijkheid om je adviseur - toegang te geven tot je - bedrijfsgegevens. - -
    • -
- - - - - - - - - - - Verken de Atlas - - - - Bekijk percelen op de kaart en ontdek - gedetailleerde informatie. - - - -

- De Atlas is een handige tool om percelen - te analyseren, zelfs zonder een eigen - bedrijf. Ontdek bijvoorbeeld: -

-
    -
  • - - - De volledige teelthistorie van - percelen tot 2009. - -
    • -
  • - - - Of een perceel in een gebied met - beperkingen voor de - gebruiksruimte valt. - -
    • -
  • - - - Een inschatting van de - bodemtextuur en het - grondwaterpeil. - -
    • -
- - - - - + + Maak een bedrijf aan + + + + + + + + +
+ +
+ + Atlas verkennen + + + Analyseer percelen op basis van + openbare data, bodemkenmerken en + historie. + + + +
    +
  • + + + Percelen:{" "} + Gewashistorie (BRP) en + kenmerken van alle percelen + in Nederland sinds 2009. + +
    • +
  • + + + Hoogtekaart:{" "} + Gedetailleerde AHN4-data + voor inzicht in het + microreliëf van percelen. + +
    • +
  • + + + Bodemkaart: Bekijk de + Bodemkaart van Nederland en + leer meer over uw bodem. + +
    • +
+ + + + + +
+
) : ( @@ -233,182 +274,211 @@ export default function AppIndex() { -
-
- {loaderData.farms.map((farm) => ( - - - - -
-
- -
- {farm.b_name_farm} -
-
- {farm.roles.map( - (role) => ( - - {role === - "owner" - ? "Eigenaar" - : role === - "advisor" - ? "Adviseur" - : role === - "researcher" - ? "Onderzoeker" - : "Onbekend"} - - ), - )} -
- - - - -
-
-

Adres:

- {farm.b_address_farm ? ( -

- { - farm.b_address_farm - } -

- ) : ( -

- {"Onbekend"} -

- )} -
- -
-

Postcode:

- {farm.b_postalcode_farm ? ( -

- { - farm.b_postalcode_farm - } -

- ) : ( -

- {"Onbekend"} -

- )} -
-
-

KvK-nummer:

- {farm.b_businessid_farm ? ( -

- { - farm.b_businessid_farm - } -

- ) : ( -

- {"Onbekend"} -

- )} -
-
- - - - Selecteer → - - - - - ))} +
+ {loaderData.farms.map((farm) => ( - -
- +
+
+
+ +
+
+ + {farm.b_name_farm} + +
+ {farm.roles.map( + (role) => ( + + {role === + "owner" + ? "Eigenaar" + : role === + "advisor" + ? "Adviseur" + : "Lid"} + + ), + )} +
+
- Nieuw bedrijf - - +
- -

- Maak een nieuw bedrijf aan en - beheer je percelen, gewassen en - meststoffen. -

-

- Hiermee kun je dan voor dit - bedrijf de Nutriëntenbalans, - Bemestingsadvies en - Gebruiksruimte gaan gebruiken. -

+ +
+
+
+ Adres +
+
+ {farm.b_address_farm || + "Onbekend"} +
+
+
+
+ Postcode +
+
+ {farm.b_postalcode_farm || + "Onbekend"} +
+
+
+
+ KvK +
+
+ {farm.b_businessid_farm || + "Onbekend"} +
+
+
- - - Naar nieuw Bedrijf → + + + Selecteer bedrijf{" "} + - + - - - -
- -
- Atlas + +
+ +
+ Nieuw bedrijf + + Voeg een extra bedrijf toe aan uw + account. + + + + +
+ + +
+ + + +
+
+ +
+ + Percelen - - - -

- Bekijk alle percelen op de kaart - en selecteer een perceel voor - meer details, zoals - gewashistorie. -

- - - - Naar Atlas → - - - - -
+
+ + + Bekijk de teelthistorie en ruimtelijke + kenmerken van alle percelen in + Nederland. + + + + Naar percelen{" "} + + + + + + + + + +
+
+ +
+ + Hoogtekaart + +
+ + + Inzage in het Actueel Hoogtebestand + Nederland (AHN) voor gedetailleerde + hoogte-informatie. + + + + Naar hoogtekaart{" "} + + + + + + + + + +
+
+ +
+ + Bodemkaart + +
+ + + Raadpleeg de landelijke bodemkaart voor + informatie over bodemtype en + grondwatertrappen. + + + + Naar bodemkaart{" "} + + + + +
+ )}
From e4f5aa6f5bedc1e9f55c86d8f29d04822d1c5b75 Mon Sep 17 00:00:00 2001 From: SvenVw <37927107+SvenVw@users.noreply.github.com> Date: Wed, 11 Feb 2026 13:51:24 +0100 Subject: [PATCH 2/5] fix: shadow import --- fdm-app/app/routes/farm._index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fdm-app/app/routes/farm._index.tsx b/fdm-app/app/routes/farm._index.tsx index 7ee0d4ee8..9348ecc53 100644 --- a/fdm-app/app/routes/farm._index.tsx +++ b/fdm-app/app/routes/farm._index.tsx @@ -5,7 +5,7 @@ import { House, Layers, LifeBuoy, - Map, + MapIcon, Mountain, Plus, PlusCircle, @@ -399,7 +399,7 @@ export default function AppIndex() {
- +
Percelen From dcb60a380b988049c4e3c2e439b7aa713d6e2b0f Mon Sep 17 00:00:00 2001 From: SvenVw <37927107+SvenVw@users.noreply.github.com> Date: Wed, 11 Feb 2026 13:52:49 +0100 Subject: [PATCH 3/5] fix: typo --- fdm-app/app/routes/farm._index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fdm-app/app/routes/farm._index.tsx b/fdm-app/app/routes/farm._index.tsx index 9348ecc53..11e5cdfe2 100644 --- a/fdm-app/app/routes/farm._index.tsx +++ b/fdm-app/app/routes/farm._index.tsx @@ -151,7 +151,7 @@ export default function AppIndex() {
- Bedrijf aamaken + Bedrijf aanmaken Beheer uw percelen en bereken @@ -184,7 +184,7 @@ export default function AppIndex() {
  • - Gebruikruimte: Houd + Gebruiksruimte: Houd uw gebruiksruimte voor stikstof, dierlijke mest en fosfaat in de gaten. From 5f66416873ee9ae9d1218f8fa5546a2554ae4776 Mon Sep 17 00:00:00 2001 From: SvenVw <37927107+SvenVw@users.noreply.github.com> Date: Wed, 11 Feb 2026 13:54:10 +0100 Subject: [PATCH 4/5] fix: role mapping --- fdm-app/app/routes/farm._index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/fdm-app/app/routes/farm._index.tsx b/fdm-app/app/routes/farm._index.tsx index 11e5cdfe2..ec696578c 100644 --- a/fdm-app/app/routes/farm._index.tsx +++ b/fdm-app/app/routes/farm._index.tsx @@ -317,7 +317,10 @@ export default function AppIndex() { : role === "advisor" ? "Adviseur" - : "Lid"} + : role === + "researcher" + ? "Onderzoeker" + : "Lid"} ), )} From 6412a2b4c0225b3144e17d1431e8989485f6cc47 Mon Sep 17 00:00:00 2001 From: SvenVw <37927107+SvenVw@users.noreply.github.com> Date: Wed, 11 Feb 2026 14:12:31 +0100 Subject: [PATCH 5/5] nitpicks --- .../app/components/blocks/sidebar/apps.tsx | 26 ++++++++++++------- fdm-app/app/routes/farm._index.tsx | 2 +- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/fdm-app/app/components/blocks/sidebar/apps.tsx b/fdm-app/app/components/blocks/sidebar/apps.tsx index 621f90802..c7d41c959 100644 --- a/fdm-app/app/components/blocks/sidebar/apps.tsx +++ b/fdm-app/app/components/blocks/sidebar/apps.tsx @@ -127,15 +127,23 @@ export function SidebarApps() { ) : ( - - - - Atlas - - + + + + + + Atlas + + + + + Atlas is niet beschikbaar tijdens + het aanmaken van een bedrijf + + )} diff --git a/fdm-app/app/routes/farm._index.tsx b/fdm-app/app/routes/farm._index.tsx index ec696578c..2a4c50613 100644 --- a/fdm-app/app/routes/farm._index.tsx +++ b/fdm-app/app/routes/farm._index.tsx @@ -391,7 +391,7 @@ export default function AppIndex() {