+
+
+
+
+
+ )
+}
diff --git a/fdm-app/app/components/blocks/field-map.tsx b/fdm-app/app/components/blocks/field-map.tsx
new file mode 100644
index 000000000..3f89ebfe9
--- /dev/null
+++ b/fdm-app/app/components/blocks/field-map.tsx
@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { Map as MapGL, Source, Layer } from 'react-map-gl'
+import type { FeatureCollection } from "geojson";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import geojsonExtent from '@mapbox/geojson-extent'
+
+interface FieldMapType {
+ b_geojson: FeatureCollection
+ mapboxToken: string
+}
+
+const brpFieldsFillStyle = {
+ id: 'brp-fields-fill',
+ type: 'fill',
+ paint: {
+ 'fill-color': "#93c5fd",
+ 'fill-opacity': 0.5,
+ 'fill-outline-color': "#1e3a8a"
+ }
+};
+const brpFieldsLineStyle = {
+ id: 'brp-fields-line',
+ type: 'line',
+ paint: {
+ 'line-color': "#1e3a8a",
+ 'line-opacity': 0.8,
+ 'line-width': 2,
+ }
+};
+
+
+export function FieldMap(props: FieldMapType) {
+ const mapboxToken = props.mapboxToken
+
+ // Convert geometry to geoJSON
+ const bounds = useMemo(() => {
+ try {
+ return geojsonExtent(props.b_geojson);
+ } catch (error) {
+ console.error('Failed to calculate bounds:', error);
+ return [-180, -90, 180, 90]; // Default world bounds
+ }
+ }, [props.b_geojson]);
+
+ return (
+
+
+
+ )
+}
+
diff --git a/fdm-app/app/components/blocks/fields.tsx b/fdm-app/app/components/blocks/fields.tsx
new file mode 100644
index 000000000..0befbaac9
--- /dev/null
+++ b/fdm-app/app/components/blocks/fields.tsx
@@ -0,0 +1,153 @@
+import { Form, useNavigation } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import type { FeatureCollection } from "geojson";
+
+// Components
+import { Button } from "@/components/ui/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast"
+import { FieldMap } from "@/components/blocks/field-map";
+import { ClientOnly } from "remix-utils/client-only";
+import { Skeleton } from "../ui/skeleton";
+
+
+export interface soilTypesListType {
+ value: string
+ label: string
+}
+
+export interface fieldType {
+ /** Mapbox API token for map rendering */
+ mapboxToken: string;
+ /** Unique identifier for the field */
+ b_id: string
+ /** Display name of the field */
+ b_name: string
+ /** Area of the field in hectares */
+ b_area: number | null
+ /** Agricultural soil type classification */
+ b_soiltype_agr: string | null
+ b_geojson: FeatureCollection
+ action: string
+}
+
+export interface fieldsType {
+ fields: fieldType[]
+ mapboxToken: string
+ action: string
+}
+
+export function Fields(props: fieldsType) {
+ return (
+
+
+
+
+ {props.fields.map(field => {
+ return (
+
+ )
+}
+
+function Field(props: fieldType) {
+ const navigation = useNavigation()
+ const { toast } = useToast()
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ useEffect(() => {
+ if (navigation.state === "idle" && isSubmitting) {
+ toast({
+ title: "Perceel is bijgewerkt",
+ description: "",
+ });
+ setIsSubmitting(false);
+ }
+ }, [navigation.state, isSubmitting, toast])
+
+ function handleSubmit() {
+ setIsSubmitting(true);
+ }
+
+ return (
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
diff --git a/fdm-app/app/components/blocks/missing-farm.tsx b/fdm-app/app/components/blocks/missing-farm.tsx
new file mode 100644
index 000000000..f46722ffb
--- /dev/null
+++ b/fdm-app/app/components/blocks/missing-farm.tsx
@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button";
+
+export default function MissingFarm() {
+
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/fdm-app/app/components/custom/multi-select.tsx b/fdm-app/app/components/custom/multi-select.tsx
new file mode 100644
index 000000000..d04b6a0a0
--- /dev/null
+++ b/fdm-app/app/components/custom/multi-select.tsx
@@ -0,0 +1,385 @@
+// https://github.com/sersavan/shadcn-multi-select-component
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+ CheckIcon,
+ XCircle,
+ ChevronDown,
+ XIcon,
+ WandSparkles,
+} from "lucide-react";
+
+import { cn } from "~/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from "@/components/ui/command";
+
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+const multiSelectVariants = cva(
+ "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+ secondary:
+ "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ inverted: "inverted",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+);
+
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps
+ extends React.ButtonHTMLAttributes
+
+
+ + Het lijkt erop dat je nog geen bedrijf hebt :( +
++ Gebruik onze wizard en maak snel je eigen bedrijf aan +
++ De meeste gebruikers lukt het binnen 6 minuten. +
+
+
+ Selecteer alles
+
+
+ {option.icon && (
+
+ {selectedValues.length > 0 && (
+ <>
+
+ Wissen
+
+ setIsPopoverOpen(false)}
+ className="flex-1 justify-center cursor-pointer max-w-full"
+ >
+ Sluiten
+
+
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+ {children}
+
+
+ {children}
+
+ )
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ )
+ }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ {children}
+
+
+ {showIcon && (
+
+ )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ )
+}
+
+export async function action({
+ request,
+}: ActionFunctionArgs) {
+
+ const session = await getSession(
+ request.headers.get("Cookie")
+ );
+
+ const form = await request.formData()
+ const firstname = String(form.get("firstname"))
+ const surname = String(form.get("surname"))
+ const email = String(form.get("email"))
+
+ // sign up user
+ const session_id = await signUpUser(fdm, firstname, surname, email)
+ session.set("session_id", session_id)
+
+ // Login succeeded, send them to the home page.
+ return redirect("../app", {
+ headers: {
+ "Set-Cookie": await commitSession(session),
+ },
+ });
+
+}
\ No newline at end of file
diff --git a/fdm-app/app/services/fdm.server.tsx b/fdm-app/app/services/fdm.server.tsx
new file mode 100644
index 000000000..8b31ce6a9
--- /dev/null
+++ b/fdm-app/app/services/fdm.server.tsx
@@ -0,0 +1,36 @@
+// import postgres from 'postgres'
+import { drizzle } from 'drizzle-orm/postgres-js'
+import { migrate } from 'drizzle-orm/postgres-js/migrator'
+import { fdmSchema as schema } from '@svenvw/fdm-core'
+import {extendFertilizersCatalogue} from '@svenvw/fdm-data'
+
+// Get credentials to connect to db
+const host = process.env.POSTGRES_HOST ??
+ (() => { throw new Error('POSTGRES_HOST environment variable is required') })()
+const port = Number(process.env.POSTGRES_PORT) ||
+ (() => { throw new Error('POSTGRES_PORT environment variable is required') })()
+const user = process.env.POSTGRES_USER ??
+ (() => { throw new Error('POSTGRES_USER environment variable is required') })()
+const password = process.env.POSTGRES_PASSWORD ??
+ (() => { throw new Error('POSTGRES_PASSWORD environment variable is required') })()
+const database = process.env.POSTGRES_DB ??
+ (() => { throw new Error('POSTGRES_DB environment variable is required') })()
+const migrationsFolderPath = 'node_modules/@svenvw/fdm-core/dist/db/migrations'
+
+export const fdm = drizzle({
+ connection : {
+ user : user,
+ password : password,
+ host : host,
+ port : port,
+ database : database
+ },
+ logger: false,
+ schema: schema
+})
+
+// Run migration
+await migrate(fdm, { migrationsFolder: migrationsFolderPath, migrationsSchema: 'fdm-migrations' })
+
+// Add SRM fertilzers to catalogue
+await extendFertilizersCatalogue(fdm, 'srm')
\ No newline at end of file
diff --git a/fdm-app/app/services/session.server.ts b/fdm-app/app/services/session.server.ts
new file mode 100644
index 000000000..9d49fa38a
--- /dev/null
+++ b/fdm-app/app/services/session.server.ts
@@ -0,0 +1,30 @@
+import { createCookieSessionStorage } from "@remix-run/node";
+
+const fdmSessionSecret = process.env.FDM_SESSION_SECRET;
+if (!fdmSessionSecret) {
+ throw new Error("FDM_SESSION_SECRET must be set");
+}
+type SessionData = {
+ session_id: string
+};
+
+type SessionFlashData = {
+ error: string;
+}
+
+const { getSession, commitSession, destroySession } =
+ createCookieSessionStorage
+
+
+
+
+ {/* 
*/}
+
+
+ */}
+ FDM
++ Maak een account aan en krijg toegang tot: +
+
+
+
+
+
+
+
+
+
+ + MINAS2 +
++ Mineralenbalans op bedrijfsniveau +
+
+
+
+
+
+
+ + OS Balans +
++ Opbouw van organische stof per perceel +
+
+
+
+
+
+
+ + Meststofkeuzeadviestool +
++ Integraal bemestingsadvies dat rekening houdt met productie en milieu +
+
+ 
+
+
+