@mesob/auth-react 0.4.4 → 0.4.6

package/dist/chunk-FPYQ7XGV.js

@@ -0,0 +1,415 @@
+import {
+  str
+} from "./chunk-OW75JENQ.js";
+import {
+  Link,
+  authApi$
+} from "./chunk-W3D4HG5W.js";
+
+// src/pages/iam/users/_components/user-card.tsx
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "@mesob/ui/components";
+import { IconCircleCheck, IconDots, IconPencil } from "@tabler/icons-react";
+import { useState } from "react";
+
+// src/pages/iam/users/_components/user-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Checkbox,
+  EntityDrawer,
+  EntityFormActions,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Skeleton,
+  Stack
+} from "@mesob/ui/components";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var schema = z.object({
+  fullName: z.string().trim().min(1, "Full name is required"),
+  email: z.string().email("Invalid email").nullable().or(z.literal("")),
+  phone: z.string().nullable(),
+  emailVerified: z.boolean(),
+  phoneVerified: z.boolean(),
+  roleIds: z.array(z.string().uuid())
+});
+var defaults = {
+  fullName: "",
+  email: "",
+  phone: null,
+  emailVerified: false,
+  phoneVerified: false,
+  roleIds: []
+};
+function UserForm({
+  mode,
+  userId,
+  open,
+  onClose,
+  onSuccess
+}) {
+  const qc = useQueryClient();
+  const { data: userData, isLoading: userLoading } = authApi$.useQuery(
+    "get",
+    "/users/{id}",
+    { params: { path: { id: userId ?? "" } } },
+    { enabled: mode === "edit" && !!userId && open }
+  );
+  const { data: rolesData } = authApi$.useQuery(
+    "get",
+    "/roles",
+    { params: { query: { limit: 100 } } },
+    { enabled: open }
+  );
+  const allRoles = rolesData?.roles ?? [];
+  const roles = allRoles.filter((r) => (r.code ?? "").toLowerCase() !== "owner").sort(
+    (a, b) => (str(a.name) || a.code).toLowerCase().localeCompare((str(b.name) || b.code).toLowerCase())
+  );
+  const user = userData?.user;
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: defaults
+  });
+  const { control, formState, reset, setValue } = form;
+  const email = useWatch({ control, name: "email" }) ?? "";
+  const phone = useWatch({ control, name: "phone" }) ?? "";
+  const roleIds = useWatch({ control, name: "roleIds" }) ?? [];
+  const hasEmail = (email ?? "").toString().trim().length > 0;
+  const hasPhone = (phone ?? "").toString().trim().length > 0;
+  useEffect(() => {
+    if (!hasEmail) {
+      setValue("emailVerified", false, { shouldDirty: false });
+    }
+    if (!hasPhone) {
+      setValue("phoneVerified", false, { shouldDirty: false });
+    }
+  }, [hasEmail, hasPhone, setValue]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (mode === "edit" && user && !userLoading) {
+      reset({
+        fullName: user.fullName,
+        email: user.email ?? "",
+        phone: user.phone ?? null,
+        emailVerified: user.emailVerified ?? false,
+        phoneVerified: user.phoneVerified ?? false,
+        roleIds: user.roles ?? []
+      });
+    } else {
+      reset(defaults);
+    }
+  }, [mode, user, open, userLoading, reset]);
+  const create = authApi$.useMutation("post", "/users", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/users"] });
+    }
+  });
+  const update = authApi$.useMutation("put", "/users/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/users"] });
+      if (userId) {
+        qc.invalidateQueries({ queryKey: ["get", "/users/{id}"] });
+      }
+    }
+  });
+  const del = authApi$.useMutation("delete", "/users/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/users"] });
+    }
+  });
+  const onSubmit = form.handleSubmit(async (d) => {
+    const base = {
+      fullName: d.fullName,
+      email: d.email?.trim() || void 0,
+      phone: d.phone?.trim() || void 0,
+      emailVerified: d.emailVerified,
+      phoneVerified: d.phoneVerified
+    };
+    if (mode === "new") {
+      await create.mutateAsync({
+        body: {
+          ...base,
+          email: base.email || void 0,
+          phone: base.phone || void 0
+        }
+      });
+    } else if (userId) {
+      await update.mutateAsync({
+        params: { path: { id: userId } },
+        body: {
+          ...base,
+          email: base.email ?? null,
+          phone: base.phone ?? null,
+          roleIds: d.roleIds
+        }
+      });
+    }
+    onSuccess?.();
+    onClose();
+  });
+  const onDelete = async () => {
+    if (!userId) {
+      return;
+    }
+    await del.mutateAsync({ params: { path: { id: userId } } });
+    onSuccess?.();
+    onClose();
+  };
+  const toggleRole = (roleId, checked) => {
+    const next = checked ? [...roleIds, roleId] : roleIds.filter((id) => id !== roleId);
+    setValue("roleIds", next, { shouldDirty: true });
+  };
+  const isSubmitting = create.isPending || update.isPending;
+  return /* @__PURE__ */ jsx(
+    EntityDrawer,
+    {
+      title: mode === "new" ? "New user" : "Edit user",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "lg",
+      form: userLoading && mode === "edit" ? /* @__PURE__ */ jsx(FormSkeleton, {}) : /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsx(
+            FormField,
+            {
+              control,
+              name: "fullName",
+              render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+                /* @__PURE__ */ jsxs(FormLabel, { children: [
+                  "Full name ",
+                  /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+                ] }),
+                /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: "Full name", ...field }) }),
+                /* @__PURE__ */ jsx(FormMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormField,
+            {
+              control,
+              name: "email",
+              render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+                /* @__PURE__ */ jsx(FormLabel, { children: "Email" }),
+                /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "email",
+                    placeholder: "user@example.com",
+                    ...field,
+                    value: field.value ?? ""
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(FormMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormField,
+            {
+              control,
+              name: "phone",
+              render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+                /* @__PURE__ */ jsx(FormLabel, { children: "Phone" }),
+                /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "+251911223344",
+                    ...field,
+                    value: field.value ?? ""
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(FormMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: "Verification" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-6 pt-1", children: [
+              /* @__PURE__ */ jsx(
+                FormField,
+                {
+                  control,
+                  name: "emailVerified",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-row items-center gap-2 space-y-0", children: [
+                    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        size: "lg",
+                        checked: field.value,
+                        disabled: !hasEmail,
+                        onCheckedChange: (c) => field.onChange(c === true)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(FormLabel, { className: "cursor-pointer font-normal", children: "Email verified" }),
+                    /* @__PURE__ */ jsx(FormMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FormField,
+                {
+                  control,
+                  name: "phoneVerified",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-row items-center gap-2 space-y-0", children: [
+                    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        size: "lg",
+                        checked: field.value,
+                        disabled: !hasPhone,
+                        onCheckedChange: (c) => field.onChange(c === true)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(FormLabel, { className: "cursor-pointer font-normal", children: "Phone verified" }),
+                    /* @__PURE__ */ jsx(FormMessage, {})
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        mode === "edit" && roles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: "Roles" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 pt-1", children: roles.map((role) => {
+            const desc = str(role.description);
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  size: "lg",
+                  id: `role-${role.id}`,
+                  checked: roleIds.includes(role.id),
+                  onCheckedChange: (c) => toggleRole(role.id, c === true),
+                  className: "mt-0.5"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  htmlFor: `role-${role.id}`,
+                  className: "flex min-w-0 flex-1 cursor-pointer flex-col gap-0.5",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: str(role.name) || role.code }),
+                    desc ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: desc }) : null
+                  ]
+                }
+              )
+            ] }, role.id);
+          }) })
+        ] })
+      ] }) }),
+      actions: /* @__PURE__ */ jsx(
+        EntityFormActions,
+        {
+          mode,
+          onSubmit,
+          onReset: mode === "new" ? () => reset(defaults) : void 0,
+          onDelete: mode === "edit" ? onDelete : void 0,
+          isSubmitting,
+          isDeleting: del.isPending,
+          disabled: userLoading && mode === "edit",
+          itemName: "user"
+        }
+      )
+    }
+  );
+}
+function FormSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+  ] }, i)) });
+}
+
+// src/pages/iam/users/_components/user-card.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function UserCard({ user }) {
+  const [editOpen, setEditOpen] = useState(false);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Card, { className: "group hover:shadow-md transition-shadow", children: [
+      /* @__PURE__ */ jsx2(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx2(
+          Link,
+          {
+            href: `/iam/users/${user.id}`,
+            className: "text-left font-semibold hover:text-primary hover:underline",
+            children: user.fullName
+          }
+        ),
+        /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx2(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                }
+              ),
+              children: /* @__PURE__ */ jsx2(IconDots, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx2(DropdownMenuPortal, { children: /* @__PURE__ */ jsx2(DropdownMenuContent, { children: /* @__PURE__ */ jsxs2(DropdownMenuItem, { onClick: () => setEditOpen(true), children: [
+            /* @__PURE__ */ jsx2(IconPencil, { className: "mr-2 h-4 w-4" }),
+            "Edit"
+          ] }) }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-2", children: [
+        user.email && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2("span", { className: "text-sm", children: user.email }),
+          user.emailVerified && /* @__PURE__ */ jsxs2(Tooltip, { children: [
+            /* @__PURE__ */ jsx2(TooltipTrigger, { children: /* @__PURE__ */ jsx2(IconCircleCheck, { className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsx2(TooltipContent, { children: "Email verified" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+          "Last sign in",
+          " ",
+          user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "never"
+        ] })
+      ] })
+    ] }),
+    editOpen && /* @__PURE__ */ jsx2(
+      UserForm,
+      {
+        mode: "edit",
+        userId: user.id,
+        open: editOpen,
+        onClose: () => setEditOpen(false)
+      }
+    )
+  ] });
+}
+
+export {
+  UserForm,
+  UserCard
+};
+//# sourceMappingURL=chunk-FPYQ7XGV.js.map

package/dist/chunk-FPYQ7XGV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/iam/users/_components/user-card.tsx","../src/pages/iam/users/_components/user-form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@mesob/ui/components';\nimport { IconCircleCheck, IconDots, IconPencil } from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Link } from '../../shared/page-helpers';\nimport { UserForm } from './user-form';\nimport type { User } from './users-data';\n\ntype UserCardProps = { user: User };\n\nexport function UserCard({ user }: UserCardProps) {\n  const [editOpen, setEditOpen] = useState(false);\n  return (\n    <>\n      <Card className=\"group hover:shadow-md transition-shadow\">\n        <CardHeader className=\"pb-2\">\n          <div className=\"flex items-start justify-between\">\n            <Link\n              href={`/iam/users/${user.id}`}\n              className=\"text-left font-semibold hover:text-primary hover:underline\"\n            >\n              {user.fullName}\n            </Link>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity\"\n                  />\n                }\n              >\n                <IconDots className=\"h-4 w-4\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuContent>\n                  <DropdownMenuItem onClick={() => setEditOpen(true)}>\n                    <IconPencil className=\"mr-2 h-4 w-4\" />\n                    Edit\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenuPortal>\n            </DropdownMenu>\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-2\">\n          {user.email && (\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm\">{user.email}</span>\n              {user.emailVerified && (\n                <Tooltip>\n                  <TooltipTrigger>\n                    <IconCircleCheck className=\"size-4 text-muted-foreground\" />\n                  </TooltipTrigger>\n                  <TooltipContent>Email verified</TooltipContent>\n                </Tooltip>\n              )}\n            </div>\n          )}\n          <p className=\"text-xs text-muted-foreground\">\n            Last sign in{' '}\n            {user.lastSignInAt\n              ? new Date(user.lastSignInAt).toLocaleDateString()\n              : 'never'}\n          </p>\n        </CardContent>\n      </Card>\n      {editOpen && (\n        <UserForm\n          mode=\"edit\"\n          userId={user.id}\n          open={editOpen}\n          onClose={() => setEditOpen(false)}\n        />\n      )}\n    </>\n  );\n}\n","'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport {\n  Checkbox,\n  EntityDrawer,\n  EntityFormActions,\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Input,\n  Skeleton,\n  Stack,\n} from '@mesob/ui/components';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useEffect } from 'react';\nimport { useForm, useWatch } from 'react-hook-form';\nimport { z } from 'zod';\nimport type { Role } from '../../roles/_components/roles-data';\nimport { str } from '../../roles/_components/roles-data';\nimport { authApi$ } from '../../shared/page-helpers';\n\nconst schema = z.object({\n  fullName: z.string().trim().min(1, 'Full name is required'),\n  email: z.string().email('Invalid email').nullable().or(z.literal('')),\n  phone: z.string().nullable(),\n  emailVerified: z.boolean(),\n  phoneVerified: z.boolean(),\n  roleIds: z.array(z.string().uuid()),\n});\n\ntype FormData = z.infer<typeof schema>;\n\nconst defaults: FormData = {\n  fullName: '',\n  email: '',\n  phone: null,\n  emailVerified: false,\n  phoneVerified: false,\n  roleIds: [],\n};\n\ntype UserFormProps = {\n  mode: 'new' | 'edit';\n  userId?: string;\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n};\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: form + roles section\nexport function UserForm({\n  mode,\n  userId,\n  open,\n  onClose,\n  onSuccess,\n}: UserFormProps) {\n  const qc = useQueryClient();\n  const { data: userData, isLoading: userLoading } = authApi$.useQuery(\n    'get',\n    '/users/{id}',\n    { params: { path: { id: userId ?? '' } } },\n    { enabled: mode === 'edit' && !!userId && open },\n  );\n  const { data: rolesData } = authApi$.useQuery(\n    'get',\n    '/roles',\n    { params: { query: { limit: 100 } } },\n    { enabled: open },\n  );\n  const allRoles = rolesData?.roles ?? [];\n  const roles = allRoles\n    .filter((r: Role) => (r.code ?? '').toLowerCase() !== 'owner')\n    .sort((a: Role, b: Role) =>\n      (str(a.name) || a.code)\n        .toLowerCase()\n        .localeCompare((str(b.name) || b.code).toLowerCase()),\n    );\n  const user = userData?.user;\n\n  const form = useForm<FormData>({\n    resolver: zodResolver(schema),\n    defaultValues: defaults,\n  });\n  const { control, formState, reset, setValue } = form;\n  const email = useWatch({ control, name: 'email' }) ?? '';\n  const phone = useWatch({ control, name: 'phone' }) ?? '';\n  const roleIds = useWatch({ control, name: 'roleIds' }) ?? [];\n  const hasEmail = (email ?? '').toString().trim().length > 0;\n  const hasPhone = (phone ?? '').toString().trim().length > 0;\n\n  useEffect(() => {\n    if (!hasEmail) {\n      setValue('emailVerified', false, { shouldDirty: false });\n    }\n    if (!hasPhone) {\n      setValue('phoneVerified', false, { shouldDirty: false });\n    }\n  }, [hasEmail, hasPhone, setValue]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    if (mode === 'edit' && user && !userLoading) {\n      reset({\n        fullName: user.fullName,\n        email: user.email ?? '',\n        phone: user.phone ?? null,\n        emailVerified: user.emailVerified ?? false,\n        phoneVerified: user.phoneVerified ?? false,\n        roleIds: user.roles ?? [],\n      });\n    } else {\n      reset(defaults);\n    }\n  }, [mode, user, open, userLoading, reset]);\n\n  const create = authApi$.useMutation('post', '/users', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/users'] });\n    },\n  });\n  const update = authApi$.useMutation('put', '/users/{id}', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/users'] });\n      if (userId) {\n        qc.invalidateQueries({ queryKey: ['get', '/users/{id}'] });\n      }\n    },\n  });\n  const del = authApi$.useMutation('delete', '/users/{id}', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/users'] });\n    },\n  });\n\n  const onSubmit = form.handleSubmit(async (d) => {\n    const base = {\n      fullName: d.fullName,\n      email: d.email?.trim() || undefined,\n      phone: d.phone?.trim() || undefined,\n      emailVerified: d.emailVerified,\n      phoneVerified: d.phoneVerified,\n    };\n    if (mode === 'new') {\n      await create.mutateAsync({\n        body: {\n          ...base,\n          email: base.email || undefined,\n          phone: base.phone || undefined,\n        },\n      });\n    } else if (userId) {\n      await update.mutateAsync({\n        params: { path: { id: userId } },\n        body: {\n          ...base,\n          email: base.email ?? null,\n          phone: base.phone ?? null,\n          roleIds: d.roleIds,\n        },\n      });\n    }\n    onSuccess?.();\n    onClose();\n  });\n\n  const onDelete = async () => {\n    if (!userId) {\n      return;\n    }\n    await del.mutateAsync({ params: { path: { id: userId } } });\n    onSuccess?.();\n    onClose();\n  };\n\n  const toggleRole = (roleId: string, checked: boolean) => {\n    const next = checked\n      ? [...roleIds, roleId]\n      : roleIds.filter((id) => id !== roleId);\n    setValue('roleIds', next, { shouldDirty: true });\n  };\n\n  const isSubmitting = create.isPending || update.isPending;\n\n  return (\n    <EntityDrawer\n      title={mode === 'new' ? 'New user' : 'Edit user'}\n      open={open}\n      onClose={onClose}\n      isDirty={formState.isDirty}\n      size=\"lg\"\n      form={\n        userLoading && mode === 'edit' ? (\n          <FormSkeleton />\n        ) : (\n          <Form {...form}>\n            <form onSubmit={onSubmit} className=\"space-y-6\">\n              <Stack>\n                <FormField\n                  control={control}\n                  name=\"fullName\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>\n                        Full name <span className=\"text-destructive\">*</span>\n                      </FormLabel>\n                      <FormControl>\n                        <Input placeholder=\"Full name\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={control}\n                  name=\"email\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Email</FormLabel>\n                      <FormControl>\n                        <Input\n                          type=\"email\"\n                          placeholder=\"user@example.com\"\n                          {...field}\n                          value={field.value ?? ''}\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={control}\n                  name=\"phone\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Phone</FormLabel>\n                      <FormControl>\n                        <Input\n                          placeholder=\"+251911223344\"\n                          {...field}\n                          value={field.value ?? ''}\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <div className=\"space-y-4\">\n                  <FormLabel>Verification</FormLabel>\n                  <div className=\"flex flex-wrap gap-6 pt-1\">\n                    <FormField\n                      control={control}\n                      name=\"emailVerified\"\n                      render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center gap-2 space-y-0\">\n                          <FormControl>\n                            <Checkbox\n                              size=\"lg\"\n                              checked={field.value}\n                              disabled={!hasEmail}\n                              onCheckedChange={(c) =>\n                                field.onChange(c === true)\n                              }\n                            />\n                          </FormControl>\n                          <FormLabel className=\"cursor-pointer font-normal\">\n                            Email verified\n                          </FormLabel>\n                          <FormMessage />\n                        </FormItem>\n                      )}\n                    />\n                    <FormField\n                      control={control}\n                      name=\"phoneVerified\"\n                      render={({ field }) => (\n                        <FormItem className=\"flex flex-row items-center gap-2 space-y-0\">\n                          <FormControl>\n                            <Checkbox\n                              size=\"lg\"\n                              checked={field.value}\n                              disabled={!hasPhone}\n                              onCheckedChange={(c) =>\n                                field.onChange(c === true)\n                              }\n                            />\n                          </FormControl>\n                          <FormLabel className=\"cursor-pointer font-normal\">\n                            Phone verified\n                          </FormLabel>\n                          <FormMessage />\n                        </FormItem>\n                      )}\n                    />\n                  </div>\n                </div>\n              </Stack>\n\n              {mode === 'edit' && roles.length > 0 && (\n                <div className=\"space-y-4\">\n                  <FormLabel>Roles</FormLabel>\n                  <div className=\"flex flex-col gap-3 pt-1\">\n                    {roles.map((role: Role) => {\n                      const desc = str(role.description);\n                      return (\n                        <div key={role.id} className=\"flex items-start gap-3\">\n                          <Checkbox\n                            size=\"lg\"\n                            id={`role-${role.id}`}\n                            checked={roleIds.includes(role.id)}\n                            onCheckedChange={(c) =>\n                              toggleRole(role.id, c === true)\n                            }\n                            className=\"mt-0.5\"\n                          />\n                          <label\n                            htmlFor={`role-${role.id}`}\n                            className=\"flex min-w-0 flex-1 cursor-pointer flex-col gap-0.5\"\n                          >\n                            <span className=\"text-sm font-medium\">\n                              {str(role.name) || role.code}\n                            </span>\n                            {desc ? (\n                              <span className=\"text-xs text-muted-foreground\">\n                                {desc}\n                              </span>\n                            ) : null}\n                          </label>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </form>\n          </Form>\n        )\n      }\n      actions={\n        <EntityFormActions\n          mode={mode}\n          onSubmit={onSubmit}\n          onReset={mode === 'new' ? () => reset(defaults) : undefined}\n          onDelete={mode === 'edit' ? onDelete : undefined}\n          isSubmitting={isSubmitting}\n          isDeleting={del.isPending}\n          disabled={userLoading && mode === 'edit'}\n          itemName=\"user\"\n        />\n      }\n    />\n  );\n}\n\nfunction FormSkeleton() {\n  return (\n    <div className=\"space-y-4\">\n      {[1, 2, 3, 4, 5].map((i) => (\n        <div key={i} className=\"space-y-2\">\n          <Skeleton className=\"h-4 w-20\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/chunk-G74DDR4O.js

@@ -0,0 +1,153 @@
+import {
+  UserCard
+} from "./chunk-FPYQ7XGV.js";
+import {
+  authApi$
+} from "./chunk-W3D4HG5W.js";
+import {
+  defaultEntityQueryOptions
+} from "./chunk-NPW7D2HZ.js";
+
+// src/pages/iam/users/_components/user-selector.tsx
+import {
+  EntitySelector,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  useEntitySectionState
+} from "@mesob/ui/components";
+import { cn } from "@mesob/ui/lib/utils";
+import { IconCalendar, IconCircleCheck, IconUsers } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectableUserCard({
+  user,
+  selected,
+  onToggle
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div needed to avoid nested buttons from UserCard
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: onToggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onToggle();
+          }
+        },
+        className: cn(
+          "cursor-pointer rounded-lg transition-shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          selected && "ring-primary ring-2"
+        ),
+        children: /* @__PURE__ */ jsx(UserCard, { user })
+      }
+    )
+  );
+}
+var userColumns = [
+  {
+    key: "name",
+    header: "Name",
+    cell: (user) => /* @__PURE__ */ jsx("p", { className: "font-medium", children: user.fullName })
+  },
+  {
+    key: "contact",
+    header: "Contact",
+    cell: (user) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      user.email && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: user.email }),
+        user.emailVerified && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(IconCircleCheck, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Email verified" })
+        ] })
+      ] }),
+      user.phone && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: user.phone }),
+        user.phoneVerified && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(IconCircleCheck, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Phone verified" })
+        ] })
+      ] }),
+      !(user.email || user.phone) && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" })
+    ] })
+  },
+  {
+    key: "lastSignIn",
+    header: "Last sign in",
+    cell: (user) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(IconCalendar, { className: "h-4 w-4" }),
+      user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never"
+    ] })
+  }
+];
+var EMPTY_EXCLUDE_IDS = [];
+function UserSelector({
+  trigger,
+  multiple = false,
+  onSelect,
+  excludeIds = EMPTY_EXCLUDE_IDS,
+  modalSize = "xl",
+  contentClassName
+}) {
+  const state = useEntitySectionState({
+    defaultSort: "createdAt",
+    defaultOrder: "desc",
+    defaultPageSize: 10,
+    searchParamName: "handle"
+  });
+  const usersQuery = state.queryConfig;
+  const { data, isPending, isFetching } = authApi$.useQuery(
+    "get",
+    "/users",
+    usersQuery,
+    defaultEntityQueryOptions
+  );
+  const users = (data?.users ?? []).filter((user) => {
+    return !excludeIds.includes(user.id);
+  });
+  const config = {
+    title: "Select user(s)",
+    modalSize,
+    contentClassName,
+    multiple,
+    entityName: "user",
+    entityIcon: IconUsers,
+    columns: userColumns,
+    columnCount: 4,
+    getItemLabel: (user) => user.fullName,
+    searchPlaceholder: "Search users...",
+    filterOptions: [
+      { label: "All", value: "" },
+      { label: "Email Verified", value: "emailVerified" },
+      { label: "Phone Verified", value: "phoneVerified" },
+      { label: "Not Verified", value: "notVerified" }
+    ],
+    sortOptions: [
+      { label: "Created", value: "createdAt" },
+      { label: "Updated", value: "updatedAt" },
+      { label: "Name", value: "fullName" },
+      { label: "Last Sign In", value: "lastSignInAt" }
+    ],
+    showViewToggle: false,
+    renderCard: (user, selected, onToggle) => /* @__PURE__ */ jsx(SelectableUserCard, { user, selected, onToggle })
+  };
+  return /* @__PURE__ */ jsx(
+    EntitySelector,
+    {
+      trigger,
+      config,
+      onSelect,
+      items: users,
+      total: data?.total,
+      isLoading: isPending || isFetching,
+      state
+    }
+  );
+}
+
+export {
+  UserSelector
+};
+//# sourceMappingURL=chunk-G74DDR4O.js.map

package/dist/chunk-G74DDR4O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/iam/users/_components/user-selector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  EntitySelector,\n  type EntitySelectorColumn,\n  type EntitySelectorConfig,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  useEntitySectionState,\n} from '@mesob/ui/components';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconCalendar, IconCircleCheck, IconUsers } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport type { paths } from '../../../../data/openapi';\nimport { authApi$, defaultEntityQueryOptions } from '../../shared/page-helpers';\nimport { UserCard } from './user-card';\nimport type { User } from './users-data';\n\nfunction SelectableUserCard({\n  user,\n  selected,\n  onToggle,\n}: {\n  user: User;\n  selected: boolean;\n  onToggle: () => void;\n}) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: div needed to avoid nested buttons from UserCard\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onToggle}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          onToggle();\n        }\n      }}\n      className={cn(\n        'cursor-pointer rounded-lg transition-shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        selected && 'ring-primary ring-2',\n      )}\n    >\n      <UserCard user={user} />\n    </div>\n  );\n}\n\nconst userColumns: EntitySelectorColumn<User>[] = [\n  {\n    key: 'name',\n    header: 'Name',\n    cell: (user: User) => <p className=\"font-medium\">{user.fullName}</p>,\n  },\n  {\n    key: 'contact',\n    header: 'Contact',\n    cell: (user: User) => (\n      <div className=\"space-y-1\">\n        {user.email && (\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm\">{user.email}</span>\n            {user.emailVerified && (\n              <Tooltip>\n                <TooltipTrigger>\n                  <IconCircleCheck className=\"size-4 text-muted-foreground\" />\n                </TooltipTrigger>\n                <TooltipContent>Email verified</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        {user.phone && (\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm\">{user.phone}</span>\n            {user.phoneVerified && (\n              <Tooltip>\n                <TooltipTrigger>\n                  <IconCircleCheck className=\"size-4 text-muted-foreground\" />\n                </TooltipTrigger>\n                <TooltipContent>Phone verified</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        {!(user.email || user.phone) && (\n          <span className=\"text-muted-foreground\">—</span>\n        )}\n      </div>\n    ),\n  },\n  {\n    key: 'lastSignIn',\n    header: 'Last sign in',\n    cell: (user: User) => (\n      <div className=\"flex items-center gap-1 text-muted-foreground\">\n        <IconCalendar className=\"h-4 w-4\" />\n        {user.lastSignInAt\n          ? new Date(user.lastSignInAt).toLocaleDateString()\n          : 'Never'}\n      </div>\n    ),\n  },\n];\n\nconst EMPTY_EXCLUDE_IDS: string[] = [];\n\ntype UserSelectorProps = {\n  trigger: ReactNode;\n  multiple?: boolean;\n  onSelect: (users: User[]) => void;\n  excludeIds?: string[];\n  modalSize?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  contentClassName?: string;\n};\n\nexport function UserSelector({\n  trigger,\n  multiple = false,\n  onSelect,\n  excludeIds = EMPTY_EXCLUDE_IDS,\n  modalSize = 'xl',\n  contentClassName,\n}: UserSelectorProps) {\n  const state = useEntitySectionState({\n    defaultSort: 'createdAt',\n    defaultOrder: 'desc',\n    defaultPageSize: 10,\n    searchParamName: 'handle',\n  });\n  const usersQuery = state.queryConfig as {\n    params: {\n      query: NonNullable<paths['/users']['get']['parameters']['query']>;\n    };\n  };\n\n  const { data, isPending, isFetching } = authApi$.useQuery(\n    'get',\n    '/users',\n    usersQuery,\n    defaultEntityQueryOptions,\n  );\n\n  const users = (data?.users ?? []).filter((user: User) => {\n    return !excludeIds.includes(user.id);\n  });\n\n  const config: EntitySelectorConfig<User> = {\n    title: 'Select user(s)',\n    modalSize,\n    contentClassName,\n    multiple,\n    entityName: 'user',\n    entityIcon: IconUsers,\n    columns: userColumns,\n    columnCount: 4,\n    getItemLabel: (user: User) => user.fullName,\n    searchPlaceholder: 'Search users...',\n    filterOptions: [\n      { label: 'All', value: '' },\n      { label: 'Email Verified', value: 'emailVerified' },\n      { label: 'Phone Verified', value: 'phoneVerified' },\n      { label: 'Not Verified', value: 'notVerified' },\n    ],\n    sortOptions: [\n      { label: 'Created', value: 'createdAt' },\n      { label: 'Updated', value: 'updatedAt' },\n      { label: 'Name', value: 'fullName' },\n      { label: 'Last Sign In', value: 'lastSignInAt' },\n    ],\n    showViewToggle: false,\n    renderCard: (user: User, selected: boolean, onToggle: () => void) => (\n      <SelectableUserCard user={user} selected={selected} onToggle={onToggle} />\n    ),\n  };\n\n  return (\n    <EntitySelector<User>\n      trigger={trigger}\n      config={config}\n      onSelect={onSelect}\n      items={users}\n      total={data?.total}\n      isLoading={isPending || isFetching}\n      state={state}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-HH347MJI.js → chunk-GVEBIL3O.js}

@@ -1,6 +1,6 @@
 import {
   useApi
-} from "./chunk-XCJ3ZH7D.js";
+} from "./chunk-AWSAC7RT.js";
 
 // src/components/iam/permission-selector.tsx
 import {
@@ -90,4 +90,4 @@ function PermissionSelector({
 export {
   PermissionSelector
 };
-//# sourceMappingURL=chunk-HH347MJI.js.map
+//# sourceMappingURL=chunk-GVEBIL3O.js.map