Enhance Fertilizer System: Catalog, UI, and Test Updates

.changeset/bright-buckets-rush.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Adapt function `addFertilizerToCatalogue` to add custom fertilizers for a farm

.changeset/chubby-bushes-burn.md

@@ -0,0 +1,6 @@
+---
+"@svenvw/fdm-core": patch
+"@svenvw/fdm-data": patch
+---
+
+Rename `p_cl_cr` to `p_cl_rt` as the previous name was a typo

.changeset/cute-tires-type.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add page to show the list of fertilizers available on the farm

.changeset/dirty-pumas-cry.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-data": minor
+---
+
+Add function `hashFertilizer` to create hash for fertilizer

.changeset/eleven-dancers-brush.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-data": minor
+---
+
+Add `hashCultivation` to get the hash of a cultivation item

.changeset/forty-parts-bet.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add page to show details of a fertilizer, and if applicable, to update the values

.changeset/funny-dancers-rush.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Add function `updateFertilizerFromCatalogue` to alter properties of custom fertilizer

.changeset/light-rockets-fly.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+When farm is created enable fertilizer catalogue with custom fertilizers for that specific farm

.changeset/red-oranges-drop.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Add to the output of `getFertilizer` and `getFertilizers` the values for `p_type_*` and `p_source`

.changeset/vast-lies-go.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add page to add new fertilizer for a farm

fdm-app/app/components/custom/farm/farm-header.tsx

@@ -20,6 +20,7 @@ import { ChevronDown } from "lucide-react"
 import { NavLink } from "react-router"
 import type {
     FarmOptions,
+    FertilizerOption,
     FieldOptions,
     HeaderAction,
     LayerKey,
@@ -33,6 +34,8 @@ interface FarmHeaderProps {
     b_id: string | undefined
     layerOptions: LayerOptions[]
     layerSelected: LayerKey | undefined
+    fertilizerOptions: FertilizerOption[] | undefined
+    p_id: string | undefined
     action: HeaderAction
 }
 
@@ -43,6 +46,8 @@ export function FarmHeader({
     b_id,
     layerOptions,
     layerSelected,
+    fertilizerOptions,
+    p_id,
     action,
 }: FarmHeaderProps) {
     return (
@@ -178,6 +183,58 @@ export function FarmHeader({
                                     </BreadcrumbItem>
                                 </>
                             ) : null}
+                            {fertilizerOptions &&
+                            fertilizerOptions.length > 0 ? (
+                                <>
+                                    <BreadcrumbSeparator />
+                                    <BreadcrumbItem className="hidden md:block">
+                                        <BreadcrumbLink
+                                            href={`/farm/${b_id_farm}/fertilizers`}
+                                        >
+                                            Meststof
+                                        </BreadcrumbLink>
+                                    </BreadcrumbItem>
+                                    <BreadcrumbSeparator />
+                                    <BreadcrumbItem>
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger className="flex items-center gap-1">
+                                                {p_id && fertilizerOptions
+                                                    ? (fertilizerOptions.find(
+                                                          (option) =>
+                                                              option.p_id ===
+                                                              p_id,
+                                                      )?.p_name_nl ??
+                                                      "Unknown fertilizer")
+                                                    : "Kies een meststof"}
+                                                <ChevronDown />
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent align="start">
+                                                {fertilizerOptions.map(
+                                                    (option) => (
+                                                        <DropdownMenuCheckboxItem
+                                                            checked={
+                                                                p_id ===
+                                                                option.p_id
+                                                            }
+                                                            key={
+                                                                option.p_name_nl
+                                                            }
+                                                        >
+                                                            <NavLink
+                                                                to={`/farm/${b_id_farm}/fertilizers/${option.p_id}`}
+                                                            >
+                                                                {
+                                                                    option.p_name_nl
+                                                                }
+                                                            </NavLink>
+                                                        </DropdownMenuCheckboxItem>
+                                                    ),
+                                                )}
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    </BreadcrumbItem>
+                                </>
+                            ) : null}
                         </>
                     ) : null}
                 </BreadcrumbList>

fdm-app/app/components/custom/farm/farm.d.ts

@@ -22,6 +22,11 @@ export interface LayerOption {
 
 export type LayerOptions = LayerOption[]
 
+export interface FertilizerOption {
+    p_id: string
+    p_name_nl: string
+}
+
 export interface HeaderAction {
     label: string
     to: string

fdm-app/app/components/custom/fertilizer/column-header.tsx

@@ -0,0 +1,66 @@
+import type { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp />
+            ) : (
+              <ChevronsUpDown />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70" />
+            Oplopend
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70" />
+            Aflopend
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
+            Verberg
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

fdm-app/app/components/custom/fertilizer/columns.tsx

@@ -0,0 +1,118 @@
+import type { ColumnDef } from "@tanstack/react-table"
+import { ArrowRight, Pencil, SquareArrowOutUpRight } from "lucide-react"
+import { DataTableColumnHeader } from "./column-header"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { NavLink } from "react-router-dom"
+import { Badge } from "@/components/ui/badge"
+
+export type Fertilizer = {
+    p_id: string
+    p_name_nl: string
+    p_n_rt?: number | null
+    p_p_rt?: number | null
+    p_k_rt?: number | null
+    p_type_manure?: boolean
+    p_type_compost?: boolean
+    p_type_mineral?: boolean
+    p_eoc?: number | null
+    p_source?: string
+    p_n_wc?: number | null
+    p_om?: number | null
+    p_s_rt?: number | null
+    p_ca_rt?: number | null
+    p_mg_rt?: number | null
+}
+
+export const columns: ColumnDef<Fertilizer>[] = [
+    // {
+    //     accessorKey: "p_id",
+    //     header: "ID",
+    // },
+    {
+        accessorKey: "p_name_nl",
+        header: "Naam",
+    },
+    {
+        accessorKey: "p_n_rt",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="N" />
+        },
+    },
+    {
+        accessorKey: "p_p_rt",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="P2O5" />
+        },
+    },
+    {
+        accessorKey: "p_k_rt",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="K2O" />
+        },
+    },
+    {
+        accessorKey: "p_eoc",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="EOC" />
+        },
+    },
+    {
+        accessorKey: "Type",
+        cell: ({ row }) => {
+            const fertilizer = row.original
+
+            return (
+                <span className="flex items-center gap-2">
+                    {fertilizer.p_type_manure ? (
+                        <Badge
+                            className="bg-amber-600 text-white hover:bg-amber-700"
+                            variant="default"
+                        >
+                            Mest
+                        </Badge>
+                    ) : null}
+                    {fertilizer.p_type_compost ? (
+                        <Badge
+                            className="bg-green-600 text-white hover:bg-green-700"
+                            variant="default"
+                        >
+                            Compost
+                        </Badge>
+                    ) : null}
+                    {fertilizer.p_type_mineral ? (
+                        <Badge
+                            className="bg-blue-600 text-white hover:bg-blue-700"
+                            variant="default"
+                        >
+                            Kunstmest
+                        </Badge>
+                    ) : null}
+                </span>
+            )
+        },
+    },
+    {
+        accessorKey: "Details",
+        cell: ({ row }) => {
+            const fertilizer = row.original
+
+            return (
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger className=" text-sm text-muted-foreground/70">
+                            <NavLink to={`./${fertilizer.p_id}`}>
+                                <ArrowRight className="text-sm" />
+                            </NavLink>
+                        </TooltipTrigger>
+                        <TooltipContent>{`Bekijk details over ${fertilizer.p_name_nl}`}</TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            )
+        },
+    },
+]