@terpjs/react-core 0.1.0

package/src/admin/UserDetail.tsx

@@ -0,0 +1,228 @@
+import { useParams } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import type { components } from "@terpjs/contract";
+
+import { ConfirmDialog } from "../ConfirmDialog";
+import { DetailPage } from "../DetailPage";
+import { Field } from "../Field";
+import { Icon } from "../icons";
+import { DetailList } from "../layout";
+import { PageActions } from "../PageActions";
+import { useTerpClient } from "../TerpProvider";
+import { useResource } from "../useResource";
+import { useToast } from "../toast";
+import { Button } from "../ui/Button";
+import { Input } from "../ui/Input";
+import { useStrings } from "../uiText";
+import { unwrap } from "../unwrap";
+
+import { adminCrumb, renderAdminCrumb } from "./crumbs";
+import { adminRoleLabel, adminRoleOptions } from "./roles";
+
+type UserRead = components["schemas"]["UserRead"];
+
+type PendingLifecycle =
+  | { kind: "role"; rank: number }
+  | { kind: "active"; active: boolean };
+
+/** Dedicated account detail and lifecycle page (`/admin/users/$userId`). */
+export function UserDetail() {
+  const params = useParams({ strict: false }) as { userId?: string };
+  const userId = params.userId ?? "";
+  const client = useTerpClient();
+  const strings = useStrings();
+  const toast = useToast();
+  const [pendingLifecycle, setPendingLifecycle] = useState<PendingLifecycle | null>(null);
+  const [mutating, setMutating] = useState(false);
+  const [resetOpen, setResetOpen] = useState(false);
+  const [resetPassword, setResetPassword] = useState("");
+  const [resetting, setResetting] = useState(false);
+  const roles = adminRoleOptions(strings);
+
+  useEffect(() => {
+    setPendingLifecycle(null);
+    setResetOpen(false);
+    setResetPassword("");
+    setMutating(false);
+    setResetting(false);
+  }, [userId]);
+
+  const user = useResource<UserRead>(
+    {
+      list: async () => [
+        unwrap(
+          await client.GET("/api/v1/users/{user_id}", {
+            params: { path: { user_id: userId } },
+          }),
+        ),
+      ],
+    },
+    [userId],
+  );
+  const record = user.items[0];
+
+  function failed(error: unknown): void {
+    toast.warning(error instanceof Error ? error.message : strings.requestFailed);
+  }
+
+  async function onConfirmLifecycle() {
+    if (record === undefined || pendingLifecycle === null) return;
+    setMutating(true);
+    try {
+      if (pendingLifecycle.kind === "role") {
+        unwrap(
+          await client.PATCH("/api/v1/users/{user_id}", {
+            params: { path: { user_id: record.id } },
+            body: { role: pendingLifecycle.rank, version: record.version },
+          }),
+        );
+      } else {
+        const path = pendingLifecycle.active
+          ? "/api/v1/users/{user_id}/reactivate"
+          : "/api/v1/users/{user_id}/deactivate";
+        unwrap(await client.POST(path, { params: { path: { user_id: record.id } } }));
+      }
+      toast.success(strings.saved);
+      setPendingLifecycle(null);
+      await user.reload();
+    } catch (error) {
+      failed(error);
+    } finally {
+      setMutating(false);
+    }
+  }
+
+  async function onConfirmReset() {
+    if (record === undefined || resetPassword.trim() === "") return;
+    setResetting(true);
+    try {
+      unwrap(
+        await client.POST("/api/v1/users/{user_id}/reset-password", {
+          params: { path: { user_id: record.id } },
+          body: { password: resetPassword },
+        }),
+      );
+      toast.success(strings.saved);
+      setResetOpen(false);
+      setResetPassword("");
+      await user.reload();
+    } catch (error) {
+      failed(error);
+    } finally {
+      setResetting(false);
+    }
+  }
+
+  const pendingRole = pendingLifecycle?.kind === "role"
+    ? adminRoleLabel(strings, pendingLifecycle.rank)
+    : "";
+  const lifecycleDescription = pendingLifecycle?.kind === "role"
+    ? strings.changeRoleConfirm.replace("{role}", pendingRole)
+    : pendingLifecycle?.active
+      ? strings.reactivateUserConfirm
+      : strings.deactivateUserConfirm;
+
+  return (
+    <DetailPage
+      title={record?.email ?? strings.adminUsers}
+      parents={[
+        { ...adminCrumb(strings), to: "/admin" },
+        { label: strings.adminUsers, to: "/admin/users" },
+      ]}
+      renderLink={renderAdminCrumb}
+      isLoading={user.loading}
+      error={user.cause ?? user.error ?? undefined}
+      actions={record !== undefined ? (
+        <PageActions
+          secondary={
+            <Button
+              variant="secondary"
+              icon={<Icon name="key" />}
+              onClick={() => setResetOpen(true)}
+            >
+              {strings.resetPassword}
+            </Button>
+          }
+          overflow={[
+            ...roles
+              .filter((option) => option.rank !== record.role)
+              .map((option) => ({
+                label: strings.makeRole.replace("{role}", option.label.toLowerCase()),
+                onSelect: () => setPendingLifecycle({ kind: "role", rank: option.rank }),
+              })),
+            record.is_active
+              ? {
+                  label: strings.deactivate,
+                  icon: <Icon name="lock" />,
+                  variant: "destructive" as const,
+                  onSelect: () => setPendingLifecycle({ kind: "active", active: false }),
+                }
+              : {
+                  label: strings.reactivate,
+                  icon: <Icon name="refresh" />,
+                  onSelect: () => setPendingLifecycle({ kind: "active", active: true }),
+                },
+          ]}
+        />
+      ) : undefined}
+    >
+      {record !== undefined && (
+        <DetailList
+          items={[
+            { label: strings.email, value: record.email },
+            { label: strings.role, value: adminRoleLabel(strings, record.role) },
+            {
+              label: strings.statusColumn,
+              value: record.is_active ? strings.statusActive : strings.statusDeactivated,
+            },
+            { label: strings.createdColumn, value: new Date(record.created_at).toLocaleString() },
+          ]}
+        />
+      )}
+      <ConfirmDialog
+        open={pendingLifecycle !== null}
+        onOpenChange={(open) => {
+          if (!open) setPendingLifecycle(null);
+        }}
+        onConfirm={() => void onConfirmLifecycle()}
+        title={pendingLifecycle?.kind === "role"
+          ? strings.makeRole.replace("{role}", pendingRole.toLowerCase())
+          : pendingLifecycle?.active
+            ? strings.reactivate
+            : strings.deactivate}
+        description={lifecycleDescription}
+        confirmLabel={pendingLifecycle?.kind === "role"
+          ? strings.confirm
+          : pendingLifecycle?.active
+            ? strings.reactivate
+            : strings.deactivate}
+        destructive={pendingLifecycle?.kind === "active" && !pendingLifecycle.active}
+        isPending={mutating}
+      />
+      <ConfirmDialog
+        open={resetOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setResetOpen(false);
+            setResetPassword("");
+          }
+        }}
+        onConfirm={() => void onConfirmReset()}
+        title={`${strings.resetPassword}: ${record?.email ?? ""}`}
+        description={
+          <Field label={strings.newPassword}>
+            <Input
+              type="password"
+              value={resetPassword}
+              onChange={(event) => setResetPassword(event.target.value)}
+              required
+            />
+          </Field>
+        }
+        confirmLabel={strings.resetPassword}
+        confirmDisabled={resetPassword.trim() === ""}
+        isPending={resetting}
+      />
+    </DetailPage>
+  );
+}

package/src/admin/UsersAdmin.tsx

@@ -0,0 +1,111 @@
+import { useNavigate } from "@tanstack/react-router";
+import { useMemo } from "react";
+import type { components } from "@terpjs/contract";
+
+import { Icon } from "../icons";
+import { OverviewPage } from "../OverviewPage";
+import { PageActions } from "../PageActions";
+import { useTerpClient } from "../TerpProvider";
+import { DataView, HttpDataViewRepository, useServerDataView } from "../dataview";
+import type { DataViewColumn } from "../dataview";
+import { Button } from "../ui/Button";
+import { useStrings } from "../uiText";
+import type { TerpStrings } from "../uiText";
+import { unwrap } from "../unwrap";
+
+import { adminCrumb, renderAdminCrumb } from "./crumbs";
+import { adminRoleLabel } from "./roles";
+
+type UserRead = components["schemas"]["UserRead"];
+
+function buildColumns(strings: TerpStrings): DataViewColumn<UserRead>[] {
+  return [
+    { id: "email", header: strings.email, accessor: (u) => u.email, meta: { mobileSlot: "title" } },
+    {
+      id: "role",
+      header: strings.role,
+      accessor: (u) => u.role,
+      cell: (u) => adminRoleLabel(strings, u.role),
+      meta: { mobileSlot: "subtitle", width: 100 },
+    },
+    {
+      id: "is_active",
+      header: strings.statusColumn,
+      accessor: (u) => (u.is_active ? strings.statusActive : strings.statusDeactivated),
+      meta: { mobileSlot: "status", width: 110 },
+    },
+    {
+      id: "created_at",
+      header: strings.createdColumn,
+      accessor: (u) => u.created_at,
+      cell: (u) => new Date(u.created_at).toLocaleDateString(),
+      meta: { mobileSlot: "date", width: 120 },
+    },
+  ];
+}
+
+/**
+ * The packaged users overview (`/admin/users`): a server-paged directory whose rows
+ * open dedicated detail pages. Creation and lifecycle mutations live on routed pages,
+ * keeping this screen focused on finding and comparing accounts.
+ */
+export function UsersAdmin() {
+  const client = useTerpClient();
+  const strings = useStrings();
+  const navigate = useNavigate();
+  const serverQuery = useServerDataView({ initialPageSize: 10 });
+
+  const columns = useMemo(() => buildColumns(strings), [strings]);
+  const repository = useMemo(
+    () =>
+      new HttpDataViewRepository<UserRead>({
+        getRowId: (u) => u.id,
+        search: false,
+        request: async ({ skip, limit }, signal) => {
+          const page = unwrap(
+            await client.GET("/api/v1/users/", {
+              params: { query: { skip, limit } },
+              signal,
+            }),
+          );
+          return { items: page.items, total: page.total };
+        },
+      }),
+    [client],
+  );
+
+  return (
+    <OverviewPage
+      title={strings.adminUsers}
+      parents={[{ ...adminCrumb(strings), to: "/admin" }]}
+      renderLink={renderAdminCrumb}
+      actions={
+        <PageActions
+          primary={
+            <Button
+              icon={<Icon name="plus" />}
+              onClick={() => void navigate({ to: "/admin/users/new" })}
+            >
+              {strings.provisionUser}
+            </Button>
+          }
+        />
+      }
+    >
+      <DataView<UserRead>
+        viewId="terp.admin.users"
+        repository={repository}
+        columns={columns}
+        serverQuery={serverQuery}
+        pageSizeOptions={[10, 25, 50]}
+        getRowLabel={(user) => user.email}
+        onRowClick={(user) =>
+          void navigate({
+            to: "/admin/users/$userId",
+            params: { userId: user.id },
+          })
+        }
+      />
+    </OverviewPage>
+  );
+}