Disable buttons in the user interface based on the user's farm permissions

.changeset/dark-wombats-slide.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": minor
+---
+
+Added the optional `strict` parameter to the `checkPermission` function, which, when specified as false, disables audit logging, and throwing an exception if the principal has no permission.

.changeset/jolly-pens-crash.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Various UI elements are now hidden or grayed out if the current logged-in user doesn't have permission to perform the actions that they represent.

fdm-app/app/components/blocks/cultivation/card-details.tsx

@@ -22,6 +22,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "~/components/ui/select"
+import { cn } from "~/lib/utils"
 import {
     CultivationDetailsFormSchema,
     type CultivationDetailsFormSchemaType,
@@ -30,9 +31,11 @@ import {
 export function CultivationDetailsCard({
     cultivation,
     b_lu_variety_options,
+    editable = true,
 }: {
     cultivation: Cultivation
     b_lu_variety_options: { value: string; label: string }[]
+    editable?: boolean
 }) {
     const fetcher = useFetcher()
     const form = useRemixForm<CultivationDetailsFormSchemaType>({
@@ -72,7 +75,7 @@ export function CultivationDetailsCard({
                 <CardTitle className="text-xl font-semibold tracking-tight text-gray-900">
                     {cultivation.b_lu_name}
                 </CardTitle>
-                {!isCreateWizard ? (
+                {!isCreateWizard && editable ? (
                     <div className="flex justify-between">
                         <Button
                             variant="destructive"
@@ -98,6 +101,7 @@ export function CultivationDetailsCard({
                     <Form onSubmit={form.handleSubmit} method="post">
                         <fieldset
                             disabled={
+                                !editable ||
                                 form.formState.isSubmitting ||
                                 fetcher.state === "submitting"
                             }
@@ -109,12 +113,14 @@ export function CultivationDetailsCard({
                                     name="b_lu_start"
                                     label="Zaaidatum"
                                     description=""
+                                    disabled={!editable}
                                 />
                                 <DatePicker
                                     form={form}
                                     name="b_lu_end"
                                     label="Einddatum"
                                     description=""
+                                    disabled={!editable}
                                 />
                             </div>
                             <div className="grid lg:grid-cols-2 gap-4 items-end">
@@ -132,6 +138,7 @@ export function CultivationDetailsCard({
                                                         field.onChange
                                                     }
                                                     disabled={
+                                                        !editable ||
                                                         form.formState
                                                             .isSubmitting ||
                                                         fetcher.state ===
@@ -158,8 +165,9 @@ export function CultivationDetailsCard({
                                                 onValueChange={field.onChange}
                                                 value={field.value ?? undefined}
                                                 disabled={
+                                                    !editable ||
                                                     b_lu_variety_options.length ===
-                                                    0
+                                                        0
                                                 }
                                             >
                                                 <FormControl>
@@ -196,7 +204,12 @@ export function CultivationDetailsCard({
                                     )}
                                 />
                             </div>
-                            <div className="flex justify-end">
+                            <div
+                                className={cn(
+                                    "flex justify-end",
+                                    !editable ? "invisible" : "",
+                                )}
+                            >
                                 <Button
                                     type="submit"
                                     disabled={

fdm-app/app/components/blocks/cultivation/card-harvests.tsx

@@ -10,10 +10,12 @@ export function CultivationHarvestsCard({
     harvests,
     b_lu_harvestable,
     harvestParameters,
+    editable = true,
 }: {
     harvests: Harvest[]
     b_lu_harvestable: HarvestableType
     harvestParameters: HarvestParameters
+    editable?: boolean
 }) {
     let canAddHarvest = false
     if (b_lu_harvestable === "once" && harvests.length === 0) {
@@ -22,6 +24,7 @@ export function CultivationHarvestsCard({
     if (b_lu_harvestable === "multiple") {
         canAddHarvest = true
     }
+    canAddHarvest &&= editable
 
     return (
         <Card>
@@ -30,22 +33,25 @@ export function CultivationHarvestsCard({
                     {b_lu_harvestable === "multiple" ? "Oogsten" : "Oogst"}
                 </CardTitle>
                 <div className="flex justify-between">
-                    <NavLink
-                        to="./harvest/new"
-                        onClick={(e) => {
-                            if (!canAddHarvest) {
-                                e.preventDefault()
-                            }
-                        }}
-                        className={!canAddHarvest ? "cursor-not-allowed" : ""}
+                    <Button
+                        asChild
+                        variant="default"
+                        className={cn(!canAddHarvest ? "hidden" : "")}
                     >
-                        <Button
-                            variant="default"
-                            className={cn(!canAddHarvest ? "hidden" : "")}
+                        <NavLink
+                            to="./harvest/new"
+                            onClick={(e) => {
+                                if (!canAddHarvest) {
+                                    e.preventDefault()
+                                }
+                            }}
+                            className={
+                                !canAddHarvest ? "cursor-not-allowed" : ""
+                            }
                         >
                             Oogst toevoegen
-                        </Button>
-                    </NavLink>
+                        </NavLink>
+                    </Button>
                 </div>
             </CardHeader>
             <CardContent className="space-y-6">

fdm-app/app/components/blocks/cultivation/card-list.tsx

@@ -14,18 +14,20 @@ export function CultivationListCard({
     cultivationsCatalogueOptions,
     cultivations,
     harvests,
+    editable = true,
 }: {
     cultivationsCatalogueOptions: CultivationOption[]
     cultivations: Cultivation[]
     harvests: Harvest[]
+    editable?: boolean
 }) {
     return (
         <Card>
             <CardHeader className="flex flex-row items-center justify-between">
                 <CardTitle className="text-xl font-semibold tracking-tight text-gray-900">
                     Gewassen
                 </CardTitle>
-                {cultivations.length !== 0 ? (
+                {cultivations.length !== 0 && editable ? (
                     <CultivationAddFormDialog
                         options={cultivationsCatalogueOptions}
                     />

fdm-app/app/components/blocks/cultivation/form-add.tsx

@@ -17,7 +17,9 @@ import {
 import { CultivationAddFormSchema } from "./schema"
 import type { CultivationsFormProps } from "./types"
 
-export function CultivationAddFormDialog({ options }: CultivationsFormProps) {
+export function CultivationAddFormDialog({
+    options,
+}: CultivationsFormProps) {
     const [isOpen, setIsOpen] = useState(false)
 
     return (
@@ -41,7 +43,8 @@ export function CultivationAddFormDialog({ options }: CultivationsFormProps) {
 function CultivationAddForm({
     options,
     onSuccess,
-}: CultivationsFormProps & { onSuccess?: () => void }) {
+    editable = true,
+}: CultivationsFormProps & { editable?: boolean; onSuccess?: () => void }) {
     const form = useRemixForm<z.infer<typeof CultivationAddFormSchema>>({
         mode: "onTouched",
         resolver: zodResolver(CultivationAddFormSchema),
@@ -70,7 +73,7 @@ function CultivationAddForm({
                 onSubmit={form.handleSubmit}
                 method="post"
             >
-                <fieldset disabled={form.formState.isSubmitting}>
+                <fieldset disabled={!editable || form.formState.isSubmitting}>
                     <div className="grid gap-4">
                         <div className="col-span-1">
                             <Combobox

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

@@ -15,6 +15,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "~/components/ui/dialog"
+import { cn } from "~/lib/utils"
 import { FertilizerApplicationForm } from "./form"
 import { FertilizerApplicationsList } from "./list"
 import type { FertilizerApplication, FertilizerOption } from "./types.d"
@@ -24,6 +25,8 @@ export function FertilizerApplicationCard({
     applicationMethodOptions,
     fertilizers,
     fertilizerOptions,
+    canCreateFertilizerApplication = true,
+    canModifyFertilizerApplication = {},
 }: {
     fertilizerApplications: FertilizerApplication[]
     applicationMethodOptions: {
@@ -34,6 +37,8 @@ export function FertilizerApplicationCard({
     fertilizerOptions: FertilizerOption[]
     dose: Dose
     className?: string
+    canCreateFertilizerApplication?: boolean
+    canModifyFertilizerApplication?: Record<string, boolean>
 }) {
     const fetcher = useFetcher()
     const location = useLocation()
@@ -108,14 +113,26 @@ export function FertilizerApplicationCard({
         if (savedFormValues && !isDialogOpen) {
             if (savedFormValues.p_app_id) {
                 // Do not open the form if there is a risk it will create a new application
-                if (applicationToEdit) {
+                if (
+                    applicationToEdit &&
+                    (canModifyFertilizerApplication[
+                        applicationToEdit.p_app_id
+                    ] ??
+                        true)
+                ) {
                     setIsDialogOpen(true)
                 }
-            } else {
+            } else if (canCreateFertilizerApplication) {
                 setIsDialogOpen(true)
             }
         }
-    }, [savedFormValues, applicationToEdit, isDialogOpen])
+    }, [
+        savedFormValues,
+        applicationToEdit,
+        isDialogOpen,
+        canCreateFertilizerApplication,
+        canModifyFertilizerApplication,
+    ])
 
     function handleDialogOpenChange(state: boolean) {
         if (!state && params.b_id_farm && b_id_or_b_lu_catalogue) {
@@ -143,7 +160,13 @@ export function FertilizerApplicationCard({
                     onOpenChange={handleDialogOpenChange}
                 >
                     <DialogTrigger asChild>
-                        <Button>
+                        <Button
+                            className={cn(
+                                !canCreateFertilizerApplication
+                                    ? "invisible"
+                                    : "",
+                            )}
+                        >
                             <Plus className="size-4" />
                             Toevoegen
                         </Button>
@@ -181,6 +204,9 @@ export function FertilizerApplicationCard({
                     fertilizers={fertilizers}
                     handleDelete={handleDelete}
                     handleEdit={handleEdit}
+                    canModifyFertilizerApplication={
+                        canModifyFertilizerApplication
+                    }
                 />
             </CardContent>
         </Card>

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

@@ -4,6 +4,7 @@ import { format } from "date-fns"
 import { nl } from "date-fns/locale"
 import { Circle, Diamond, Square, Trash, Triangle } from "lucide-react"
 import { useFetcher } from "react-router"
+import { LoadingSpinner } from "~/components/custom/loadingspinner"
 import { Button } from "~/components/ui/button"
 import {
     Empty,
@@ -26,12 +27,13 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from "~/components/ui/tooltip"
-import { LoadingSpinner } from "../../custom/loadingspinner"
+import { cn } from "~/lib/utils"
 
 export function FertilizerApplicationsList({
     fertilizerApplications,
     applicationMethodOptions,
     fertilizers,
+    canModifyFertilizerApplication = {},
     handleDelete,
     handleEdit,
 }: {
@@ -41,6 +43,7 @@ export function FertilizerApplicationsList({
         label: string
     }[]
     fertilizers: Fertilizer[]
+    canModifyFertilizerApplication?: Record<string, boolean>
     handleDelete: (p_app_id: string | string[]) => void
     handleEdit: (fertilizerApplication: FertilizerApplication) => () => void
 }) {
@@ -57,6 +60,10 @@ export function FertilizerApplicationsList({
                         if (!fertilizer) {
                             return null
                         }
+                        const editable =
+                            canModifyFertilizerApplication[
+                                application.p_app_id
+                            ] ?? true
 
                         return (
                             <div key={application.p_app_id}>
@@ -82,8 +89,9 @@ export function FertilizerApplicationsList({
                                                 variant="link"
                                                 className="p-0 mt-0"
                                                 disabled={
+                                                    !editable ||
                                                     fetcher.state ===
-                                                    "submitting"
+                                                        "submitting"
                                                 }
                                                 onClick={handleEdit(
                                                     application,
@@ -117,7 +125,11 @@ export function FertilizerApplicationsList({
                                             </p>
                                         </ItemDescription>
                                     </ItemContent>
-                                    <ItemActions>
+                                    <ItemActions
+                                        className={cn(
+                                            !editable ? "invisible" : "",
+                                        )}
+                                    >
                                         <TooltipProvider>
                                             <Tooltip>
                                                 <TooltipTrigger asChild>

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

@@ -22,6 +22,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "~/components/ui/select"
+import { cn } from "~/lib/utils"
 
 export interface FertilizerParameterDescriptionItem {
     parameter: FertilizerParameters
@@ -258,19 +259,20 @@ export function FertilizerForm({
                             </Card>
                         ))}
                     </div>
-                    {editable && (
-                        <div className="sticky bottom-0 left-0 right-0 border-t bg-background p-4">
-                            <Button
-                                type="submit"
-                                className="w-full"
-                                disabled={form.formState.isSubmitting}
-                            >
-                                {form.formState.isSubmitting
-                                    ? "Meststof opslaan..."
-                                    : "Meststof opslaan"}
-                            </Button>
-                        </div>
-                    )}
+                    <div className="sticky bottom-0 left-0 right-0 border-t bg-background p-4">
+                        <Button
+                            type="submit"
+                            className={cn(
+                                "w-full",
+                                !editable ? "invisible" : "",
+                            )}
+                            disabled={form.formState.isSubmitting}
+                        >
+                            {form.formState.isSubmitting
+                                ? "Meststof opslaan..."
+                                : "Meststof opslaan"}
+                        </Button>
+                    </div>
                 </fieldset>
             </Form>
         </RemixFormProvider>