added gantt chart to widget and it is all visible however the participants column is ugly and data is only dummy data

client/src/components/Widgets/TravelGanttChart.jsx

@@ -0,0 +1,92 @@
+import { Gantt, Willow } from "@svar-ui/react-gantt";
+import "@svar-ui/react-gantt/all.css";
+import { useMemo } from "react";
+import {Avatar, Flex, Text} from "@chakra-ui/react";
+
+export default function TravelGanttChart() {
+
+  const upcoming_travel = useMemo(() => [
+    {
+      id: 20,
+      text: "Guatemala",
+      start: new Date(2026, 9, 21),
+      end: new Date(2026, 9, 29),
+      duration: 8,
+      participants: ["Chris Hight", "Angie Diefenbach"],
+      type: "travel",
+    },
+    {
+      id: 47,
+      text: "Venuatu",
+      start: new Date(2026, 10, 12),
+      end: new Date(2026, 10, 15),
+      duration: 3,
+      participants: ["Chris Hight"],
+      type: "travel",
+    },
+    {
+      id: 22,
+      text: "Costa Rica",
+      start: new Date(2027, 1, 1),
+      end: new Date(2027, 1, 10),
+      duration: 9,
+      participants: ["Chris Hight"],
+      type: "travel",
+    },
+  ], []);
+
+  const columns = [
+    { id: "start", header: "Start Date", width: 100, height: 200, align: "left" },
+    { id: "duration", header: "Duration", width: 100, height: 200, align: "left" },
+    { id: "participants", header: "Participants", width: 150, height: 200, align: "center", cell: AvatarCell, flexgrow: 1 },
+  ]
+
+  return (
+    <div style={{ height: "100%", width: "100%" }}>
+      <Willow>
+        <Gantt tasks={upcoming_travel} cellWidth={20} columns={columns} />
+      </Willow>
+    </div>
+  )
+}
+
+// assume each user has access to the full list of VDAP users
+
+const users = [
+  {
+    fullname: "Chris Hight",
+    firstname: "Chris",
+    lastname: "Hight",
+    avatar: undefined
+  },
+  {
+    fullname: "Angie Diefenbach",
+    firstname: "Chris",
+    lastname: "Hight",
+    avatar: undefined
+  },
+  {
+    fullname: "Venessa Kuchenik",
+    firstname: "Venessa",
+    lastname: "Kuchenik",
+    avatar: undefined
+  },
+]
+
+function AvatarCell({ row }) {
+  const travelers = row.participants.map((r) => {
+    return users.find((u) => u.fullname === r);
+  });
+
+  return (
+    <Flex direction="column" alignItems="left" justifyContent="space-between">
+      {travelers.map((traveler) => (
+        <Avatar.Root shape="full">
+          <Avatar.Image src={traveler.avatar} />
+          <Avatar.Fallback name={traveler.fullname} />
+          <Text>{traveler.fullname}</Text>
+        </Avatar.Root>
+      ))}
+    </Flex>
+  )
+}

client/src/constants/widgetRegistry.jsx

@@ -203,6 +203,16 @@ export const WIDGET_REGISTRY = {
         allowedSizes: {
             medium: { w: 6, h: 12 }
         }
+    },
+
+    "travel_gantt_chart": {
+        name: "Travel Gantt Chart",
+        category: "Communications",
+        description: "View upcoming travels in a gantt chart",
+        component: lazy(() => import('../components/Widgets/TravelGanttChart.jsx')),
+        allowedSizes: {
+            medium: { w: 6, h: 12 }
+        }
     }
 
 };

client/src/css/index.css

@@ -1,3 +1,7 @@
 :root {
   font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.wx-theme {
+  height: 100%;
 }