Implement farm invitation system with pending workflow

.changeset/farm-invitation-app.md

@@ -0,0 +1,9 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add the possibility for users to accept or reject an invitation to a farm, instead of having it automatically. This makes it also possible to invite non-registered users to get access to a farm after signing up.
+
+- Overview page shows pending farm invitations with accept/decline actions
+- Invitation email sent when a user is invited to a farm
+- Farm access settings page handles accept/decline invitation intents

.changeset/farm-invitation-system.md

@@ -0,0 +1,17 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Instead of directly granting roles, `grantRoleToFarm` now creates a pending invitation (7-day expiry) that must be accepted by the target principal. The invitation system has been refactored to be resource-agnostic, so any resource type (farm, field, etc.) can be shared via invitations.
+
+**New generic functions (work for any resource):**
+- `createInvitation` — creates a pending invitation for a resource
+- `acceptInvitation` — accepts a pending invitation and grants the role
+- `declineInvitation` — declines a pending invitation
+- `listPendingInvitationsForPrincipal` — lists pending invitations for a principal across all resources
+- `autoAcceptInvitationsForNewUser` — auto-accepts email-based invitations on email verification
+
+**Farm-specific functions:**
+- `listPendingInvitationsForFarm` — lists active invitations for a farm (requires share permission)
+- `listPendingInvitationsForUser` — lists pending farm invitations for the current user, enriched with farm name and org name
+

.changeset/tall-buckets-occur.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-docs": minor
+---
+
+Add invitations to the page about Authorization

fdm-app/app/components/blocks/access/invitation-form.tsx

@@ -1,8 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { User, Users } from "lucide-react"
 import { useState } from "react"
-import { Form } from "react-router-dom"
+import { Form, useSubmit } from "react-router-dom"
 import { RemixFormProvider, useRemixForm } from "remix-hook-form"
+import isEmail from "validator/lib/isEmail"
 import type { z } from "zod"
 import { AutoComplete } from "~/components/custom/autocomplete"
 import { Button } from "~/components/ui/button"
@@ -31,6 +32,7 @@ type InvitationFormProps = {
 }
 
 export const InvitationForm = ({ principals }: InvitationFormProps) => {
+    const submit = useSubmit()
     const [selectedValue, setSelectedValue] = useState<string>("")
     const form = useRemixForm<z.infer<typeof AccessFormSchema>>({
         mode: "onTouched",
@@ -39,14 +41,26 @@ export const InvitationForm = ({ principals }: InvitationFormProps) => {
             role: "advisor", // Set default role
             intent: "invite_user",
         },
+        submitHandlers: {
+            onValid: (data) => {
+                submit(
+                    {
+                        username: data.username,
+                        role: data.role,
+                        intent: "invite_user",
+                    },
+                    { method: "post" },
+                )
+            },
+        },
     })
 
     // Define icon map for AutoComplete
     const iconMap = { user: User, organization: Users }
 
     return (
         <RemixFormProvider {...form}>
-            <Form method="post">
+            <Form method="post" onSubmit={form.handleSubmit}>
                 <fieldset
                     disabled={form.formState.isSubmitting}
                     className="flex items-center justify-between space-x-4"
@@ -64,8 +78,34 @@ export const InvitationForm = ({ principals }: InvitationFormProps) => {
                                 shouldTouch: true,
                             })
                         }}
-                        emptyMessage="Geen gebruikers gevonden"
+                        emptyMessage={(value) =>
+                            isEmail(value) ? (
+                                <button
+                                    className="w-full cursor-pointer text-center hover:underline"
+                                    onClick={() => {
+                                        form.setValue("username", value)
+                                        // Trigger form submission programmatically
+                                        // This will use the onSubmit handler defined on the Form
+                                        ;(form.handleSubmit as any)({
+                                            preventDefault: () => {},
+                                        })
+                                    }}
+                                    type="button"
+                                >
+                                    Nodig {value} uit voor toegang als{" "}
+                                    {form.getValues("role") === "owner"
+                                        ? "eigenaar"
+                                        : form.getValues("role") === "advisor"
+                                          ? "adviseur"
+                                          : "onderzoeker"}
+                                    .
+                                </button>
+                            ) : (
+                                "Geen gebruikers gevonden. Je kunt ook een e-mailadres invoeren om een uitnodiging te sturen."
+                            )
+                        }
                         placeholder="Zoek naar een gebruiker of organisatie"
+                        allowValuesOutsideList={true}
                         form={form} // Pass the form instance
                         name="username" // Name for remix-hook-form registration
                     />

fdm-app/app/components/blocks/email/farm-invitation.tsx

@@ -0,0 +1,133 @@
+import {
+    Body,
+    Button,
+    Container,
+    Font,
+    Head,
+    Heading,
+    Html,
+    Img,
+    Link,
+    Preview,
+    Section,
+    Text,
+} from "@react-email/components"
+import { Tailwind } from "@react-email/tailwind"
+
+interface FarmInvitationEmailProps {
+    farmName: string
+    inviterName: string
+    targetEmail: string
+    role: string
+    appName: string
+    appBaseUrl: string
+    logoFileName?: string
+    /** If true, renders a "create account" CTA for unregistered users */
+    isUnregistered?: boolean
+}
+
+const roleLabels: Record<string, string> = {
+    owner: "Eigenaar",
+    advisor: "Adviseur",
+    researcher: "Onderzoeker",
+}
+
+export const FarmInvitationEmail = ({
+    farmName,
+    inviterName,
+    targetEmail,
+    role,
+    appName,
+    appBaseUrl,
+    logoFileName = "/fdm-high-resolution-logo-transparent.png",
+    isUnregistered = false,
+}: FarmInvitationEmailProps) => {
+    const logoPath = `${appBaseUrl}${logoFileName}`
+    const roleLabel = roleLabels[role] ?? role
+
+    return (
+        <Html lang="nl">
+            <Head>
+                <Font
+                    fontFamily="Inter"
+                    fallbackFontFamily="sans-serif"
+                    fontWeight={400}
+                    fontStyle="normal"
+                />
+            </Head>
+            <Preview>
+                {`${inviterName} heeft je uitgenodigd voor toegang tot bedrijf ${farmName} in ${appName}.`}
+            </Preview>
+            <Tailwind>
+                <Body className="bg-white my-auto mx-auto font-sans">
+                    <Container className="border border-solid border-[#eaeaea] rounded my-10 mx-auto p-5 w-116.25">
+                        <Section className="mt-7.5">
+                            <Img
+                                src={logoPath}
+                                width="150"
+                                alt={`${appName} Logo`}
+                                className="my-0 mx-auto"
+                            />
+                        </Section>
+                        <Heading className="text-black text-[24px] font-normal text-center p-0 my-7.5 mx-0">
+                            Uitnodiging voor <b>{farmName}</b> in {appName}
+                        </Heading>
+                        <Text className="text-black text-[14px] leading-6">
+                            Hallo {targetEmail},
+                        </Text>
+                        <Text className="text-black text-[14px] leading-6">
+                            {inviterName} heeft je uitgenodigd om toegang te
+                            krijgen tot het bedrijf <b>{farmName}</b> in{" "}
+                            {appName} met de rol <b>{roleLabel}</b>.
+                        </Text>
+                        {isUnregistered ? (
+                            <>
+                                <Text className="text-black text-[14px] leading-6">
+                                    Maak een account aan om de uitnodiging te
+                                    accepteren. Na registratie wordt je toegang
+                                    automatisch verleend.
+                                </Text>
+                                <Section className="mt-8 mb-2 text-center">
+                                    <Button
+                                        href={`${appBaseUrl}/signin`}
+                                        className="bg-[#0070f3] text-white border-solid border-[#0070f3] border-2 rounded mx-6 px-3 py-3 text-[14px] font-semibold no-underline"
+                                    >
+                                        Account aanmaken
+                                    </Button>
+                                </Section>
+                            </>
+                        ) : (
+                            <>
+                                <Text className="text-black text-[14px] leading-6">
+                                    Log in en accepteer of weiger de
+                                    uitnodiging.
+                                </Text>
+                                <Section className="mt-8 mb-2 text-center">
+                                    <Button
+                                        href={`${appBaseUrl}/farm`}
+                                        className="bg-[#0070f3] text-white border-solid border-[#0070f3] border-2 rounded mx-6 px-3 py-3 text-[14px] font-semibold no-underline"
+                                    >
+                                        Bekijk uitnodiging
+                                    </Button>
+                                </Section>
+                                <Section className="mt-4 mb-8 text-center">
+                                    <Link href={`${appBaseUrl}/farm`}>
+                                        of open {appName} om je uitnodigingen te
+                                        bekijken.
+                                    </Link>
+                                </Section>
+                            </>
+                        )}
+                        <Text className="text-black text-[14px] leading-6">
+                            Als je deze uitnodiging niet wilt accepteren, kun je
+                            deze e-mail negeren.
+                        </Text>
+                        <Text className="text-black text-[14px] leading-6 mt-8">
+                            Met vriendelijke groet, <br /> Het {appName} team
+                        </Text>
+                    </Container>
+                </Body>
+            </Tailwind>
+        </Html>
+    )
+}

fdm-app/app/components/blocks/email/invitation.tsx

@@ -2,6 +2,7 @@ import {
     Body,
     Button,
     Container,
+    Font,
     Head,
     Heading,
     Html,
@@ -34,20 +35,15 @@ export const InvitationEmail = ({
 }: InvitationEmailProps) => {
     const logoPath = `${appBaseUrl}${logoFileName}`
 
-    const fontFamily = `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif`
-
     return (
         <Html lang="nl">
             <Head>
-                <link
-                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-                    rel="stylesheet"
+                <Font
+                    fontFamily="Inter"
+                    fallbackFontFamily="sans-serif"
+                    fontWeight={400}
+                    fontStyle="normal"
                 />
-                <style>{`
-                * {
-                    font-family: ${fontFamily};
-                }
-            `}</style>
             </Head>
             <Preview>
                 {`${inviterName} heeft je uitgenodigd om lid te worden van ${organizationName} in ${appName}.`}

fdm-app/app/components/blocks/email/magic-link.tsx

@@ -2,6 +2,7 @@ import {
     Body,
     Button,
     Container,
+    Font,
     Head,
     Heading,
     Html,
@@ -33,15 +34,12 @@ export const MagicLinkEmail = ({
     <Html lang="nl">
         <Head>
             <title>{`Aanmelden bij ${appName}`}</title>
-            <link
-                href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-                rel="stylesheet"
+            <Font
+                fontFamily="Inter"
+                fallbackFontFamily="sans-serif"
+                fontWeight={400}
+                fontStyle="normal"
             />
-            <style>{`
-                * {
-                    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-                }
-            `}</style>
         </Head>
         <Preview>{`Link om aan te melden bij ${appName}`}</Preview>
         <Tailwind>

fdm-app/app/components/blocks/email/welcome.tsx

@@ -2,6 +2,7 @@ import {
     Body,
     Button,
     Container,
+    Font,
     Head,
     Heading,
     Hr,
@@ -30,23 +31,17 @@ export function WelcomeEmail({
 }: WelcomeEmailProps) {
     const previewText = `Welkom bij ${appName}! Krijg inzicht in je bedrijfsdata.`
     const logoPath = `${appBaseUrl}${logoFileName}`
-
-    const fontFamily = `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif`
-
     const absoluteUrl = url.startsWith("http") ? url : `https://${url}`
 
     return (
         <Html lang="nl">
             <Head>
-                <link
-                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-                    rel="stylesheet"
+                <Font
+                    fontFamily="Inter"
+                    fallbackFontFamily="sans-serif"
+                    fontWeight={400}
+                    fontStyle="normal"
                 />
-                <style>{`
-                    * {
-                        font-family: ${fontFamily};
-                    }
-                `}</style>
             </Head>
             <Preview>{previewText}</Preview>
             <Tailwind>