fix: lab dashboard page UX UI updates

Author: rebecamurillo

src/components/react/LivingLabKPIsView.tsx

@@ -2,16 +2,27 @@ import type { IKpi, IIKpiResultBeforeAfter } from "../../types";
 import { Badge, ExpansionPanel } from "./ui";
 import type { ICategory } from "../../types/Category";
 import { KpiCard, KpiMultiple } from "./KpiCards";
+import ModalSplitChart, { type SplitItem } from "./KpiCards/ModalSplitChart";
 
 interface IKpiResultsByCategory extends ICategory {
   kpiResults: IIKpiResultBeforeAfter[];
 }
 type Props = {
   kpis?: IKpi[];
-  categories: IKpiResultsByCategory[];
+  categories?: IKpiResultsByCategory[];
+
+  modalSplitKpis?: {
+    kpiName: string;
+    before: { label: string; data: SplitItem[] };
+    after: { label: string; data: SplitItem[] };
+  }[];
 };
 
-export function LivingLabKPIsView({ categories = [], kpis }: Props) {
+export function LivingLabKPIsView({
+  categories = [],
+  kpis,
+  modalSplitKpis,
+}: Props) {
   const getKpiSection = (
     parentKpi: IKpi,
     resultKpis: IIKpiResultBeforeAfter[] = []
@@ -65,6 +76,7 @@ export function LivingLabKPIsView({ categories = [], kpis }: Props) {
           .map(([key, parentKpi]) => (
             // <div className="break-inside-avoid">
             <div
+              key={key}
               className={`break-inside-avoid ${
                 (kpiResultsMap.get(key) ?? [])?.length > 1
                   ? "md:col-span-2"
@@ -78,6 +90,41 @@ export function LivingLabKPIsView({ categories = [], kpis }: Props) {
     );
   };
 
+  if (modalSplitKpis && modalSplitKpis?.length > 0) {
+    return (
+      <ExpansionPanel
+        header={
+          <div className="flex flex-row justify-center items-center gap-2 rounded-2xl border-info bg-info px-1 py-1">
+            <h5 className="text-center">Modal Split</h5>
+            <Badge
+              color="light"
+              size="sm"
+              tooltip="Number of KPIs in this category"
+              displayTooltipIcon={false}
+            >
+              {modalSplitKpis?.length || 0}
+            </Badge>
+          </div>
+        }
+        content={
+          <>
+            {modalSplitKpis?.length > 0 &&
+              modalSplitKpis.map(({ kpiName, before, after }) => (
+                <div className="flex flex-col gap-4">
+                  <h5 className="text-center  mt-4">{kpiName}</h5>
+                  <div className="bg-white p-6 rounded-lg shadow-md">
+                    <ModalSplitChart data={[before, after]} />
+                  </div>
+                </div>
+              ))}
+          </>
+        }
+        arrow
+        open={true}
+      />
+    );
+  }
+
   return (
     <div className="flex flex-col gap-4 mx-auto w-full">
       {categories.map(

src/components/react/LivingLabMeasures.tsx

@@ -10,6 +10,7 @@ type LivingLabMeasuresProps = {
   measures?: IProject[];
   implementedMeasures?: LivingLabProjectsImplementationInput[];
   className?: string;
+  measuresGrids?: number;
   isEditable?: boolean;
 };
 
@@ -19,6 +20,7 @@ export function LivingLabMeasures({
   implementedMeasures = [],
   title = "Measures",
   className = "",
+  measuresGrids = 2,
   isEditable = false,
 }: LivingLabMeasuresProps) {
   return (
@@ -27,7 +29,7 @@ export function LivingLabMeasures({
     >
       <div className="flex-1 grid grid-cols-1 gap-4">
         <h4 className="text-center">{title}</h4>
-        <div className="grid grid-cols-1 lg:grid-cols-2 mx-1 lg:mx-4 gap-4">
+        <div className={`grid grid-cols-${measuresGrids} mx-1 lg:mx-4 gap-4`}>
           {measures.map((m) => (
             <LivingLabMeasureForm
               livingLabId={livingLabId}

src/components/react/form/LivingLabMeasureForm.tsx

@@ -230,14 +230,14 @@ export function LivingLabMeasureForm({
               </RButton>
             </div>
           </form>
-        ) : checked ? (
+        ) : checked && (startAt || description) ? (
           <div className="flex flex-col gap-1 text-left p-5 text-primary justify-center items-start">
-            <div className="flex flex-row">
-              <CalendarIcon className="h-5 w-5" />
-              <small>
-                {startAt ? formatDateToMonthYear(startAt) : "Unknown"}
-              </small>
-            </div>
+            {startAt ? (
+              <div className="flex flex-row justify-center items-center gap-1">
+                <CalendarIcon className="h-5 w-5" />
+                <small>{formatDateToMonthYear(startAt)}</small>
+              </div>
+            ) : null}
             <small style={{ whiteSpace: "pre-line" }}>{description}</small>
           </div>
         ) : null}

src/components/react/ui/SidebarMenu.tsx

@@ -121,12 +121,12 @@ const DEFAULT_USER_MENU_ITEMS = [
 
 export function SidebarMenu({ children, userInfo, currentLivingLab }: Props) {
   const labItem = {
-    label: currentLivingLab?.name ?? "My Living Lab",
+    label: "Manage " + (currentLivingLab?.name ?? "My Living Lab"),
     icon: <MapPinIcon />,
   };
   const labMenu: MenuItem[] = [
     {
-      label: "Edit",
+      label: "Edit Lab details",
       icon: <Cog8ToothIcon />,
       href: getUrl("/lab-admin/edit"),
     },
@@ -140,7 +140,7 @@ export function SidebarMenu({ children, userInfo, currentLivingLab }: Props) {
 
   const navbarItems: MenuItem[] = [
     {
-      label: "Home",
+      label: userInfo ? "Go to ODP website" : "Home",
       icon: <HomeIcon />,
       href: getUrl("/"),
       className: "max-md:hidden",
@@ -155,11 +155,11 @@ export function SidebarMenu({ children, userInfo, currentLivingLab }: Props) {
   ];
   if (currentLivingLab) {
     if (
-      currentLivingLab?.authorizedLabs?.length &&
+      currentLivingLab?.authorizedLabs &&
       currentLivingLab?.authorizedLabs?.length > 1
     ) {
       navbarItems.push({
-        label: "Labs",
+        label: "My Labs",
         icon: <GlobeEuropeAfricaIcon />,
         subItems: currentLivingLab?.authorizedLabs?.map((item) => ({
           label: item.name,
@@ -177,7 +177,7 @@ export function SidebarMenu({ children, userInfo, currentLivingLab }: Props) {
 
   if (userInfo)
     navbarItems.push({
-      label: userInfo?.name,
+      label: "My account",
       icon: <UserCircleIcon />,
       subItems: DEFAULT_USER_MENU_ITEMS,
       className: "max-md:hidden",

src/components/react/ui/SiteNavBar.tsx

@@ -53,7 +53,7 @@ export function SiteNavBar({
   let navbarItems: MenuItem[] = menuItems ?? [];
   if (userInfo) {
     const userMenu: MenuItem = {
-      label: userInfo?.name,
+      label: "Manage Labs",
       icon: <UserCircleIcon />,
       subItems: [
         {

src/lib/helpers/living-lab.ts

@@ -3,6 +3,7 @@ import type {
   ITransportMode,
   IProject,
   IKpi,
+  IIKpiResultBeforeAfter,
 } from "../../types";
 import type { SplitItem } from "../../components/react/KpiCards/ModalSplitChart";
 import type { MarkerData } from "../../components/react/MapViewer";
@@ -43,49 +44,66 @@ export function separateMeasures(measures: IProject[]): {
  * Prepare modal split chart data from KPI results
  * KPI 15.a represents modal split per transport mode
  */
-export function prepareModalSplitData(
-  livingLab: ILivingLabPopulated,
+export function getModalSplitKpiResults(
+  kpiDefinitions: IKpi[],
+  allTransportModes: ITransportMode[],
+  kpiResults: IIKpiResultBeforeAfter[]
+): {
+  kpiName: string;
+  before: { label: string; data: SplitItem[] };
+  after: { label: string; data: SplitItem[] };
+}[] {
+  if (!kpiDefinitions || !allTransportModes || !kpiResults.length) {
+    return [];
+  }
+  return (
+    kpiDefinitions
+      ?.filter((kpi) => ["15.a", "15.b", "15.c"].includes(kpi.kpi_number))
+      .map((kpi) => {
+        const modalSplitKpiResults = kpiResults.filter(
+          (result) => result.kpidefinition_id === kpi.id
+        );
+
+        return prepareModalSplitData(
+          modalSplitKpiResults,
+          allTransportModes,
+          kpi
+        );
+      }) || []
+  );
+}
+
+function prepareModalSplitData(
+  kpiResults: IIKpiResultBeforeAfter[],
   allTransportModes: ITransportMode[],
-  kpidefinitions: IKpi[]
+  parentKpiDefinition?: IKpi
 ): {
+  kpiName: string;
   before: { label: string; data: SplitItem[] };
   after: { label: string; data: SplitItem[] };
 } {
   if (
-    !livingLab.kpi_results ||
+    kpiResults?.length === 0 ||
     !allTransportModes ||
     allTransportModes.length === 0
   ) {
     return {
-      before: { label: "Before", data: [] },
-      after: { label: "After", data: [] },
-    };
-  }
-
-  // Find KPI 15.a results (modal split)
-  const modalSplitKpis = livingLab.kpi_results?.filter(
-    (kpi) =>
-      kpidefinitions?.find((def) => def.id === kpi.kpidefinition_id)
-        ?.kpi_number === "15.a"
-  );
-
-  if (modalSplitKpis.length === 0) {
-    return {
+      kpiName: "Modal Split",
       before: { label: "Before", data: [] },
       after: { label: "After", data: [] },
     };
   }
 
   const beforeData: SplitItem[] = [];
   const afterData: SplitItem[] = [];
-  const beforeLabelWithMinYear = modalSplitKpis[0].result_before?.date
-    ? `Before (${new Date(modalSplitKpis[0].result_before.date).getFullYear()})`
+  const beforeLabelWithMinYear = kpiResults[0].result_before?.date
+    ? `Before (${new Date(kpiResults[0].result_before.date).getFullYear()})`
     : "Before";
-  const afterLabelWithMinYear = modalSplitKpis[0].result_after?.date
-    ? `After (${new Date(modalSplitKpis[0].result_after.date).getFullYear()})`
+  const afterLabelWithMinYear = kpiResults[0].result_after?.date
+    ? `After (${new Date(kpiResults[0].result_after.date).getFullYear()})`
     : "After";
 
-  modalSplitKpis.forEach((kpi) => {
+  kpiResults.forEach((kpi) => {
     // Find the transport mode for this KPI result
     const transportMode = allTransportModes.find(
       (tm) => tm.id === kpi.result_before?.transport_mode_id
@@ -111,6 +129,7 @@ export function prepareModalSplitData(
   });
 
   return {
+    kpiName: parentKpiDefinition?.name || "Modal Split",
     before: { label: beforeLabelWithMinYear, data: beforeData },
     after: { label: afterLabelWithMinYear, data: afterData },
   };

src/pages/index.astro

@@ -18,23 +18,45 @@ const api = new ApiClient(Astro.request);
 
 const livingLabsData = (await api.getLivingLabs()) as ILivingLabPopulated[];
 const measures = await api.getMeasures();
-const kpis = (await api.getKPIs())?.filter((kpi) => !kpi.parent_kpi_id);
+const allKPIs = await api.getKPIs();
+const parentKpis = allKPIs?.filter((kpi) => !kpi.parent_kpi_id);
 const transportModes = (await api.getTransportModes())?.filter(
   (tm) => tm.type === "NSM"
 );
 
-const labs = livingLabsData?.map((lab) => ({
-  id: lab.id,
-  name: lab.name,
-  coordinates: { lat: lab.lat, lng: lab.lng },
-  radius: lab.radius ?? 50,
-  // status: lab.status,
-  totalMeasures: lab.projects?.length,
-  kpisBefore: lab.kpi_results?.filter((kpi) => kpi.result_before).length,
-  kpisAfter: lab.kpi_results?.filter((kpi) => kpi.result_after).length,
-  transportModes: lab.transport_modes?.filter((tm) => tm.type === "NSM").length,
-  sustainablePercentage: 0.4,
-}));
+const labs = livingLabsData?.map((lab) => {
+  const kpisBeforeIds = lab.kpi_results
+    ?.filter((kpi) => kpi.result_before)
+    ?.map((kpiresult) => {
+      const kpiDefinition = allKPIs?.find(
+        (pk) => pk.id === kpiresult.kpidefinition_id
+      );
+      return kpiDefinition?.parent_kpi_id ?? kpiDefinition?.id;
+    });
+
+  const kpisAfterIds = lab.kpi_results
+    ?.filter((kpi) => kpi.result_after)
+    ?.map((kpiresult) => {
+      const kpiDefinition = allKPIs?.find(
+        (pk) => pk.id === kpiresult.kpidefinition_id
+      );
+      return kpiDefinition?.parent_kpi_id ?? kpiDefinition?.id;
+    });
+
+  return {
+    id: lab.id,
+    name: lab.name,
+    coordinates: { lat: lab.lat, lng: lab.lng },
+    radius: lab.radius ?? 50,
+    // status: lab.status,
+    totalMeasures: lab.projects?.length,
+    kpisBefore: [...new Set(kpisBeforeIds)]?.length,
+    kpisAfter: [...new Set(kpisAfterIds)]?.length,
+    transportModes: lab.transport_modes?.filter((tm) => tm.type === "NSM")
+      .length,
+    sustainablePercentage: 0.4,
+  };
+});
 ---
 
 <Layout role="visitor">
@@ -80,7 +102,7 @@ const labs = livingLabsData?.map((lab) => ({
         {
           id: 4,
           name: "Key Performance Indicators (KPIs) monitored",
-          value: kpis?.length.toString() ?? "0",
+          value: parentKpis?.length.toString() ?? "0",
         },
       ]}
     />

src/pages/lab-admin/measures.astro

@@ -16,7 +16,6 @@ const livinglab = await api.getLivingLab(labId, ["projects"]);
 <Layout role="editor">
   <div class="mx-auto px-4 py-8 flex flex-col gap-8">
     <h2>What measures is your living lab implementing ?</h2>
-    <p>Review the measures for Seamless Urban Mobility and New Shared Modes</p>
 
     <InfoAlert title="What is a ‘measure’ ?" icon="question" variant="info">
       <small
@@ -37,7 +36,6 @@ const livinglab = await api.getLivingLab(labId, ["projects"]);
       title="What are PUSH measures ?"
       icon="question"
       variant="success"
-      actionText="Access documentation"
     >
       <small
         >Measures that discourage private-car use through restrictive policies
@@ -58,7 +56,6 @@ const livinglab = await api.getLivingLab(labId, ["projects"]);
       title="What are PULL measures ?"
       icon="question"
       variant="success"
-      actionText="Access documentation"
     >
       <small>
         Measures that encourage users to switch to sustainable transport