Add rotation feature, harvest forms, and fertilizer updates

.changeset/fluffy-sides-like.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Show fertilizer icon in the fields table for fertilizers

.changeset/goofy-results-wait.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add a rotation page that shows per cultivation the details in a table

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

@@ -37,7 +37,12 @@ import {
     FormSchema,
     FormSchemaModify,
 } from "./formschema"
-import type { FertilizerOption } from "./types.d"
+
+export type FertilizerOption = {
+    value: string
+    label: string
+    applicationMethodOptions?: { value: string; label: string }[]
+}
 
 export function FertilizerApplicationForm({
     options,
@@ -153,7 +158,7 @@ export function FertilizerApplicationForm({
     }
 
     return (
-        <RemixFormProvider {...form}>
+        <RemixFormProvider {...(form as any)}>
             <Form
                 id={formId}
                 action={action}

fdm-app/app/components/blocks/fields/columns.tsx

@@ -1,5 +1,12 @@
 import type { ColumnDef } from "@tanstack/react-table"
-import { ArrowUpRightFromSquare, MoreHorizontal } from "lucide-react"
+import {
+    ArrowUpRightFromSquare,
+    Circle,
+    Diamond,
+    MoreHorizontal,
+    Square,
+    Triangle,
+} from "lucide-react"
 import { NavLink } from "react-router-dom"
 import { getCultivationColor } from "~/components/custom/cultivation-colors"
 import { Badge } from "~/components/ui/badge"
@@ -21,9 +28,11 @@ export type FieldExtended = {
         b_lu_name: string
         b_lu_croprotation: string
         b_lu_start: Date
-    }[]
-    fertilizerApplications: {
+    }[]  
+    fertilizers: {
         p_name_nl: string
+        p_id: string
+        p_type: string
     }[]
     a_som_loi: number
     b_soiltype_agr: string
@@ -119,9 +128,9 @@ export const columns: ColumnDef<FieldExtended>[] = [
         enableSorting: true,
         sortingFn: (rowA, rowB, _columnId) => {
             const fertilizerA =
-                rowA.original.fertilizerApplications[0]?.p_name_nl || ""
+                rowA.original.fertilizers[0]?.p_name_nl || ""
             const fertilizerB =
-                rowB.original.fertilizerApplications[0]?.p_name_nl || ""
+                rowB.original.fertilizers[0]?.p_name_nl || ""
             return fertilizerA.localeCompare(fertilizerB)
         },
         header: ({ column }) => {
@@ -130,18 +139,28 @@ export const columns: ColumnDef<FieldExtended>[] = [
             )
         },
         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))
+            const fertilizers = row.original.fertilizers
 
             return (
                 <div className="flex items-start flex-col space-y-2">
-                    {uniqueFertilizerNames.map((fertilizer) => (
-                        <Badge key={fertilizer} variant="outline">
-                            {fertilizer}
+                    {fertilizers.map((fertilizer) => (
+                        <Badge
+                            key={fertilizer.p_id}
+                            variant="outline"
+                            className="text-muted-foreground gap-1"
+                        >
+                            <span>
+                                {fertilizer.p_type === "manure" ? (
+                                    <Square className="size-3 text-yellow-600 fill-yellow-600" />
+                                ) : fertilizer.p_type === "mineral" ? (
+                                    <Circle className="size-3 text-sky-600 fill-sky-600" />
+                                ) : fertilizer.p_type === "compost" ? (
+                                    <Triangle className="size-3 text-green-600 fill-green-600" />
+                                ) : (
+                                    <Diamond className="size-3 text-gray-600 fill-gray-600" />
+                                )}
+                            </span>
+                            {fertilizer.p_name_nl}
                         </Badge>
                     ))}
                 </div>

fdm-app/app/components/blocks/fields/table.tsx

@@ -117,7 +117,7 @@ export function DataTable<TData extends FieldExtended, TValue>({
     const memoizedData = useMemo(() => {
         return data.map((item) => ({
             ...item,
-            searchTarget: `${item.b_name} ${item.cultivations.map((c) => c.b_lu_name).join(" ")} ${item.fertilizerApplications.map((f) => f.p_name_nl).join(" ")} ${item.b_soiltype_agr}`,
+            searchTarget: `${item.b_name} ${item.cultivations.map((c) => c.b_lu_name).join(" ")} ${item.fertilizers.map((f) => f.p_name_nl).join(" ")} ${item.b_soiltype_agr}`,
         }))
     }, [data])
 
@@ -259,7 +259,7 @@ export function DataTable<TData extends FieldExtended, TValue>({
                     </TooltipProvider>
                 </div>
             </div>
-            <div className="rounded-md border flex-grow relative overflow-x-auto">
+            <div className="rounded-md border grow relative overflow-x-auto">
                 <Table>
                     <TableHeader className="sticky top-0 z-10 bg-background">
                         {table.getHeaderGroups().map((headerGroup) => (