Improve UX and Functionality for Advisor and Researcher Roles

.changeset/hungry-shirts-scream.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": patch
+---
+
+Members of an organization now inherit its roles on a farm properly.

.changeset/new-places-shop.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+In the sidebar, when a farm is selected, show the farm name and role that the user has.

fdm-app/app/components/blocks/sidebar/farm.tsx

@@ -1,3 +1,4 @@
+import type { getFarm } from "@svenvw/fdm-core"
 import {
     Calendar,
     Check,
@@ -30,21 +31,36 @@ import {
     SidebarMenuSubItem,
 } from "~/components/ui/sidebar"
 
-export function SidebarFarm() {
+export function SidebarFarm({
+    farm,
+}: {
+    farm: Awaited<ReturnType<typeof getFarm>> | undefined
+}) {
+    function getSuperiorRole(allRoles: ("owner" | "advisor" | "researcher")[]) {
+        if (allRoles.length > 0) {
+            const ordering = ["owner", "advisor", "researcher"] as const
+            const sorted = [...allRoles].sort(
+                (a, b) => ordering.indexOf(a) - ordering.indexOf(b),
+            )
+            return sorted[0]
+        }
+        return null
+    }
+
     const farmId = useFarmStore((state) => state.farmId)
 
     const selectedCalendar = useCalendarStore((state) => state.calendar)
     const setCalendar = useCalendarStore((state) => state.setCalendar)
     const [isCalendarOpen, setIsCalendarOpen] = useState(false)
     const calendarSelection = getCalendarSelection()
 
-    // Check if the page or its return page contains `farm/create` in url
     const location = useLocation()
     const [searchParams] = useSearchParams()
+    // Check if the page or its return page contains `farm/create` in url
     const isCreateFarmWizard =
         location.pathname.includes("farm/create") ||
         searchParams.get("returnUrl")?.includes("farm/create")
-
+    const farmRole = farm ? getSuperiorRole(farm.roles) : null
     // Set the farm link
     let farmLink: string
     let farmLinkDisplay: string
@@ -53,7 +69,7 @@ export function SidebarFarm() {
         farmLinkDisplay = "Terug naar bedrijven"
     } else if (farmId && farmId !== "undefined") {
         farmLink = `/farm/${farmId}`
-        farmLinkDisplay = "Bedrijf"
+        farmLinkDisplay = farm?.b_name_farm ? farm.b_name_farm : "Bedrijf"
     } else {
         farmLink = "/farm"
         farmLinkDisplay = "Overzicht bedrijven"
@@ -102,6 +118,21 @@ export function SidebarFarm() {
                             <NavLink to={farmLink}>
                                 <House />
                                 <span>{farmLinkDisplay}</span>
+                                {farmRole && (
+                                    <Badge
+                                        key={farmRole}
+                                        variant="outline"
+                                        className="ml-auto"
+                                    >
+                                        {farmRole === "owner"
+                                            ? "Eigenaar"
+                                            : farmRole === "advisor"
+                                              ? "Adviseur"
+                                              : farmRole === "researcher"
+                                                ? "Onderzoeker"
+                                                : "Onbekend"}
+                                    </Badge>
+                                )}
                             </NavLink>
                         </SidebarMenuButton>
                     </SidebarMenuItem>

fdm-app/app/routes/farm.$b_id_farm.tsx

@@ -1,7 +1,9 @@
+import { getFarm } from "@svenvw/fdm-core"
 import { data, type LoaderFunctionArgs, type MetaFunction } from "react-router"
 import { getSession } from "~/lib/auth.server"
 import { clientConfig } from "~/lib/config"
 import { handleActionError } from "~/lib/error"
+import { fdm } from "~/lib/fdm.server"
 
 // Meta
 export const meta: MetaFunction = () => {
@@ -39,9 +41,12 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
         // Get the session
         const session = await getSession(request)
 
+        const farm = await getFarm(fdm, session.principal_id, b_id_farm)
+
         // Return the farm ID and session info
         return {
             farmId: b_id_farm,
+            farm: farm,
             session,
         }
     } catch (error) {

fdm-app/app/routes/farm.tsx

@@ -1,3 +1,4 @@
+import { getFarm } from "@svenvw/fdm-core"
 import posthog from "posthog-js"
 import { useEffect } from "react"
 import type { LoaderFunctionArgs, MetaFunction } from "react-router"
@@ -19,6 +20,7 @@ import { clientConfig } from "~/lib/config"
 import { handleLoaderError } from "~/lib/error"
 import { useCalendarStore } from "~/store/calendar"
 import { useFarmStore } from "~/store/farm"
+import { fdm } from "../lib/fdm.server"
 
 export const meta: MetaFunction = () => {
     return [
@@ -33,16 +35,17 @@ export const meta: MetaFunction = () => {
 
 /**
  * Retrieves the session from the HTTP request and returns user information if available.
+ * Also retrieves the current farm when available.
  *
  * If the session does not contain a user, the function redirects to the "/signin" route.
  * Any errors encountered during session retrieval are processed by the designated error handler.
  *
  * @param request - The HTTP request used for obtaining session data.
- * @returns An object with a "user" property when a valid session is found.
+ * @returns An object with a "user" property when a valid session is found, and a "farm" property when b_id_farm is found in the URL.
  *
  * @throws {Error} If an error occurs during session retrieval, processed by handleLoaderError.
  */
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ params, request }: LoaderFunctionArgs) {
     try {
         // Get the session
         const session = await getSession(request)
@@ -52,8 +55,13 @@ export async function loader({ request }: LoaderFunctionArgs) {
             return sessionCheckResponse
         }
 
+        const farm = params.b_id_farm
+            ? await getFarm(fdm, session.principal_id, params.b_id_farm)
+            : undefined
+
         // Return user information from loader
         return {
+            farm: farm,
             user: session.user,
             userName: session.userName,
             initials: session.initials,
@@ -116,7 +124,7 @@ export default function App() {
             <Sidebar>
                 <SidebarTitle />
                 <SidebarContent>
-                    <SidebarFarm />
+                    <SidebarFarm farm={loaderData.farm} />
                     <SidebarApps />
                 </SidebarContent>
                 <SidebarSupport