@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/profile/PersonDidPanel.js

@@ -0,0 +1,188 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useQuery as f, useMutation as w } from "@tanstack/react-query";
+import { Download as C, ListChecks as L, ChevronRight as S } from "lucide-react";
+import { useState as v } from "react";
+import { useNivaroClient as N, useItemNavigation as T } from "../../context.js";
+import { get as k, post as _ } from "../../lib/commands.js";
+import { formatNumber as y, formatDate as D, cn as O, titleCase as q } from "../../lib/utils.js";
+import { SimpleSelect as U } from "../ui/SimpleSelect.js";
+import { SectionCard as j, EmptyLine as b } from "./primitives.js";
+const g = "__none__", E = [
+  { value: "7", label: "Last 7 days" },
+  { value: "30", label: "Last 30 days" },
+  { value: "90", label: "Last 90 days" }
+];
+function R() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+function $(r) {
+  return r ? q(r.replace(/^(nivaro|directus)_/, "").replace(/_/g, " ")) : "Sign-ins and other";
+}
+function F(r) {
+  return Object.entries(r).sort((n, s) => s[1] - n[1]).map(([n, s]) => `${s} ${n.replace(/[-_]/g, " ")}`).join(" · ");
+}
+function G({ userId: r, name: n }) {
+  const s = N(), [i, h] = v("30"), c = R(), { data: a, isLoading: u, isError: p } = f({
+    queryKey: ["nvr-person-did", r, i, c],
+    queryFn: () => s.request(k(`/activity/people/${r}/summary`, { days: i, tz: c })).then((l) => l.data),
+    staleTime: 6e4
+  }), d = w({
+    mutationFn: () => s.request(
+      _(`/activity/people/${r}/export`, { days: Number(i), tz: c })
+    ).then((l) => l.data),
+    onSuccess: ({ csv: l, filename: t }) => {
+      const m = URL.createObjectURL(new Blob([l], { type: "text/csv;charset=utf-8" })), x = document.createElement("a");
+      x.href = m, x.download = t, x.click(), setTimeout(() => URL.revokeObjectURL(m), 1e3);
+    }
+  });
+  return /* @__PURE__ */ e(
+    j,
+    {
+      icon: /* @__PURE__ */ e(L, { className: "h-4 w-4" }),
+      title: n ? `What ${n} did` : "What they did",
+      hint: "Every recorded change, by day and collection",
+      testId: "what-they-did",
+      actions: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(
+          U,
+          {
+            value: i,
+            onChange: h,
+            options: E,
+            className: "h-7 w-[130px] text-[12px]",
+            ariaLabel: "Window"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: () => d.mutate(),
+            disabled: d.isPending || !(a != null && a.total),
+            className: "inline-flex h-7 items-center gap-1 rounded-md border border-slate-200 px-2 text-[12px] text-slate-700 hover:bg-muted disabled:opacity-50 dark:border-border dark:text-slate-200",
+            "data-person-did-export": !0,
+            children: [
+              /* @__PURE__ */ e(C, { className: "h-3.5 w-3.5" }),
+              d.isPending ? "Exporting…" : "CSV"
+            ]
+          }
+        )
+      ] }),
+      children: u ? /* @__PURE__ */ e("div", { className: "space-y-2", "aria-busy": "true", children: [0, 1, 2].map((l) => /* @__PURE__ */ e("div", { className: "h-9 animate-pulse rounded-md bg-slate-100 dark:bg-muted" }, l)) }) : p || !a ? /* @__PURE__ */ e(b, { children: "The activity could not be loaded." }) : a.days.length === 0 ? /* @__PURE__ */ e(b, { children: "Nothing recorded in this window." }) : /* @__PURE__ */ o("div", { className: "space-y-3", "data-person-did": !0, children: [
+        /* @__PURE__ */ o("p", { className: "text-[11.5px] text-slate-500 dark:text-slate-400", children: [
+          y(a.total),
+          a.truncated ? "+" : "",
+          " entries over ",
+          a.days.length,
+          " active day",
+          a.days.length === 1 ? "" : "s",
+          a.truncated ? " — the newest are shown; export for a shorter window." : ""
+        ] }),
+        a.days.map((l) => /* @__PURE__ */ e(W, { userId: r, group: l, tz: a.tz }, l.day))
+      ] })
+    }
+  );
+}
+function W({ userId: r, group: n, tz: s }) {
+  return /* @__PURE__ */ o("section", { "data-person-did-day": n.day, children: [
+    /* @__PURE__ */ o("h4", { className: "mb-1 flex items-baseline gap-2 text-[12px] font-semibold text-slate-700 dark:text-slate-200", children: [
+      D(n.day, { weekday: "short" }),
+      /* @__PURE__ */ e("span", { className: "font-normal text-slate-500 dark:text-slate-400", children: y(n.total) })
+    ] }),
+    /* @__PURE__ */ e("ul", { className: "divide-y divide-slate-100 rounded-md border border-slate-200 dark:divide-border/60 dark:border-border", children: n.collections.map((i) => /* @__PURE__ */ e(
+      P,
+      {
+        userId: r,
+        day: n.day,
+        tz: s,
+        group: i
+      },
+      i.collection ?? g
+    )) })
+  ] });
+}
+function P({
+  userId: r,
+  day: n,
+  tz: s,
+  group: i
+}) {
+  const h = N(), c = T(), [a, u] = v(!1), p = i.collection ?? g, { data: d, isLoading: l } = f({
+    queryKey: ["nvr-person-did-entries", r, n, p, s],
+    enabled: a,
+    queryFn: () => h.request(
+      k(`/activity/people/${r}/entries`, { day: n, collection: p, tz: s })
+    ).then((t) => t.data),
+    staleTime: 6e4
+  });
+  return /* @__PURE__ */ o("li", { children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        onClick: () => u((t) => !t),
+        "aria-expanded": a,
+        className: "flex w-full items-center gap-2 px-3 py-2 text-left text-[12.5px] hover:bg-muted",
+        children: [
+          /* @__PURE__ */ e(
+            S,
+            {
+              className: O(
+                "h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform",
+                a && "rotate-90"
+              )
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "font-medium text-slate-800 dark:text-slate-100", children: $(i.collection) }),
+          /* @__PURE__ */ e("span", { className: "min-w-0 truncate text-[11.5px] text-slate-500 dark:text-slate-400", children: F(i.actions) }),
+          /* @__PURE__ */ e("span", { className: "ml-auto shrink-0 tabular-nums text-slate-600 dark:text-slate-300", children: y(i.count) })
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ e("div", { className: "border-t border-slate-100 bg-slate-50 px-3 py-2 dark:border-border/60 dark:bg-muted/30", children: l ? /* @__PURE__ */ e("p", { className: "text-[11.5px] text-slate-500 dark:text-slate-400", children: "Loading…" }) : /* @__PURE__ */ o("ol", { className: "space-y-1", children: [
+      (d ?? []).map((t) => {
+        const m = t.collection && t.item && !/^(nivaro|directus)_/.test(t.collection) ? { collection: t.collection, itemId: t.item } : null;
+        return /* @__PURE__ */ o("li", { className: "flex items-baseline gap-2 text-[11.5px]", children: [
+          /* @__PURE__ */ e("time", { className: "w-14 shrink-0 tabular-nums text-slate-500 dark:text-slate-400", children: new Intl.DateTimeFormat("en-US", {
+            hour: "numeric",
+            minute: "2-digit",
+            timeZone: s
+          }).format(new Date(t.timestamp)) }),
+          /* @__PURE__ */ e("span", { className: "shrink-0 font-medium text-slate-700 dark:text-slate-200", children: t.action.replace(/[-_]/g, " ") }),
+          t.item && (m ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "shrink-0 text-nvr-navy hover:underline dark:text-nvr-cyan",
+              onClick: () => c.open(m),
+              children: [
+                "#",
+                t.item
+              ]
+            }
+          ) : /* @__PURE__ */ o("span", { className: "shrink-0 font-mono text-slate-500 dark:text-slate-400", children: [
+            "#",
+            t.item
+          ] })),
+          t.comment && /* @__PURE__ */ e(
+            "span",
+            {
+              className: "min-w-0 truncate text-slate-500 dark:text-slate-400",
+              title: t.comment,
+              children: t.comment
+            }
+          )
+        ] }, t.id);
+      }),
+      (d == null ? void 0 : d.length) === 500 && /* @__PURE__ */ e("li", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: "The first 500 are shown — export for all." })
+    ] }) })
+  ] });
+}
+export {
+  G as PersonDidPanel,
+  $ as collectionName
+};

package/dist/shared/components/profile/PersonProfile.js

@@ -2,29 +2,31 @@ import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import { useState as b } from "react";
 import { useItemEditAuth as _ } from "../../context.js";
 import { cn as l } from "../../lib/utils.js";
-import { Tabs as A, TabsList as I, TabsTrigger as S, TabsContent as o } from "../ui/tabs.js";
+import { PermissionSummaryCard as A } from "../access/PermissionSummary.js";
+import { Tabs as I, TabsList as P, TabsTrigger as S, TabsContent as i } from "../ui/tabs.js";
 import { DayTimelineCard as T } from "./DayTimeline.js";
-import { DelegationCard as P } from "./DelegationCard.js";
-import { MyDefaultsCard as D } from "./MyDefaultsCard.js";
-import { SuspensionBanner as U, AccessCard as F, UserScopesCard as M, UserDirectoryCard as O, SessionsCard as j, ApiTokenCard as E } from "./PersonAccess.js";
+import { DelegationCard as D } from "./DelegationCard.js";
+import { MyDefaultsCard as U } from "./MyDefaultsCard.js";
+import { SuspensionBanner as F, AccessCard as M, UserScopesCard as O, UserDirectoryCard as W, SessionsCard as j, ApiTokenCard as E } from "./PersonAccess.js";
 import { AccessSummaryCard as L } from "./PersonAccessSummary.js";
-import { StatsCard as R, ActivityFeedCard as V, SignInsCard as W, JourneyCard as B } from "./PersonActivity.js";
-import { ForceReloadCard as H, SignOutEverywhereCard as J, MergeCard as q, OffboardingCard as z } from "./PersonAdminTools.js";
-import { PersonAiMemoryCard as G } from "./PersonAiMemory.js";
-import { CompareAccessCard as K } from "./PersonCompare.js";
-import { WorkingOnCard as Q, TeamLoadCard as X, WhyCard as Y } from "./PersonExtras.js";
-import { PersonHeader as Z } from "./PersonHeader.js";
-import { AboutCard as $, PeopleCard as ee, AvailabilityCard as re, ResponsibilitiesCard as ae } from "./PersonOverview.js";
-import { PersonWeekCard as de } from "./PersonWeek.js";
-import { usePersonProfile as se, useInvalidatePerson as te } from "./types.js";
-function Ae({
-  userId: i,
+import { StatsCard as R, ActivityFeedCard as V, SignInsCard as B, JourneyCard as H } from "./PersonActivity.js";
+import { ForceReloadCard as J, SignOutEverywhereCard as q, MergeCard as z, OffboardingCard as G } from "./PersonAdminTools.js";
+import { PersonAiMemoryCard as K } from "./PersonAiMemory.js";
+import { CompareAccessCard as Q } from "./PersonCompare.js";
+import { PersonDidPanel as X } from "./PersonDidPanel.js";
+import { WorkingOnCard as Y, TeamLoadCard as Z, WhyCard as $ } from "./PersonExtras.js";
+import { PersonHeader as ee } from "./PersonHeader.js";
+import { AboutCard as re, PeopleCard as ae, AvailabilityCard as de, ResponsibilitiesCard as se } from "./PersonOverview.js";
+import { PersonWeekCard as te } from "./PersonWeek.js";
+import { usePersonProfile as ie, useInvalidatePerson as oe } from "./types.js";
+function Te({
+  userId: o,
   className: n,
-  initialTab: f = "overview"
+  initialTab: h = "overview"
 }) {
-  var v, u, g;
-  const t = _(), s = !!(t != null && t.isAdmin), { data: e, isLoading: h, isError: y } = se(i), x = te(i), [N, C] = b(f), [c, k] = b("feed");
-  if (h || !e && !y) return /* @__PURE__ */ r(ie, { className: n });
+  var v, g, f;
+  const t = _(), s = !!(t != null && t.isAdmin), { data: e, isLoading: y, isError: x } = ie(o), N = oe(o), [u, C] = b(h), [c, k] = b("feed");
+  if (y || !e && !x) return /* @__PURE__ */ r(le, { className: n });
   if (!e)
     return /* @__PURE__ */ a(
       "div",
@@ -42,21 +44,21 @@ function Ae({
     );
   const w = !!(t != null && t.userId) && !!((v = e.manager) != null && v.id) && String(e.manager.id).toUpperCase() === String(t.userId).toUpperCase(), p = /* @__PURE__ */ a("div", { className: "grid gap-4 lg:grid-cols-2", children: [
     /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ r($, { profile: e, isAdmin: s }),
-      /* @__PURE__ */ r(Q, { profile: e }),
+      /* @__PURE__ */ r(re, { profile: e, isAdmin: s }),
+      /* @__PURE__ */ r(Y, { profile: e }),
       e.direct_reports.length > 0 && /* @__PURE__ */ r(
-        X,
+        Z,
         {
           userId: e.id,
           firstName: e.first_name ?? e.name,
           expectedRows: e.direct_reports.length
         }
       ),
-      /* @__PURE__ */ r(ee, { profile: e })
+      /* @__PURE__ */ r(ae, { profile: e })
     ] }),
     /* @__PURE__ */ a("div", { className: "space-y-4", children: [
       s ? /* @__PURE__ */ r(
-        P,
+        D,
         {
           user: {
             id: e.id,
@@ -66,26 +68,26 @@ function Ae({
             role: e.role_id,
             status: e.status,
             is_out_of_office: e.is_out_of_office,
-            delegate_id: ((u = e.delegate) == null ? void 0 : u.id) ?? null,
-            delegate_expires_at: ((g = e.delegate) == null ? void 0 : g.expires_at) ?? null,
+            delegate_id: ((g = e.delegate) == null ? void 0 : g.id) ?? null,
+            delegate_expires_at: ((f = e.delegate) == null ? void 0 : f.expires_at) ?? null,
             ooo_start: e.ooo_start,
             ooo_end: e.ooo_end
           },
           forUser: { id: e.id, firstName: e.first_name ?? e.name },
           coversFor: e.covers_for,
-          onSaved: x
+          onSaved: N
         }
-      ) : /* @__PURE__ */ r(re, { profile: e }),
-      /* @__PURE__ */ r(ae, { profile: e, isAdmin: s }),
-      (s || w) && /* @__PURE__ */ r(de, { profile: e })
+      ) : /* @__PURE__ */ r(de, { profile: e }),
+      /* @__PURE__ */ r(se, { profile: e, isAdmin: s }),
+      (s || w) && /* @__PURE__ */ r(te, { profile: e })
     ] })
   ] });
   return /* @__PURE__ */ a("div", { className: l("flex flex-col gap-4", n), "data-nvr-person": e.id, children: [
-    /* @__PURE__ */ r(Z, { profile: e, isAdmin: s }),
-    s && /* @__PURE__ */ r(U, { profile: e }),
-    s ? /* @__PURE__ */ a(A, { value: N, onValueChange: (d) => C(d), children: [
+    /* @__PURE__ */ r(ee, { profile: e, isAdmin: s }),
+    s && /* @__PURE__ */ r(F, { profile: e }),
+    s ? /* @__PURE__ */ a(I, { value: u, onValueChange: (d) => C(d), children: [
       /* @__PURE__ */ r(
-        I,
+        P,
         {
           className: "h-9 w-full justify-start gap-1 rounded-lg border border-slate-200 bg-white p-1 dark:border-border dark:bg-card",
           "data-person-tabs": !0,
@@ -93,6 +95,7 @@ function Ae({
             ["overview", "Overview"],
             ["access", "Access"],
             ["activity", "Activity"],
+            ["did", "What they did"],
             ["tools", "Admin tools"]
           ].map(([d, m]) => /* @__PURE__ */ r(
             S,
@@ -106,22 +109,23 @@ function Ae({
           ))
         }
       ),
-      /* @__PURE__ */ r(o, { value: "overview", className: "mt-4 focus-visible:outline-none", children: p }),
-      /* @__PURE__ */ r(o, { value: "access", className: "mt-4 focus-visible:outline-none", children: /* @__PURE__ */ a("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ r(i, { value: "overview", className: "mt-4 focus-visible:outline-none", children: p }),
+      /* @__PURE__ */ r(i, { value: "access", className: "mt-4 focus-visible:outline-none", children: /* @__PURE__ */ a("div", { className: "grid gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ r(F, { profile: e }),
+          /* @__PURE__ */ r(M, { profile: e }),
           /* @__PURE__ */ r(L, { userId: e.id }),
-          /* @__PURE__ */ r(M, { userId: e.id }),
-          /* @__PURE__ */ r(Y, { profile: e }),
-          /* @__PURE__ */ r(K, { profile: e })
+          /* @__PURE__ */ r(A, { userId: e.id }),
+          /* @__PURE__ */ r(O, { userId: e.id }),
+          /* @__PURE__ */ r($, { profile: e }),
+          /* @__PURE__ */ r(Q, { profile: e })
         ] }),
         /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ r(O, { profile: e }),
+          /* @__PURE__ */ r(W, { profile: e }),
           /* @__PURE__ */ r(j, { userId: e.id }),
           /* @__PURE__ */ r(E, { profile: e })
         ] })
       ] }) }),
-      /* @__PURE__ */ a(o, { value: "activity", className: "mt-4 focus-visible:outline-none", children: [
+      /* @__PURE__ */ a(i, { value: "activity", className: "mt-4 focus-visible:outline-none", children: [
         /* @__PURE__ */ a(
           "fieldset",
           {
@@ -156,28 +160,29 @@ function Ae({
             /* @__PURE__ */ r(V, { userId: e.id })
           ] }),
           /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ r(W, { profile: e }),
-            /* @__PURE__ */ r(B, { userId: e.id })
+            /* @__PURE__ */ r(B, { profile: e }),
+            /* @__PURE__ */ r(H, { userId: e.id })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ r(o, { value: "tools", className: "mt-4 focus-visible:outline-none", children: /* @__PURE__ */ a("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ r(i, { value: "did", className: "mt-4 focus-visible:outline-none", children: u === "did" && /* @__PURE__ */ r(X, { userId: e.id, name: e.first_name ?? e.name }) }),
+      /* @__PURE__ */ r(i, { value: "tools", className: "mt-4 focus-visible:outline-none", children: /* @__PURE__ */ a("div", { className: "grid gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ r(H, { profile: e }),
           /* @__PURE__ */ r(J, { profile: e }),
-          /* @__PURE__ */ r(q, { profile: e })
+          /* @__PURE__ */ r(q, { profile: e }),
+          /* @__PURE__ */ r(z, { profile: e })
         ] }),
         /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ r(z, { profile: e }),
           /* @__PURE__ */ r(G, { profile: e }),
-          /* @__PURE__ */ r(D, { userId: e.id, name: e.first_name ?? e.name })
+          /* @__PURE__ */ r(K, { profile: e }),
+          /* @__PURE__ */ r(U, { userId: e.id, name: e.first_name ?? e.name })
         ] })
       ] }) })
     ] }) : p
   ] });
 }
-function ie({ className: i }) {
-  return /* @__PURE__ */ a("div", { className: l("flex animate-pulse flex-col gap-4", i), "aria-busy": "true", children: [
+function le({ className: o }) {
+  return /* @__PURE__ */ a("div", { className: l("flex animate-pulse flex-col gap-4", o), "aria-busy": "true", children: [
     /* @__PURE__ */ a("div", { className: "flex items-center gap-5 rounded-lg border border-slate-200 bg-white p-5 dark:border-border dark:bg-card", children: [
       /* @__PURE__ */ r("div", { className: "h-[76px] w-[76px] rounded-full bg-slate-100 dark:bg-muted" }),
       /* @__PURE__ */ a("div", { className: "flex-1 space-y-2.5", children: [
@@ -193,5 +198,5 @@ function ie({ className: i }) {
   ] });
 }
 export {
-  Ae as PersonProfile
+  Te as PersonProfile
 };