Add farm dashboard, fields table, batch fertilizer route, fuzzysort

.changeset/purple-dryers-rule.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Adds a new farm dashboard page with an overview of the farm and links to apps, data pages, and quick actions.

.changeset/shaggy-snails-tickle.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add a new page to apply a fertilizer application to multiple fields at once.

.changeset/wicked-boats-hope.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add a new page showing an advanced table for the fields of the farm, including searching on field name, cultivations, and fertilizers. It also includes multi‑selection of fields to add a new fertilizer application.

fdm-app/app/components/blocks/fields/column-header.tsx

@@ -0,0 +1,71 @@
+import type { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
+import { Button } from "~/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu"
+import { cn } from "~/lib/utils"
+
+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/blocks/fields/columns.tsx

@@ -0,0 +1,259 @@
+import type { ColumnDef } from "@tanstack/react-table"
+import { MoreHorizontal, ArrowUpRightFromSquare } from "lucide-react"
+import { NavLink } from "react-router-dom"
+import { Badge } from "~/components/ui/badge"
+import { DataTableColumnHeader } from "./column-header"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu"
+import { Button } from "~/components/ui/button"
+import { Checkbox } from "~/components/ui/checkbox"
+import { getCultivationColor } from "~/components/custom/cultivation-colors"
+
+export type FieldExtended = {
+    b_id: string
+    b_name: string
+    cultivations: {
+        b_lu_name: string
+        b_lu_croprotation: string
+        b_lu_start: Date
+    }[]
+    fertilizerApplications: {
+        p_name_nl: string
+    }[]
+    a_som_loi: number
+    b_soiltype_agr: string
+    b_area: number
+}
+
+export const columns: ColumnDef<FieldExtended>[] = [
+    {
+        id: "select",
+        header: ({ table }) => (
+            <Checkbox
+                checked={
+                    table.getIsAllPageRowsSelected() ||
+                    (table.getIsSomePageRowsSelected() && "indeterminate")
+                }
+                onCheckedChange={(value) =>
+                    table.toggleAllPageRowsSelected(!!value)
+                }
+                aria-label="Select all"
+            />
+        ),
+        cell: ({ row }) => (
+            <Checkbox
+                checked={row.getIsSelected()}
+                onCheckedChange={(value) => row.toggleSelected(!!value)}
+                aria-label="Select row"
+            />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+    },
+    {
+        accessorKey: "b_name",
+        enableSorting: true,
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="Naam" />
+        },
+        cell: ({ row }) => {
+            const field = row.original
+
+            return (
+                <NavLink
+                    to={`./${field.b_id}`}
+                    className="group flex items-center hover:underline w-fit"
+                >
+                    {field.b_name}
+                    <ArrowUpRightFromSquare className="ml-2 h-4 w-4 text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity" />
+                </NavLink>
+            )
+        },
+    },
+    {
+        accessorKey: "cultivations",
+        enableSorting: true,
+        sortingFn: (rowA, rowB, columnId) => {
+            const cultivationA = rowA.original.cultivations[0]?.b_lu_name || ""
+            const cultivationB = rowB.original.cultivations[0]?.b_lu_name || ""
+            return cultivationA.localeCompare(cultivationB)
+        },
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="Gewassen" />
+        },
+        cell: ({ row }) => {
+            const field = row.original
+
+            const cultivationsSorted = [...field.cultivations].sort((a, b) =>
+                a.b_lu_name.localeCompare(b.b_lu_name),
+            )
+
+            return (
+                <div className="flex items-start flex-col space-y-2">
+                    {cultivationsSorted.map((cultivation, idx) => (
+                        <Badge
+                            key={`${cultivation.b_lu_name}-${idx}`}
+                            style={{
+                                backgroundColor: getCultivationColor(
+                                    cultivation.b_lu_croprotation,
+                                ),
+                            }}
+                            className="text-white"
+                            variant="default"
+                        >
+                            {cultivation.b_lu_name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+        enableHiding: true, // Enable hiding for mobile
+    },
+    {
+        accessorKey: "fertilizerApplications",
+        enableSorting: true,
+        sortingFn: (rowA, rowB, columnId) => {
+            const fertilizerA =
+                rowA.original.fertilizerApplications[0]?.p_name_nl || ""
+            const fertilizerB =
+                rowB.original.fertilizerApplications[0]?.p_name_nl || ""
+            return fertilizerA.localeCompare(fertilizerB)
+        },
+        header: ({ column }) => {
+            return (
+                <DataTableColumnHeader column={column} title="Bemesting met:" />
+            )
+        },
+        cell: ({ row }) => {
+            const field = row.original
+
+            const uniqueFertilizerNames = [...field.fertilizerApplications]
+                .map((app) => app.p_name_nl)
+                .filter((name, index, self) => self.indexOf(name) === index)
+                .sort((a, b) => a.localeCompare(b))
+
+            return (
+                <div className="flex items-start flex-col space-y-2">
+                    {uniqueFertilizerNames.map((fertilizer) => (
+                        <Badge key={fertilizer} variant="outline">
+                            {fertilizer}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+        enableHiding: true, // Enable hiding for mobile
+    },
+    {
+        accessorKey: "a_som_loi",
+        enableSorting: true,
+        sortingFn: "alphanumeric",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="OS" />
+        },
+        enableHiding: true, // Enable hiding for mobile
+        cell: ({ row }) => {
+            const field = row.original
+            return (
+                <p className="text-muted-foreground">
+                    {`${field.a_som_loi.toFixed(2)} %`}
+                </p>
+            )
+        },
+    },
+    {
+        accessorKey: "b_soiltype_agr",
+        enableSorting: true,
+        sortingFn: "alphanumeric",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="Bodemtype" />
+        },
+        enableHiding: true, // Enable hiding for mobile
+        cell: ({ row }) => {
+            const field = row.original
+            return (
+                <p className="text-muted-foreground">{field.b_soiltype_agr}</p>
+            )
+        },
+    },
+    {
+        accessorKey: "b_area",
+        enableSorting: true,
+        sortingFn: "alphanumeric",
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="Oppervlakte" />
+        },
+        enableHiding: true, // Enable hiding for mobile
+        cell: ({ row }) => {
+            const field = row.original
+            return (
+                <p className="text-muted-foreground">
+                    {field.b_area < 0.1
+                        ? "< 0.1 ha"
+                        : `${field.b_area.toFixed(1)} ha`}
+                </p>
+            )
+        },
+    },
+    {
+        id: "actions",
+        enableHiding: false,
+        cell: ({ row }) => {
+            const field = row.original
+
+            return (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                            <span className="sr-only">Open menu</span>
+                            <MoreHorizontal />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        {/* <DropdownMenuLabel>Acties</DropdownMenuLabel>
+                        <DropdownMenuItem
+                            onClick={() =>
+                                navigator.clipboard.writeText(field.b_id)
+                            }
+                        >
+                            Kopieer perceel id
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator /> */}
+                        <DropdownMenuLabel>Gegevens</DropdownMenuLabel>
+                        <DropdownMenuItem>
+                            <NavLink to={`./${field.b_id}`}>Overzicht</NavLink>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                            <NavLink to={`./${field.b_id}/cultivation`}>
+                                Gewassen
+                            </NavLink>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                            <NavLink to={`./${field.b_id}/fertilizer`}>
+                                Bemesting
+                            </NavLink>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                            <NavLink to={`./${field.b_id}/soil`}>Bodem</NavLink>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                            <NavLink to={`./${field.b_id}/atlas`}>
+                                Kaart
+                            </NavLink>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                            <NavLink to={`./${field.b_id}/delete`}>
+                                Verwijderen
+                            </NavLink>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )
+        },
+    },
+]