@mesob/auth-react 0.4.0 → 0.4.2

package/dist/chunk-BGSHXIHI.js

@@ -0,0 +1,953 @@
+import {
+  UserCard,
+  UserForm
+} from "./chunk-BZ42QPXE.js";
+import {
+  Link,
+  authApi$
+} from "./chunk-3BZC4VVD.js";
+import {
+  defaultEntityQueryOptions
+} from "./chunk-NPW7D2HZ.js";
+import {
+  useApi
+} from "./chunk-72YRO3A7.js";
+
+// src/components/iam/users-page.tsx
+import {
+  EntityDrawerTrigger,
+  EntityFilter,
+  EntityHeader,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  PageContainer,
+  useBreadcrumbs,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconUsers as IconUsers3 } from "@tabler/icons-react";
+import { useState as useState4 } from "react";
+
+// src/pages/iam/users/_components/bulk-invite-user-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Badge as Badge2,
+  Button,
+  Card as Card2,
+  CardContent as CardContent2,
+  CardHeader as CardHeader2,
+  CardTitle as CardTitle2,
+  EntityDrawer,
+  EntityFormActions,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea
+} from "@mesob/ui/components";
+import { IconDownload, IconUsers } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+// src/pages/iam/users/_components/invite-user-shared.tsx
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@mesob/ui/components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inviteTemplateCsv = `fullName,email,phone,emailVerified,phoneVerified,sendVia,password
+Lulit Demo,lulit@example.com,,true,false,email,
+Abel Demo,,+251911223344,false,true,sms|email,TempPass123!
+Marta Demo,marta@example.com,+251922334455,true,true,email|sms,`;
+var defaultInviteUserValues = {
+  fullName: "",
+  email: "",
+  phone: "",
+  password: "",
+  emailVerified: false,
+  phoneVerified: false,
+  viaEmail: false,
+  viaSms: false
+};
+function buildInviteUserPayload(values) {
+  return {
+    fullName: values.fullName.trim(),
+    email: values.email.trim() || void 0,
+    phone: values.phone.trim() || void 0,
+    password: values.password.trim() || void 0,
+    emailVerified: values.emailVerified,
+    phoneVerified: values.phoneVerified,
+    sendVia: [
+      values.viaEmail ? "email" : null,
+      values.viaSms ? "sms" : null
+    ].filter(Boolean)
+  };
+}
+function parseCsvLine(line) {
+  const cells = [];
+  let current = "";
+  let quoted = false;
+  for (let i = 0; i < line.length; i += 1) {
+    const char = line[i];
+    const next = line[i + 1];
+    if (char === '"' && quoted && next === '"') {
+      current += '"';
+      i += 1;
+      continue;
+    }
+    if (char === '"') {
+      quoted = !quoted;
+      continue;
+    }
+    if (char === "," && !quoted) {
+      cells.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  cells.push(current.trim());
+  return cells;
+}
+function parseBoolean(value) {
+  if (!value) {
+    return false;
+  }
+  return ["true", "1", "yes", "y"].includes(value.trim().toLowerCase());
+}
+function parseSendVia(value) {
+  if (!value) {
+    return [];
+  }
+  return value.split("|").map((item) => item.trim().toLowerCase()).filter(
+    (item) => item === "email" || item === "sms"
+  );
+}
+function parseBulkInviteCsv(text) {
+  const lines = text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+  if (!lines.length) {
+    throw new Error("Paste at least one CSV row.");
+  }
+  const header = parseCsvLine(lines[0]).map((cell) => cell.toLowerCase());
+  const hasHeader = header.includes("fullname");
+  const rows = hasHeader ? lines.slice(1) : lines;
+  if (!rows.length) {
+    throw new Error("CSV only has a header row.");
+  }
+  const keys = hasHeader ? header : [
+    "fullName",
+    "email",
+    "phone",
+    "emailVerified",
+    "phoneVerified",
+    "sendVia",
+    "password"
+  ];
+  return rows.map((line, index) => {
+    const values = parseCsvLine(line);
+    const record = Object.fromEntries(
+      keys.map((key, valueIndex) => [key, values[valueIndex] ?? ""])
+    );
+    const fullName = String(
+      record.fullname || record.fullName || record.name || ""
+    ).trim();
+    const email = String(record.email || "").trim();
+    const phone = String(record.phone || "").trim();
+    if (!fullName) {
+      throw new Error(`Row ${index + 1}: fullName is required.`);
+    }
+    if (!(email || phone)) {
+      throw new Error(`Row ${index + 1}: email or phone is required.`);
+    }
+    return {
+      fullName,
+      email: email || void 0,
+      phone: phone || void 0,
+      password: String(record.password || "").trim() || void 0,
+      emailVerified: parseBoolean(
+        String(record.emailverified || record.emailVerified || "")
+      ),
+      phoneVerified: parseBoolean(
+        String(record.phoneverified || record.phoneVerified || "")
+      ),
+      sendVia: parseSendVia(String(record.sendvia || record.sendVia || ""))
+    };
+  });
+}
+function downloadInviteTemplate() {
+  const blob = new Blob([inviteTemplateCsv], {
+    type: "text/csv;charset=utf-8"
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "users-bulk-invite-template.csv";
+  link.click();
+  URL.revokeObjectURL(url);
+}
+function DeliveryBadges({ delivery }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+    delivery.email ? /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: delivery.email === "failed" ? "destructive" : "outline",
+        children: [
+          "email: ",
+          delivery.email
+        ]
+      }
+    ) : null,
+    delivery.sms ? /* @__PURE__ */ jsxs(Badge, { variant: delivery.sms === "failed" ? "destructive" : "outline", children: [
+      "sms: ",
+      delivery.sms
+    ] }) : null,
+    delivery.email || delivery.sms ? null : /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "no delivery" })
+  ] });
+}
+function InviteResultCard({
+  result,
+  index
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: "border-border/60 bg-background/70", children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: result.user.fullName }),
+        /* @__PURE__ */ jsx(CardDescription, { children: result.user.email || result.user.phone || "No identifier" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        typeof index === "number" ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+          "row ",
+          index + 1
+        ] }) : null,
+        /* @__PURE__ */ jsx(Badge, { variant: result.hasPassword ? "secondary" : "default", children: result.hasPassword ? "password set" : "set-password flow" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsxs(Badge, { variant: result.user.emailVerified ? "default" : "secondary", children: [
+          "email ",
+          result.user.emailVerified ? "verified" : "pending"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: result.user.phoneVerified ? "default" : "secondary", children: [
+          "phone ",
+          result.user.phoneVerified ? "verified" : "pending"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DeliveryBadges, { delivery: result.delivery }),
+      result.inviteUrl ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border/70 bg-muted/40 px-3 py-2 font-mono text-xs break-all", children: result.inviteUrl }) : null
+    ] })
+  ] });
+}
+
+// src/pages/iam/users/_components/bulk-invite-user-form.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var schema = z.object({
+  sourceFile: z.string().optional(),
+  csvText: z.string().trim().min(1, "CSV text is required")
+});
+var defaults = {
+  sourceFile: "",
+  csvText: ""
+};
+function BulkInviteUserForm({ open, onClose }) {
+  const qc = useQueryClient();
+  const [invited, setInvited] = useState([]);
+  const [failed, setFailed] = useState([]);
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: defaults
+  });
+  const { control, formState, getValues, reset, setValue } = form;
+  const inviteBulk = authApi$.useMutation("post", "/users/invite/bulk", {
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["get", "/users"] });
+    }
+  });
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    reset(defaults);
+    setInvited([]);
+    setFailed([]);
+  }, [open, reset]);
+  const handleFileChange = async (event, onChange) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    try {
+      const text = await file.text();
+      onChange(file.name);
+      setValue("csvText", text, {
+        shouldDirty: true,
+        shouldValidate: true
+      });
+      toast.success(`Loaded ${file.name}`);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to read CSV file"
+      );
+    } finally {
+      event.target.value = "";
+    }
+  };
+  const onSubmit = form.handleSubmit(async (values) => {
+    try {
+      const result = await inviteBulk.mutateAsync({
+        body: {
+          users: parseBulkInviteCsv(values.csvText)
+        }
+      });
+      setInvited(result.invited);
+      setFailed(result.failed);
+      toast.success(
+        `Bulk invite finished: ${result.invited.length} invited, ${result.failed.length} failed`
+      );
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to bulk invite users"
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx2(
+    EntityDrawer,
+    {
+      title: "Bulk invite users",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "xl",
+      form: /* @__PURE__ */ jsx2(Form, { ...form, children: /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Download the CSV template, fill it with your users, then upload or paste the CSV below." }),
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              variant: "outline",
+              onClick: downloadInviteTemplate,
+              leftIcon: /* @__PURE__ */ jsx2(IconDownload, { className: "size-4" }),
+              children: "Download template"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          FormField,
+          {
+            control,
+            name: "sourceFile",
+            render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+              /* @__PURE__ */ jsx2(FormLabel, { children: "Upload CSV" }),
+              /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(
+                Input,
+                {
+                  type: "file",
+                  accept: ".csv,text/csv",
+                  onChange: (event) => handleFileChange(event, field.onChange)
+                }
+              ) }),
+              field.value ? /* @__PURE__ */ jsxs2("p", { className: "text-sm text-muted-foreground", children: [
+                "Loaded file: ",
+                field.value
+              ] }) : null,
+              /* @__PURE__ */ jsx2(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          FormField,
+          {
+            control,
+            name: "csvText",
+            render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+              /* @__PURE__ */ jsx2(FormLabel, { children: "CSV textarea" }),
+              /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(
+                Textarea,
+                {
+                  className: "min-h-[240px] font-mono text-xs",
+                  placeholder: inviteTemplateCsv,
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx2(FormMessage, {})
+            ] })
+          }
+        ),
+        (invited.length > 0 || failed.length > 0) && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsxs2(Card2, { className: "border-border/60", children: [
+            /* @__PURE__ */ jsx2(CardHeader2, { children: /* @__PURE__ */ jsxs2(CardTitle2, { className: "flex items-center gap-2 text-base", children: [
+              /* @__PURE__ */ jsx2(IconUsers, { className: "size-4" }),
+              "Invited",
+              /* @__PURE__ */ jsx2(Badge2, { children: invited.length })
+            ] }) }),
+            /* @__PURE__ */ jsx2(CardContent2, { className: "space-y-3", children: invited.length ? invited.map((result, index) => /* @__PURE__ */ jsx2(
+              InviteResultCard,
+              {
+                result,
+                index
+              },
+              `${result.user.id}-${index}`
+            )) : /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Successful invites will show here." }) })
+          ] }),
+          /* @__PURE__ */ jsxs2(Card2, { className: "border-border/60", children: [
+            /* @__PURE__ */ jsx2(CardHeader2, { children: /* @__PURE__ */ jsxs2(CardTitle2, { className: "text-base", children: [
+              "Failed rows",
+              /* @__PURE__ */ jsx2(Badge2, { className: "ml-2", variant: "destructive", children: failed.length })
+            ] }) }),
+            /* @__PURE__ */ jsx2(CardContent2, { className: "space-y-3", children: failed.length ? failed.map((failure) => /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxs2("span", { className: "font-medium", children: [
+                      "row ",
+                      failure.index + 1
+                    ] }),
+                    failure.identifier ? /* @__PURE__ */ jsx2(Badge2, { variant: "outline", children: failure.identifier }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: failure.error })
+                ]
+              },
+              `${failure.index}-${failure.identifier}`
+            )) : /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Failed invites will show here." }) })
+          ] })
+        ] })
+      ] }) }),
+      actions: /* @__PURE__ */ jsx2(
+        EntityFormActions,
+        {
+          mode: "new",
+          onSubmit,
+          onReset: () => {
+            reset(defaults);
+            setInvited([]);
+            setFailed([]);
+          },
+          isSubmitting: inviteBulk.isPending,
+          submitLabel: "Invite",
+          disabled: !getValues("csvText").trim()
+        }
+      )
+    }
+  );
+}
+
+// src/pages/iam/users/_components/invite-user-form.tsx
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+import {
+  Checkbox,
+  EntityDrawer as EntityDrawer2,
+  EntityFormActions as EntityFormActions2,
+  Form as Form2,
+  FormControl as FormControl2,
+  FormField as FormField2,
+  FormItem as FormItem2,
+  FormLabel as FormLabel2,
+  FormMessage as FormMessage2,
+  Input as Input2,
+  Stack
+} from "@mesob/ui/components";
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useForm as useForm2, useWatch } from "react-hook-form";
+import { toast as toast2 } from "sonner";
+import { z as z2 } from "zod";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var schema2 = z2.object({
+  fullName: z2.string().trim().min(1, "Full name is required"),
+  email: z2.string().email("Invalid email").or(z2.literal("")),
+  phone: z2.string(),
+  password: z2.string(),
+  emailVerified: z2.boolean(),
+  phoneVerified: z2.boolean(),
+  viaEmail: z2.boolean(),
+  viaSms: z2.boolean()
+}).superRefine((value, ctx) => {
+  if (!(value.email.trim() || value.phone.trim())) {
+    ctx.addIssue({
+      code: z2.ZodIssueCode.custom,
+      path: ["email"],
+      message: "Email or phone is required"
+    });
+  }
+});
+function InviteUserForm({ open, onClose }) {
+  const qc = useQueryClient2();
+  const [result, setResult] = useState2(null);
+  const form = useForm2({
+    resolver: zodResolver2(schema2),
+    defaultValues: defaultInviteUserValues
+  });
+  const { control, formState, reset, setValue } = form;
+  const email = useWatch({ control, name: "email" }) ?? "";
+  const phone = useWatch({ control, name: "phone" }) ?? "";
+  const hasEmail = email.trim().length > 0;
+  const hasPhone = phone.trim().length > 0;
+  const inviteUser = authApi$.useMutation("post", "/users/invite", {
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["get", "/users"] });
+    }
+  });
+  useEffect2(() => {
+    if (!hasEmail) {
+      setValue("emailVerified", false, { shouldDirty: false });
+      setValue("viaEmail", false, { shouldDirty: false });
+    }
+  }, [hasEmail, setValue]);
+  useEffect2(() => {
+    if (!hasPhone) {
+      setValue("phoneVerified", false, { shouldDirty: false });
+      setValue("viaSms", false, { shouldDirty: false });
+    }
+  }, [hasPhone, setValue]);
+  useEffect2(() => {
+    if (open) {
+      return;
+    }
+    reset(defaultInviteUserValues);
+    setResult(null);
+  }, [open, reset]);
+  const onSubmit = form.handleSubmit(async (values) => {
+    try {
+      const inviteResult = await inviteUser.mutateAsync({
+        body: buildInviteUserPayload(values)
+      });
+      setResult(inviteResult);
+      reset(defaultInviteUserValues);
+      toast2.success("User invited");
+    } catch (error) {
+      toast2.error(
+        error instanceof Error ? error.message : "Failed to invite user"
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx3(
+    EntityDrawer2,
+    {
+      title: "Invite user",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "lg",
+      form: /* @__PURE__ */ jsx3(Form2, { ...form, children: /* @__PURE__ */ jsx3("form", { onSubmit, className: "space-y-4", children: /* @__PURE__ */ jsxs3(Stack, { children: [
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "fullName",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsxs3(FormLabel2, { children: [
+                "Full name ",
+                /* @__PURE__ */ jsx3("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(Input2, { placeholder: "Aster Bekele", ...field }) }),
+              /* @__PURE__ */ jsx3(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsx3(FormLabel2, { children: "Email" }),
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(
+                Input2,
+                {
+                  type: "email",
+                  placeholder: "aster@example.com",
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "phone",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsx3(FormLabel2, { children: "Phone" }),
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(Input2, { placeholder: "+251911223344", ...field }) }),
+              /* @__PURE__ */ jsx3(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "password",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsx3(FormLabel2, { children: "Password" }),
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(
+                Input2,
+                {
+                  type: "password",
+                  placeholder: "Optional",
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "emailVerified",
+            render: ({ field }) => /* @__PURE__ */ jsx3(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasEmail,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx3(FormLabel2, { children: "Email verified" }),
+                /* @__PURE__ */ jsx3(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "phoneVerified",
+            render: ({ field }) => /* @__PURE__ */ jsx3(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasPhone,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx3(FormLabel2, { children: "Phone verified" }),
+                /* @__PURE__ */ jsx3(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "viaEmail",
+            render: ({ field }) => /* @__PURE__ */ jsx3(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasEmail,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx3(FormLabel2, { children: "Send email invite" }),
+                /* @__PURE__ */ jsx3(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          FormField2,
+          {
+            control,
+            name: "viaSms",
+            render: ({ field }) => /* @__PURE__ */ jsx3(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx3(FormControl2, { children: /* @__PURE__ */ jsx3(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasPhone,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx3(FormLabel2, { children: "Send SMS invite" }),
+                /* @__PURE__ */ jsx3(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        result ? /* @__PURE__ */ jsx3(InviteResultCard, { result }) : null
+      ] }) }) }),
+      actions: /* @__PURE__ */ jsx3(
+        EntityFormActions2,
+        {
+          mode: "new",
+          onSubmit,
+          onReset: () => {
+            reset(defaultInviteUserValues);
+            setResult(null);
+          },
+          isSubmitting: inviteUser.isPending,
+          submitLabel: "Invite"
+        }
+      )
+    }
+  );
+}
+
+// src/pages/iam/users/_components/users-list.tsx
+import {
+  Badge as Badge3,
+  DataTableAction,
+  DataTablePagination,
+  DisplayTable,
+  EntityEmptyState,
+  EntityLoadingState,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from "@mesob/ui/components";
+import { IconCalendar, IconUsers as IconUsers2 } from "@tabler/icons-react";
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 4;
+function UsersList({
+  data,
+  isLoading,
+  view,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  onPageChange,
+  onPageSizeChange,
+  onCreateNew
+}) {
+  const [editingUserId, setEditingUserId] = useState3(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx4(
+      EntityLoadingState,
+      {
+        view,
+        rowCount: pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: pageSize
+      }
+    );
+  }
+  if (totalRows === 0) {
+    return /* @__PURE__ */ jsx4(
+      EntityEmptyState,
+      {
+        icon: IconUsers2,
+        entityName: "user",
+        title: "No users yet",
+        description: "Invite your first user to get started.",
+        actionLabel: "Invite user",
+        onAction: onCreateNew
+      }
+    );
+  }
+  if (view === "table") {
+    return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+      editingUserId && /* @__PURE__ */ jsx4(
+        UserForm,
+        {
+          mode: "edit",
+          userId: editingUserId,
+          open: true,
+          onClose: () => setEditingUserId(null)
+        }
+      ),
+      /* @__PURE__ */ jsxs4(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx4(Thead, { children: /* @__PURE__ */ jsxs4(Tr, { children: [
+          /* @__PURE__ */ jsx4(Th, { className: "w-1/4", children: "Name" }),
+          /* @__PURE__ */ jsx4(Th, { className: "w-1/4", children: "Contact" }),
+          /* @__PURE__ */ jsx4(Th, { className: "w-1/4", children: "Last sign in" }),
+          /* @__PURE__ */ jsx4(Th, { className: "w-[50px]" })
+        ] }) }),
+        /* @__PURE__ */ jsx4(Tbody, { children: data.map((user) => /* @__PURE__ */ jsxs4(Tr, { className: "group", children: [
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsx4(
+            Link,
+            {
+              href: `/iam/users/${user.id}`,
+              className: "block text-left font-medium hover:text-primary hover:underline cursor-pointer",
+              children: /* @__PURE__ */ jsx4("p", { children: user.fullName })
+            }
+          ) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+            user.email && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx4("span", { className: "text-sm", children: user.email }),
+              user.emailVerified && /* @__PURE__ */ jsx4(Badge3, { variant: "outline", className: "text-xs", children: "Verified" })
+            ] }),
+            user.phone && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx4("span", { className: "text-sm", children: user.phone }),
+              user.phoneVerified && /* @__PURE__ */ jsx4(Badge3, { variant: "outline", className: "text-xs", children: "Verified" })
+            ] }),
+            !(user.email || user.phone) && /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: "\u2014" })
+          ] }) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx4(IconCalendar, { className: "h-4 w-4" }),
+            user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never"
+          ] }) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsx4(DataTableAction, { onClick: () => setEditingUserId(user.id) }) })
+        ] }, user.id)) })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        DataTablePagination,
+        {
+          pageIndex,
+          pageSize,
+          pageCount,
+          totalRows,
+          onPageChange,
+          onPageSizeChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: data.map((user) => /* @__PURE__ */ jsx4(UserCard, { user }, user.id)) }),
+    /* @__PURE__ */ jsx4(
+      DataTablePagination,
+      {
+        pageIndex,
+        pageSize,
+        pageCount,
+        totalRows,
+        onPageChange,
+        onPageSizeChange
+      }
+    )
+  ] });
+}
+
+// src/components/iam/users-page.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function UsersPage() {
+  const { hooks } = useApi();
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam/users" },
+      { label: "Users" }
+    ]
+  });
+  const [inviteOpen, setInviteOpen] = useState4(false);
+  const [bulkInviteOpen, setBulkInviteOpen] = useState4(false);
+  const { queryConfig, params, setParams } = useEntityParams({
+    searchKey: "search",
+    searchParamName: "handle"
+  });
+  const usersQuery = queryConfig;
+  const { data, isPending, isFetching } = hooks.useQuery(
+    "get",
+    "/users",
+    usersQuery,
+    defaultEntityQueryOptions
+  );
+  const isLoading = isPending || isFetching;
+  const users = data?.users ?? [];
+  const { total, pageCount } = useEntityPagination({
+    items: users,
+    total: data?.total,
+    pageSize: params.pageSize
+  });
+  return /* @__PURE__ */ jsx5(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsxs5(PageBody, { className: "px-0", children: [
+    /* @__PURE__ */ jsx5(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx5(IconUsers3, { className: "h-5 w-5" }),
+        title: "Users",
+        actions: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5(
+            EntityDrawerTrigger,
+            {
+              mode: "new",
+              entity: "User",
+              label: "Invite user",
+              open: inviteOpen,
+              onOpenChange: setInviteOpen,
+              children: (open, onClose) => /* @__PURE__ */ jsx5(InviteUserForm, { open, onClose })
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            EntityDrawerTrigger,
+            {
+              mode: "new",
+              entity: "User",
+              label: "Bulk invite",
+              variant: "outline",
+              open: bulkInviteOpen,
+              onOpenChange: setBulkInviteOpen,
+              children: (open, onClose) => /* @__PURE__ */ jsx5(BulkInviteUserForm, { open, onClose })
+            }
+          )
+        ] }),
+        search: /* @__PURE__ */ jsx5(EntitySearch, { paramKey: "search", placeholder: "Search users..." }),
+        filter: /* @__PURE__ */ jsx5(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "Email Verified", value: "emailVerified" },
+              { label: "Phone Verified", value: "phoneVerified" },
+              { label: "Not Verified", value: "notVerified" }
+            ],
+            placeholder: "Filter"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx5(
+          EntitySort,
+          {
+            options: [
+              { label: "Created", value: "createdAt" },
+              { label: "Updated", value: "updatedAt" },
+              { label: "Name", value: "fullName" },
+              { label: "Last Sign In", value: "lastSignInAt" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx5(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      UsersList,
+      {
+        data: users,
+        isLoading,
+        view: params.view || "table",
+        pageIndex: params.page - 1,
+        pageSize: params.pageSize,
+        pageCount,
+        totalRows: total,
+        onCreateNew: () => setInviteOpen(true),
+        onPageChange: (p) => setParams({ page: p + 1 }),
+        onPageSizeChange: (size) => setParams({ pageSize: size, page: 1 })
+      }
+    )
+  ] }) });
+}
+
+export {
+  UsersPage
+};
+//# sourceMappingURL=chunk-BGSHXIHI.js.map