@fonderie/react-admin-screens 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -483,17 +483,22 @@ function TokensScreen({ client }) {
 var import_react_admin8 = require("@fonderie/react-admin");
 var import_react2 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function UsersScreen({ client }) {
+function UsersScreen({ client, pageSize = 50 }) {
   const [input, setInput] = (0, import_react2.useState)("");
-  const [email, setEmail] = (0, import_react2.useState)(void 0);
+  const [selected, setSelected] = (0, import_react2.useState)(null);
+  const list = (0, import_react_admin8.useAdminUsers)(client, { limit: pageSize });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_react_admin8.useAdminUser)(
     client,
-    email ? { email } : {}
+    selected ?? {}
   );
   const userId = user?.id ?? null;
   const sessions = (0, import_react_admin8.useAdminUserSessions)(client, userId);
   const history = (0, import_react_admin8.useAdminLoginHistory)(client, userId, { limit: 20 });
   const yesNo = (v) => v ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.ok, children: "yes" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.muted, children: "no" });
+  const clear = () => {
+    setSelected(null);
+    setInput("");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { style: styles.title, children: "Users" }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -502,7 +507,8 @@ function UsersScreen({ client }) {
         style: styles.toolbar,
         onSubmit: (e) => {
           e.preventDefault();
-          setEmail(input.trim() || void 0);
+          const email = input.trim();
+          setSelected(email ? { email } : null);
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -516,11 +522,60 @@ function UsersScreen({ client }) {
               "aria-label": "Email"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", style: styles.button, onClick: clear, children: "\u2190 All users" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void list.refresh(),
+              disabled: list.isLoading,
+              children: "Refresh"
+            }
+          )
         ]
       }
     ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
+    !selected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      list.error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.muted, children: "No users yet." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { style: styles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: list.users.map((u) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.navItem, padding: 0 },
+              onClick: () => setSelected({ id: u.id }),
+              children: u.email
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.muted, children: "\u2014" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("td", { style: styles.td, children: [
+            u.suspended ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.badge, children: "suspended" }) : null,
+            u.deletedAt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.badge, children: "deleted" }) : null,
+            !u.suspended && !u.deletedAt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.muted, children: "active" }) : null
+          ] })
+        ] }, u.id)) })
+      ] }),
+      list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void list.loadMore(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null,
     user ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("h2", { style: styles.subtitle, children: [
         user.firstName || user.lastName ? `${user.firstName} ${user.lastName}`.trim() : user.email,
@@ -697,14 +752,21 @@ function CatalogScreen({ client }) {
 var import_react_admin10 = require("@fonderie/react-admin");
 var import_react3 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function SubscriberScreen({ client }) {
+function SubscriberScreen({ client, pageSize = 50 }) {
   const [type, setType] = (0, import_react3.useState)("user");
   const [idInput, setIdInput] = (0, import_react3.useState)("");
   const [subscriber, setSubscriber] = (0, import_react3.useState)(null);
+  const list = (0, import_react_admin10.useAdminSubscribers)(client, { limit: pageSize });
   const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_react_admin10.useAdminSubscriber)(client, subscriber, { limit: 20 });
   const [amount, setAmount] = (0, import_react3.useState)("");
   const [note, setNote] = (0, import_react3.useState)("");
   const [granted, setGranted] = (0, import_react3.useState)(null);
+  const open = (t, id) => {
+    setGranted(null);
+    setType(t);
+    setIdInput(id);
+    setSubscriber({ type: t, id });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { style: styles.title, children: "Subscriber" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -740,11 +802,79 @@ function SubscriberScreen({ client }) {
               "aria-label": "Subscriber id"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
+          subscriber ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                setSubscriber(null);
+                setIdInput("");
+                setGranted(null);
+              },
+              children: "\u2190 All subscribers"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void list.refresh(),
+              disabled: list.isLoading,
+              children: "Refresh"
+            }
+          )
         ]
       }
     ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    !subscriber ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      list.error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.muted, children: "No subscribers yet." }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { style: styles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Subscriber" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Status" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Renews" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: styles.td, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.navItem, padding: 0, ...styles.mono },
+              onClick: () => open(s.subscriberType, s.subscriberId),
+              children: [
+                s.subscriberType,
+                "/",
+                s.subscriberId
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("td", { style: styles.td, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: s.plan }),
+            " \xB7 ",
+            s.interval
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("td", { style: styles.td, children: [
+            s.status,
+            s.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: styles.badge, children: "cancels" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: styles.muted, children: "\u2014" }) })
+        ] }, s.id)) })
+      ] }),
+      list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void list.loadMore(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null,
     subscriber && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { style: styles.subtitle, children: "Subscription" }),
       subscription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("table", { style: styles.table, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tbody", { children: [