@local-civics/hub-ui 0.1.164 → 0.1.166

package/dist/index.mjs

@@ -4923,7 +4923,7 @@ const PathwayProgress = (props) => {
   const nextProficiency = props.nextXP || 1;
   const config = defaultActivityProgressConfig();
   const height = props.height || "sm";
-  withHeight(config, height);
+  withHeight$1(config, height);
   return /* @__PURE__ */ React__default.createElement("div", { className: "grid grid-cols-1 gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-x-2 items-center" }, props.icon && /* @__PURE__ */ React__default.createElement("div", { className: config.icon.container }, /* @__PURE__ */ React__default.createElement(Button, { disabled: !props.open, size: config.icon.size, icon: props.icon, onClick: props.onOpen })), /* @__PURE__ */ React__default.createElement("div", { className: "grow grid grid-cols-1 gap-2 items-center" }, /* @__PURE__ */ React__default.createElement("div", null, props.title && /* @__PURE__ */ React__default.createElement("p", { className: "capitalize text-xs text-slate-400" }, props.title), /* @__PURE__ */ React__default.createElement("div", { className: classname(config.progress) }, /* @__PURE__ */ React__default.createElement(Progress, { start: proficiency, end: nextProficiency }))), /* @__PURE__ */ React__default.createElement("div", { className: "flex" }, height !== "sm" && /* @__PURE__ */ React__default.createElement("div", { className: "grow flex gap-x-1" }, /* @__PURE__ */ React__default.createElement("p", { className: classname(config.xp.value) }, compact(proficiency)), /* @__PURE__ */ React__default.createElement("p", { className: classname(config.xp.suffix) }, "XP")), height !== "sm" && !!props.level && /* @__PURE__ */ React__default.createElement("p", { className: classname(config.magnitude) }, compact(nextProficiency - proficiency), " exp. until level ", props.level + 1)))));
 };
 const defaultActivityProgressConfig = () => {
@@ -4952,7 +4952,7 @@ const defaultActivityProgressConfig = () => {
   };
   return config;
 };
-const withHeight = (config, height) => {
+const withHeight$1 = (config, height) => {
   height = height || "sm";
   switch (height) {
     case "sm":
@@ -5514,11 +5514,53 @@ const TaskList = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", { className: "h-[16rem] lg:h-[22rem] w-full" }, /* @__PURE__ */ React__default.createElement(Board, { isLoading: props.isLoading, tabs, workflow, secondary: true }));
 };
 
+const PathwayProgressBarChart = ({
+  targets,
+  points,
+  height = "sm"
+}) => {
+  const entries = Object.entries(targets);
+  const config = defaultChartConfig();
+  withHeight(config, height);
+  if (!entries.length)
+    return null;
+  return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-2" }, entries.map(([categoryId, max]) => {
+    var _a;
+    const value = (_a = points[categoryId]) != null ? _a : 0;
+    return /* @__PURE__ */ React.createElement("div", { key: categoryId, className: "grid grid-cols-1 gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React.createElement("p", { className: "capitalize text-xs text-slate-400" }, categoryId), /* @__PURE__ */ React.createElement("p", { className: classname(config.magnitude) }, value, " / ", max)), /* @__PURE__ */ React.createElement("div", { className: classname(config.progress) }, /* @__PURE__ */ React.createElement(Progress, { start: value, end: max || 1 })));
+  }));
+};
+const defaultChartConfig = () => {
+  return {
+    progress: {
+      height: ""
+    },
+    magnitude: {
+      base: "text-gray-400",
+      text: ""
+    }
+  };
+};
+const withHeight = (config, height) => {
+  switch (height) {
+    case "sm":
+      config.progress.height = "h-4";
+      config.magnitude.text = "text-sm";
+      break;
+    case "md":
+      config.progress.height = "h-8";
+      config.magnitude.text = "text-sm";
+      break;
+  }
+};
+
 const PathwayCard = (props) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const badges = props.badges || [];
   const completedCount = badges.filter((b) => b.completedAt).length;
   const target = props.target || badges.length;
+  const categoryTargets = (_a = props.criteria) != null ? _a : {};
+  const points = (_b = props.points) != null ? _b : {};
   return /* @__PURE__ */ React.createElement(Card, { onClose: props.onClose }, /* @__PURE__ */ React.createElement("div", { className: "pb-5 text-zinc-600" }, /* @__PURE__ */ React.createElement("div", { className: "pb-5 px-5 flex gap-x-2" }, /* @__PURE__ */ React.createElement(
     BadgeEmblem,
     {
@@ -5526,7 +5568,14 @@ const PathwayCard = (props) => {
       alt: props.title,
       size: "md"
     }
-  ), /* @__PURE__ */ React.createElement("div", { className: "max-w-[20rem]" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold" }, props.title), /* @__PURE__ */ React.createElement("div", { className: "text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "text-zinc-500 font-semibold" }, "Tags"), ((_a = props.displayTags) != null ? _a : []).length > 0 && /* @__PURE__ */ React.createElement("div", { className: "inline-block ml-1 text-green-500" }, ((_b = props.displayTags) != null ? _b : []).map((tag, index) => /* @__PURE__ */ React.createElement("span", { key: index, className: "font-semibold mr-1" }, tag)))), !!props.description && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm" }, props.description))), /* @__PURE__ */ React.createElement("div", { className: "p-5 grid grid-cols-1 gap-y-3 md:min-w-[30rem] max-w-[40rem] border-t border-zinc-200" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold" }, "Pathway Badges & Criteria"), /* @__PURE__ */ React.createElement("p", { className: "text-xs" }, "This pathway is comprised of ", target, " Badges. It includes required and elective programming."), /* @__PURE__ */ React.createElement("p", { className: "text-xs" }, "Progress: ", completedCount, " / ", target, " badges completed."), /* @__PURE__ */ React.createElement("div", { className: "mt-2 grid grid-cols-1 gap-y-2 max-h-[18rem] overflow-y-auto" }, badges.map((b) => {
+  ), /* @__PURE__ */ React.createElement("div", { className: "max-w-[20rem]" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold" }, props.title), /* @__PURE__ */ React.createElement("div", { className: "text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "text-zinc-500 font-semibold" }, "Tags"), ((_c = props.displayTags) != null ? _c : []).length > 0 && /* @__PURE__ */ React.createElement("div", { className: "inline-block ml-1 text-green-500" }, ((_d = props.displayTags) != null ? _d : []).map((tag, index) => /* @__PURE__ */ React.createElement("span", { key: index, className: "font-semibold mr-1" }, tag)))), !!props.description && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm" }, props.description))), /* @__PURE__ */ React.createElement("div", { className: "p-5 grid grid-cols-1 gap-y-3 md:min-w-[30rem] max-w-[40rem] border-t border-zinc-200" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold" }, "Pathway Badges & Criteria"), /* @__PURE__ */ React.createElement("p", { className: "text-xs" }, "This pathway is comprised of ", target, " Badges. It includes required and elective programming."), /* @__PURE__ */ React.createElement("p", { className: "text-xs" }, "Progress: ", completedCount, " / ", target, " badges completed."), /* @__PURE__ */ React.createElement(
+    PathwayProgressBarChart,
+    {
+      targets: categoryTargets,
+      points,
+      height: "sm"
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "mt-2 grid grid-cols-1 gap-y-2 max-h-[18rem] overflow-y-auto" }, badges.map((b) => {
     const buttonText = b.completedAt ? "Completed" : b.startedAt ? "Continue" : "Start";
     const buttonTheme = b.completedAt ? "light" : "dark";
     const iconName = b.completedAt ? "check & circle" : "circle";