Introduce explicit buffer strip field handling

.changeset/crisp-toys-laugh.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-calculator": minor
+---
+
+Exclude buffer strips from calculating farm balances and set field values to 0

.changeset/huge-cars-peel.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Replace the derived field parameter `b_isproductive` with the stored parameter `b_bufferstrip` so users can set it explicitly.

.changeset/loud-yaks-repeat.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Set for existing fields the b_bufferstrip based on the same logic as in determineIfFieldIsBuffer

.changeset/mobile-ux-improvements.md

@@ -0,0 +1,10 @@
+---
+"fdm-app": patch
+---
+
+Significant UI/UX and mobile responsiveness improvements across the application:
+- Field Overview: Refactored to use a responsive Card layout and simplified labels for better mobile fit.
+- Header: Optimized for small screens with flexible height, truncated labels, and streamlined breadcrumbs.
+- Sidebar: Reduced width and internal spacing on medium screens to reclaim horizontal space for content.
+- Fertilizer Dashboard: Redesigned with a stacked layout for better readability on laptops and added robust text truncation.
+- Layout: Improved global padding and adjusted breakpoints (xl/2xl) to ensure a polished look across mobile, tablet, and desktop.

.changeset/plenty-doors-design.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-calculator": minor
+---
+
+Do not provide nutrient advice for buffer strips by setting the output to 0

.changeset/pretty-baboons-ask.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Users can now indicate if a field is a buffer strip. Fields marked as buffer strips are excluded from nitrogen and organic matter balances at the farm level, and their nutrient advice and norms are automatically adjusted to zero. The UI now displays informative messages when calculations are skipped for these fields.

.changeset/rich-rabbits-yell.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-calculator": minor
+---
+
+For buffer strips set the norm values to 0 as they have no 'plaatsingsruimte'

fdm-app/app/components/blocks/balance/buffer-strip-info.tsx

@@ -0,0 +1,30 @@
+import { PanelsRightBottom } from "lucide-react"
+import { Button } from "~/components/ui/button"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "~/components/ui/tooltip"
+
+export function BufferStripInfo() {
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        className="border cursor-default hover:bg-background"
+                        aria-label="Bufferstroken info"
+                    >
+                        <PanelsRightBottom className="h-4 w-4 text-muted-foreground" />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Bufferstroken zijn uitgesloten van de balansberekening</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    )
+}

fdm-app/app/components/blocks/balance/buffer-strip-warning.tsx

@@ -0,0 +1,37 @@
+import { NavLink } from "react-router"
+import { useCalendarStore } from "~/store/calendar"
+import { Button } from "~/components/ui/button"
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card"
+
+export function BufferStripWarning({ b_id }: { b_id: string }) {
+    const calendar = useCalendarStore((state) => state.calendar)
+
+    return (
+        <div className="flex items-center justify-center">
+            <Card className="w-[350px]">
+                <CardHeader>
+                    <CardTitle>Bufferstrook: uitgesloten van balans</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="text-muted-foreground">
+                        <p>
+                            Dit perceel is gemarkeerd als bufferstrook en wordt
+                            daarom niet meegenomen in de balansberekening.
+                        </p>
+                    </div>
+                </CardContent>
+                <CardFooter>
+                    <NavLink to={`../../${calendar}/field/${b_id}/overview`}>
+                        <Button>Naar perceelsinstelling</Button>
+                    </NavLink>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}

fdm-app/app/components/blocks/cultivation/list-plan.tsx

@@ -7,7 +7,7 @@ interface CultivationField {
     b_id: string
     b_name: string
     b_area: number
-    b_isproductive: boolean
+    b_bufferstrip: boolean
 }
 
 interface CultivationPlanItem {

fdm-app/app/components/blocks/farm/farm-content.tsx

@@ -12,10 +12,10 @@ interface FarmContentProps {
 
 export function FarmContent({ sidebarItems, children }: FarmContentProps) {
     return (
-        <div className="space-y-6 px-8 pb-0">
-            <div className="flex flex-col space-y-0 lg:flex-row lg:space-x-4 lg:space-y-0">
+        <div className="space-y-6 px-2 md:px-4 lg:px-6 pb-0">
+            <div className="flex flex-col space-y-6 lg:flex-row lg:space-x-4 xl:space-x-8 lg:space-y-0">
                 {sidebarItems && (
-                    <aside className="lg:w-1/5">
+                    <aside className="lg:w-40 xl:w-48 shrink-0">
                         <SidebarPage items={sidebarItems} />
                     </aside>
                 )}

fdm-app/app/components/blocks/farm/farm-title.tsx

@@ -14,19 +14,21 @@ interface FarmTitleProps {
 
 export function FarmTitle({ title, description, action }: FarmTitleProps) {
     return (
-        <div className="space-y-6 p-10 pb-0">
-            <div className="flex items-center gap-4">
-                <div className="space-y-0.5 ">
-                    <h2 className="text-2xl font-bold tracking-tight">
+        <div className="space-y-6 p-4 md:px-6 md:py-8 pb-0">
+            <div className="flex flex-col xl:flex-row xl:items-center gap-4">
+                <div className="space-y-0.5 min-w-0 flex-1">
+                    <h2 className="text-2xl font-bold tracking-tight truncate xl:whitespace-normal">
                         {title}
                     </h2>
-                    <p className="text-muted-foreground">{description}</p>
+                    <p className="text-muted-foreground wrap-break-word">
+                        {description}
+                    </p>
                 </div>
                 {action && (
                     <div className="ml-auto">
-                        <NavLink to={action.to} className="ml-auto">
-                            <Button>{action.label}</Button>
-                        </NavLink>
+                        <Button asChild>
+                            <NavLink to={action.to}>{action.label}</NavLink>
+                        </Button>
                     </div>
                 )}
             </div>
@@ -37,11 +39,11 @@ export function FarmTitle({ title, description, action }: FarmTitleProps) {
 
 export function FarmTitleSkeleton() {
     return (
-        <div className="space-y-6 p-10 pb-0">
-            <div className="flex items-center gap-4">
-                <div className="space-y-0.5 ">
-                    <Skeleton className="h-8 w-64" />
-                    <Skeleton className="h-5 w-96" />
+        <div className="space-y-6 p-4 md:px-6 md:py-8 pb-0">
+            <div className="flex flex-col xl:flex-row xl:items-center gap-4">
+                <div className="space-y-0.5 min-w-0 flex-1">
+                    <Skeleton className="h-8 w-50 md:w-64" />
+                    <Skeleton className="h-5 w-62.5 md:w-96" />
                 </div>
                 <div className="ml-auto">
                     <Skeleton className="h-10 w-24" />

fdm-app/app/components/blocks/fertilizer-applications/form.tsx

@@ -166,21 +166,24 @@ export function FertilizerApplicationForm({
                 method="post"
             >
                 <fieldset disabled={isSubmitting}>
-                    <div className="grid md:grid-cols-2 items-end gap-x-8 gap-y-4 justify-between">
-                        {/* <Label htmlFor="b_name_farm">Meststof</Label> */}
-                        <div className="flex flex-row items-baseline [&>*]:grow">
-                            <Combobox
-                                options={options}
-                                form={form}
-                                name="p_id"
-                                label={
-                                    <span>
-                                        Meststof
-                                        <span className="text-red-500">*</span>
-                                    </span>
-                                }
-                            />
-                            <div className="py-2 [&.py-2]:grow-0">
+                    <div className="grid grid-cols-1 md:grid-cols-2 items-end gap-x-8 gap-y-4">
+                        <div className="flex flex-row items-baseline min-w-0">
+                            <div className="min-w-0 flex-1">
+                                <Combobox
+                                    options={options}
+                                    form={form}
+                                    name="p_id"
+                                    label={
+                                        <span>
+                                            Meststof
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
+                                        </span>
+                                    }
+                                />
+                            </div>
+                            <div className="py-2 shrink-0 grow-0">
                                 <p className="invisible">&nbsp;</p>
                                 <Tooltip>
                                     <TooltipTrigger asChild>
@@ -190,12 +193,11 @@ export function FertilizerApplicationForm({
                                             className="ml-2"
                                             onClick={handleManageFertilizers}
                                         >
-                                            <Plus />
+                                            <Plus className="size-4" />
                                         </Button>
                                     </TooltipTrigger>
                                     <TooltipContent>
-                                        Voeg een nieuwe meststof toe aan de
-                                        keuzelijst
+                                        Voeg een nieuwe meststof toe
                                     </TooltipContent>
                                 </Tooltip>
                             </div>