From d9ab3cda82f3af44b644a188ee8272f1fdec2e40 Mon Sep 17 00:00:00 2001
From: SvenVw <37927107+SvenVw@users.noreply.github.com>
Date: Wed, 11 Mar 2026 11:29:10 +0100
Subject: [PATCH 01/23] feat: improved the ui/ux and code quality of the
fertilizers pages
---
.changeset/fertilizer-improvements.md | 19 +
.changeset/tall-singers-stand.md | 16 +
.../app/components/blocks/farm/farm-title.tsx | 4 +-
.../components/blocks/fertilizer/columns.tsx | 267 +++++++--
.../app/components/blocks/fertilizer/form.tsx | 521 ++++++++++++------
.../fertilizer/new-custom-fertilizer-page.tsx | 136 -----
.../blocks/fertilizer/new-fertilizer-page.tsx | 75 +--
.../components/blocks/fertilizer/table.tsx | 123 ++++-
.../app/components/blocks/fertilizer/utils.ts | 65 +++
.../farm.$b_id_farm.fertilizers.$p_id.tsx | 105 ++--
.../farm.$b_id_farm.fertilizers._index.tsx | 5 +-
.../farm.$b_id_farm.fertilizers.new.$p_id.tsx | 155 ++----
...farm.$b_id_farm.fertilizers.new._index.tsx | 300 +++++++++-
...farm.$b_id_farm.fertilizers.new.custom.tsx | 194 +++----
.../farm.$b_id_farm.fertilizers.new.tsx | 12 +-
15 files changed, 1297 insertions(+), 700 deletions(-)
create mode 100644 .changeset/fertilizer-improvements.md
create mode 100644 .changeset/tall-singers-stand.md
delete mode 100644 fdm-app/app/components/blocks/fertilizer/new-custom-fertilizer-page.tsx
create mode 100644 fdm-app/app/components/blocks/fertilizer/utils.ts
diff --git a/.changeset/fertilizer-improvements.md b/.changeset/fertilizer-improvements.md
new file mode 100644
index 000000000..5222393b5
--- /dev/null
+++ b/.changeset/fertilizer-improvements.md
@@ -0,0 +1,19 @@
+# @nmi-agro/fdm-app
+
+## Fertilizer Pages UI/UX & Code Quality Improvements
+
+### UI/UX Enhancements
+
+- **Fertilizer Table:** Added all nutrient columns (DS, OS, MgO, CaO, Na₂O, SO₃, trace elements, and N-efficiency). Columns are hidden by default and manageable via a new "Kolommen" dropdown.
+- **Searchable Catalogue:** Replaced the card grid with a searchable catalogue picker. It distinguishes between standard and custom fertilizers with subtle tagging and uses color-coded RVO category badges. The search index now includes RVO category names.
+- **Modernized Form:** Migrated the fertilizer form to the latest `Field` component system. Implemented a 3-column grid for numeric fields and optimized the application method section.
+- **Improved Sidebar ("Samenvatting"):** Added a professional summary sidebar that calculates "Werkzame N" live and displays key analytics in a clean monochromatic format.
+- **Mobile Optimizations:** Added a smart floating action bar on mobile that hides when the main save button is visible. Reduced excessive padding across all fertilizer pages.
+- **Better Navigation:** Entire table rows are now clickable. Fixed the "Make a copy" feature (now "Gebruik als sjabloon") with reliable pathing and friendly guidance.
+
+### Code Quality
+
+- **Refactoring:** Extracted shared logic for defaults and payload building into `utils.ts`.
+- **Component Consolidation:** Merged duplicate form pages into a single reusable `FarmNewFertilizerBlock`.
+- **Server/Client Safety:** Correctly separated server-side action logic from client-side utility helpers to prevent build errors.
+- **Consistency:** Aligned typography, card styling, and badge usage with the rest of the application.
diff --git a/.changeset/tall-singers-stand.md b/.changeset/tall-singers-stand.md
new file mode 100644
index 000000000..49b7052ab
--- /dev/null
+++ b/.changeset/tall-singers-stand.md
@@ -0,0 +1,16 @@
+---
+"@nmi-agro/fdm-app": minor
+---
+
+Improved the UI/UX and code quality of the fertilizers pages with the following:
+
+- **Fertilizer Table:** Added all nutrient columns (DS, OS, MgO, CaO, Na₂O, SO₃, trace elements, and N-efficiency). Columns are hidden by default and manageable via a new "Kolommen" dropdown.
+- **Searchable Catalogue:** Replaced the card grid with a searchable catalogue picker. It distinguishes between standard and custom fertilizers with subtle tagging and uses color-coded RVO category badges. The search index now includes RVO category names.
+- **Modernized Form:** Migrated the fertilizer form to the latest `Field` component system. Implemented a 3-column grid for numeric fields and optimized the application method section.
+- **Improved Sidebar ("Samenvatting"):** Added a professional summary sidebar that calculates "Werkzame N" live and displays key analytics in a clean monochromatic format.
+- **Mobile Optimizations:** Added a smart floating action bar on mobile that hides when the main save button is visible. Reduced excessive padding across all fertilizer pages.
+- **Better Navigation:** Entire table rows are now clickable. Fixed the "Make a copy" feature (now "Gebruik als sjabloon") with reliable pathing and friendly guidance.
+- **Refactoring:** Extracted shared logic for defaults and payload building into `utils.ts`.
+- **Component Consolidation:** Merged duplicate form pages into a single reusable `FarmNewFertilizerBlock`.
+- **Server/Client Safety:** Correctly separated server-side action logic from client-side utility helpers to prevent build errors.
+- **Consistency:** Aligned typography, card styling, and badge usage with the rest of the application.
diff --git a/fdm-app/app/components/blocks/farm/farm-title.tsx b/fdm-app/app/components/blocks/farm/farm-title.tsx
index 6f9e56731..8b3a2ddf0 100644
--- a/fdm-app/app/components/blocks/farm/farm-title.tsx
+++ b/fdm-app/app/components/blocks/farm/farm-title.tsx
@@ -14,7 +14,7 @@ interface FarmTitleProps {
export function FarmTitle({ title, description, action }: FarmTitleProps) {
return (
-
+
@@ -39,7 +39,7 @@ export function FarmTitle({ title, description, action }: FarmTitleProps) {
export function FarmTitleSkeleton() {
return (
-
+
diff --git a/fdm-app/app/components/blocks/fertilizer/columns.tsx b/fdm-app/app/components/blocks/fertilizer/columns.tsx
index 4d0194216..0096d1298 100644
--- a/fdm-app/app/components/blocks/fertilizer/columns.tsx
+++ b/fdm-app/app/components/blocks/fertilizer/columns.tsx
@@ -1,6 +1,5 @@
import type { ColumnDef } from "@tanstack/react-table"
-import { ArrowRight } from "lucide-react"
-import { NavLink } from "react-router-dom"
+import { Pencil } from "lucide-react"
import { Badge } from "~/components/ui/badge"
import {
Tooltip,
@@ -13,53 +12,270 @@ import { DataTableColumnHeader } from "./column-header"
export type Fertilizer = {
p_id: string
p_name_nl: string
+ p_dm?: number | null
+ p_density?: number | null
+ p_om?: number | null
p_n_rt?: number | null
p_p_rt?: number | null
p_k_rt?: number | null
+ p_mg_rt?: number | null
+ p_ca_rt?: number | null
+ p_na_rt?: number | null
+ p_s_rt?: number | null
+ p_cu_rt?: number | null
+ p_zn_rt?: number | null
+ p_b_rt?: number | null
+ p_mn_rt?: number | null
+ p_ni_rt?: number | null
+ p_fe_rt?: number | null
+ p_mo_rt?: number | null
+ p_co_rt?: number | null
+ p_as_rt?: number | null
+ p_cd_rt?: number | null
+ p_cr_rt?: number | null
+ p_cr_vi?: number | null
+ p_pb_rt?: number | null
+ p_hg_rt?: number | null
+ p_cl_rt?: number | null
+ p_eoc?: number | null
+ p_n_wc?: number | null
p_type_rvo?: string | null
p_type_rvo_label?: string | null
p_type?: "manure" | "compost" | "mineral" | null
- 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
+ is_custom?: boolean
+}
+
+function formatNumber(value: number | null | undefined): string {
+ if (value === null || value === undefined) return "-"
+ return new Intl.NumberFormat("nl-NL", {
+ maximumFractionDigits: 2,
+ }).format(value)
+}
+
+function formatPercent(value: number | null | undefined): string {
+ if (value === null || value === undefined) return "-"
+ return new Intl.NumberFormat("nl-NL", {
+ style: "percent",
+ maximumFractionDigits: 0,
+ }).format(value)
}
export const columns: ColumnDef[] = [
- // {
- // accessorKey: "p_id",
- // header: "ID",
- // },
{
accessorKey: "p_name_nl",
header: "Naam",
+ cell: ({ row }) => {
+ const isCustom = row.original.is_custom
+ return (
+