@mesob/auth-react 0.3.4 → 0.4.0

package/dist/pages/iam/users.js

@@ -0,0 +1,1275 @@
+"use client";
+
+// src/pages/iam/users.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 useState6 } from "react";
+
+// src/lib/query-options.ts
+import { keepPreviousData } from "@tanstack/react-query";
+var defaultEntityQueryOptions = {
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+  refetchOnReconnect: false,
+  staleTime: 60 * 1e3,
+  gcTime: 5 * 60 * 1e3,
+  placeholderData: keepPreviousData,
+  retry: 1
+};
+
+// src/provider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { deepmerge } from "deepmerge-ts";
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import { createContext, useContext, useMemo, useState } from "react";
+
+// src/utils/cookie.ts
+var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var SessionContext = createContext(null);
+var ApiContext = createContext(null);
+var ConfigContext = createContext(null);
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function useApi() {
+  const context = useContext(ApiContext);
+  if (!context) {
+    throw new Error("useApi must be used within MesobAuthProvider");
+  }
+  return context;
+}
+
+// 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 as useState2 } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+// src/pages/iam/shared/navigation.tsx
+import { useMesob } from "@mesob/ui/providers";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AppLink({ href, children, ...props }) {
+  const mesob = useMesob();
+  const Link2 = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const locale = mesob?.locale;
+  if (Link2) {
+    return /* @__PURE__ */ jsx2(Link2, { href, ...locale ? { locale } : {}, ...props, children });
+  }
+  return /* @__PURE__ */ jsx2("a", { href, ...props, children });
+}
+
+// src/pages/iam/shared/page-helpers.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var authApi$ = {
+  useQuery(...args) {
+    const { hooks } = useApi();
+    return hooks.useQuery(...args);
+  },
+  useMutation(...args) {
+    const { hooks } = useApi();
+    return hooks.useMutation(...args);
+  }
+};
+function Link(props) {
+  return /* @__PURE__ */ jsx3(AppLink, { ...props });
+}
+
+// src/pages/iam/users/_components/invite-user-shared.tsx
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@mesob/ui/components";
+import { jsx as jsx4, 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__ */ jsx4(Badge, { variant: "secondary", children: "no delivery" })
+  ] });
+}
+function InviteResultCard({
+  result,
+  index
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: "border-border/60 bg-background/70", children: [
+    /* @__PURE__ */ jsx4(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx4(CardTitle, { className: "text-base", children: result.user.fullName }),
+        /* @__PURE__ */ jsx4(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__ */ jsx4(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__ */ jsx4(DeliveryBadges, { delivery: result.delivery }),
+      result.inviteUrl ? /* @__PURE__ */ jsx4("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 jsx5, 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] = useState2([]);
+  const [failed, setFailed] = useState2([]);
+  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__ */ jsx5(
+    EntityDrawer,
+    {
+      title: "Bulk invite users",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "xl",
+      form: /* @__PURE__ */ jsx5(Form, { ...form, children: /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx5("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__ */ jsx5(
+            Button,
+            {
+              variant: "outline",
+              onClick: downloadInviteTemplate,
+              leftIcon: /* @__PURE__ */ jsx5(IconDownload, { className: "size-4" }),
+              children: "Download template"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(
+          FormField,
+          {
+            control,
+            name: "sourceFile",
+            render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+              /* @__PURE__ */ jsx5(FormLabel, { children: "Upload CSV" }),
+              /* @__PURE__ */ jsx5(FormControl, { children: /* @__PURE__ */ jsx5(
+                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__ */ jsx5(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          FormField,
+          {
+            control,
+            name: "csvText",
+            render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+              /* @__PURE__ */ jsx5(FormLabel, { children: "CSV textarea" }),
+              /* @__PURE__ */ jsx5(FormControl, { children: /* @__PURE__ */ jsx5(
+                Textarea,
+                {
+                  className: "min-h-[240px] font-mono text-xs",
+                  placeholder: inviteTemplateCsv,
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx5(FormMessage, {})
+            ] })
+          }
+        ),
+        (invited.length > 0 || failed.length > 0) && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsxs2(Card2, { className: "border-border/60", children: [
+            /* @__PURE__ */ jsx5(CardHeader2, { children: /* @__PURE__ */ jsxs2(CardTitle2, { className: "flex items-center gap-2 text-base", children: [
+              /* @__PURE__ */ jsx5(IconUsers, { className: "size-4" }),
+              "Invited",
+              /* @__PURE__ */ jsx5(Badge2, { children: invited.length })
+            ] }) }),
+            /* @__PURE__ */ jsx5(CardContent2, { className: "space-y-3", children: invited.length ? invited.map((result, index) => /* @__PURE__ */ jsx5(
+              InviteResultCard,
+              {
+                result,
+                index
+              },
+              `${result.user.id}-${index}`
+            )) : /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "Successful invites will show here." }) })
+          ] }),
+          /* @__PURE__ */ jsxs2(Card2, { className: "border-border/60", children: [
+            /* @__PURE__ */ jsx5(CardHeader2, { children: /* @__PURE__ */ jsxs2(CardTitle2, { className: "text-base", children: [
+              "Failed rows",
+              /* @__PURE__ */ jsx5(Badge2, { className: "ml-2", variant: "destructive", children: failed.length })
+            ] }) }),
+            /* @__PURE__ */ jsx5(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__ */ jsx5(Badge2, { variant: "outline", children: failure.identifier }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm text-muted-foreground", children: failure.error })
+                ]
+              },
+              `${failure.index}-${failure.identifier}`
+            )) : /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "Failed invites will show here." }) })
+          ] })
+        ] })
+      ] }) }),
+      actions: /* @__PURE__ */ jsx5(
+        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 useState3 } 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 jsx6, 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] = useState3(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__ */ jsx6(
+    EntityDrawer2,
+    {
+      title: "Invite user",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "lg",
+      form: /* @__PURE__ */ jsx6(Form2, { ...form, children: /* @__PURE__ */ jsx6("form", { onSubmit, className: "space-y-4", children: /* @__PURE__ */ jsxs3(Stack, { children: [
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "fullName",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsxs3(FormLabel2, { children: [
+                "Full name ",
+                /* @__PURE__ */ jsx6("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(Input2, { placeholder: "Aster Bekele", ...field }) }),
+              /* @__PURE__ */ jsx6(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsx6(FormLabel2, { children: "Email" }),
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(
+                Input2,
+                {
+                  type: "email",
+                  placeholder: "aster@example.com",
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx6(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "phone",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsx6(FormLabel2, { children: "Phone" }),
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(Input2, { placeholder: "+251911223344", ...field }) }),
+              /* @__PURE__ */ jsx6(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "password",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+              /* @__PURE__ */ jsx6(FormLabel2, { children: "Password" }),
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(
+                Input2,
+                {
+                  type: "password",
+                  placeholder: "Optional",
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx6(FormMessage2, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "emailVerified",
+            render: ({ field }) => /* @__PURE__ */ jsx6(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasEmail,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx6(FormLabel2, { children: "Email verified" }),
+                /* @__PURE__ */ jsx6(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "phoneVerified",
+            render: ({ field }) => /* @__PURE__ */ jsx6(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasPhone,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx6(FormLabel2, { children: "Phone verified" }),
+                /* @__PURE__ */ jsx6(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "viaEmail",
+            render: ({ field }) => /* @__PURE__ */ jsx6(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasEmail,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx6(FormLabel2, { children: "Send email invite" }),
+                /* @__PURE__ */ jsx6(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField2,
+          {
+            control,
+            name: "viaSms",
+            render: ({ field }) => /* @__PURE__ */ jsx6(FormItem2, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx6(FormControl2, { children: /* @__PURE__ */ jsx6(
+                Checkbox,
+                {
+                  checked: field.value,
+                  disabled: !hasPhone,
+                  onCheckedChange: (checked) => field.onChange(checked === true)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+                /* @__PURE__ */ jsx6(FormLabel2, { children: "Send SMS invite" }),
+                /* @__PURE__ */ jsx6(FormMessage2, {})
+              ] })
+            ] }) })
+          }
+        ),
+        result ? /* @__PURE__ */ jsx6(InviteResultCard, { result }) : null
+      ] }) }) }),
+      actions: /* @__PURE__ */ jsx6(
+        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 Badge4,
+  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 useState5 } from "react";
+
+// src/pages/iam/users/_components/user-card.tsx
+import {
+  Badge as Badge3,
+  Button as Button2,
+  Card as Card3,
+  CardContent as CardContent3,
+  CardHeader as CardHeader3,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger
+} from "@mesob/ui/components";
+import { IconDots, IconPencil } from "@tabler/icons-react";
+import { useState as useState4 } from "react";
+
+// src/pages/iam/users/_components/user-form.tsx
+import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
+import {
+  EntityDrawer as EntityDrawer3,
+  EntityFormActions as EntityFormActions3,
+  Input as Input3,
+  Label,
+  Skeleton
+} from "@mesob/ui/components";
+import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
+import { useEffect as useEffect3 } from "react";
+import { useForm as useForm3 } from "react-hook-form";
+import { z as z3 } from "zod";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var schema3 = z3.object({
+  fullName: z3.string().min(1, "Name is required"),
+  email: z3.string().email().optional().or(z3.literal("")),
+  phone: z3.string().optional()
+});
+var defaults2 = {
+  fullName: "",
+  email: "",
+  phone: ""
+};
+function UserForm({
+  mode,
+  userId,
+  open,
+  onClose,
+  onSuccess
+}) {
+  const qc = useQueryClient3();
+  const { data, isLoading } = authApi$.useQuery(
+    "get",
+    "/users/{id}",
+    { params: { path: { id: userId ?? "" } } },
+    { enabled: mode === "edit" && !!userId }
+  );
+  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 form = useForm3({
+    resolver: zodResolver3(schema3),
+    defaultValues: defaults2
+  });
+  const { reset, formState } = form;
+  useEffect3(() => {
+    if (!open) {
+      return;
+    }
+    if (mode === "edit" && data?.user && !isLoading) {
+      const u = data.user;
+      reset({
+        fullName: u.fullName,
+        email: u.email ?? "",
+        phone: u.phone ?? ""
+      });
+    } else {
+      reset(defaults2);
+    }
+  }, [mode, data, open, isLoading, reset]);
+  const onSubmit = form.handleSubmit(async (d) => {
+    const payload = {
+      fullName: d.fullName,
+      email: d.email || void 0,
+      phone: d.phone || void 0
+    };
+    if (mode === "new") {
+      await create.mutateAsync({ body: payload });
+    } else if (userId) {
+      await update.mutateAsync({
+        params: { path: { id: userId } },
+        body: payload
+      });
+    }
+    onSuccess?.();
+    onClose();
+  });
+  const onDelete = async () => {
+    if (!userId) {
+      return;
+    }
+    await del.mutateAsync({ params: { path: { id: userId } } });
+    onSuccess?.();
+    onClose();
+  };
+  const isSubmitting = create.isPending || update.isPending;
+  return /* @__PURE__ */ jsx7(
+    EntityDrawer3,
+    {
+      title: mode === "new" ? "New user" : "Edit user",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      form: isLoading ? /* @__PURE__ */ jsx7(FormSkeleton, {}) : /* @__PURE__ */ jsxs4("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs4(Label, { htmlFor: "fullName", children: [
+            "Full name ",
+            /* @__PURE__ */ jsx7("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            Input3,
+            {
+              id: "fullName",
+              placeholder: "Full name",
+              ...form.register("fullName")
+            }
+          ),
+          formState.errors.fullName && /* @__PURE__ */ jsx7("p", { className: "text-sm text-destructive", children: formState.errors.fullName.message })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx7(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx7(
+            Input3,
+            {
+              id: "email",
+              type: "email",
+              placeholder: "Email",
+              ...form.register("email")
+            }
+          ),
+          formState.errors.email && /* @__PURE__ */ jsx7("p", { className: "text-sm text-destructive", children: formState.errors.email.message })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx7(Label, { htmlFor: "phone", children: "Phone" }),
+          /* @__PURE__ */ jsx7(
+            Input3,
+            {
+              id: "phone",
+              placeholder: "Phone",
+              ...form.register("phone")
+            }
+          )
+        ] })
+      ] }),
+      actions: /* @__PURE__ */ jsx7(
+        EntityFormActions3,
+        {
+          mode,
+          onSubmit,
+          onReset: mode === "new" ? () => reset(defaults2) : void 0,
+          onDelete: mode === "edit" ? onDelete : void 0,
+          isSubmitting,
+          isDeleting: del.isPending,
+          disabled: isLoading,
+          itemName: "user"
+        }
+      )
+    }
+  );
+}
+function FormSkeleton() {
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-20" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-14" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-10 w-full" })
+    ] })
+  ] });
+}
+
+// src/pages/iam/users/_components/user-card.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function UserCard({ user }) {
+  const [editOpen, setEditOpen] = useState4(false);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5(Card3, { className: "group hover:shadow-md transition-shadow", children: [
+      /* @__PURE__ */ jsx8(CardHeader3, { className: "pb-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx8(
+          Link,
+          {
+            href: `/iam/users/${user.id}`,
+            className: "text-left font-semibold hover:text-primary hover:underline",
+            children: user.fullName
+          }
+        ),
+        /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx8(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx8(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                }
+              ),
+              children: /* @__PURE__ */ jsx8(IconDots, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx8(DropdownMenuPortal, { children: /* @__PURE__ */ jsx8(DropdownMenuContent, { children: /* @__PURE__ */ jsxs5(DropdownMenuItem, { onClick: () => setEditOpen(true), children: [
+            /* @__PURE__ */ jsx8(IconPencil, { className: "mr-2 h-4 w-4" }),
+            "Edit"
+          ] }) }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs5(CardContent3, { className: "space-y-2", children: [
+        user.email && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-sm", children: user.email }),
+          user.emailVerified && /* @__PURE__ */ jsx8(Badge3, { variant: "outline", className: "text-xs", children: "Verified" })
+        ] }),
+        /* @__PURE__ */ jsxs5("p", { className: "text-xs text-muted-foreground", children: [
+          "Last sign in",
+          " ",
+          user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "never"
+        ] })
+      ] })
+    ] }),
+    editOpen && /* @__PURE__ */ jsx8(
+      UserForm,
+      {
+        mode: "edit",
+        userId: user.id,
+        open: editOpen,
+        onClose: () => setEditOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/users/_components/users-list.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 4;
+function UsersList({
+  data,
+  isLoading,
+  view,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  onPageChange,
+  onPageSizeChange,
+  onCreateNew
+}) {
+  const [editingUserId, setEditingUserId] = useState5(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx9(
+      EntityLoadingState,
+      {
+        view,
+        rowCount: pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: pageSize
+      }
+    );
+  }
+  if (totalRows === 0) {
+    return /* @__PURE__ */ jsx9(
+      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__ */ jsxs6("div", { className: "space-y-4", children: [
+      editingUserId && /* @__PURE__ */ jsx9(
+        UserForm,
+        {
+          mode: "edit",
+          userId: editingUserId,
+          open: true,
+          onClose: () => setEditingUserId(null)
+        }
+      ),
+      /* @__PURE__ */ jsxs6(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx9(Thead, { children: /* @__PURE__ */ jsxs6(Tr, { children: [
+          /* @__PURE__ */ jsx9(Th, { className: "w-1/4", children: "Name" }),
+          /* @__PURE__ */ jsx9(Th, { className: "w-1/4", children: "Contact" }),
+          /* @__PURE__ */ jsx9(Th, { className: "w-1/4", children: "Last sign in" }),
+          /* @__PURE__ */ jsx9(Th, { className: "w-[50px]" })
+        ] }) }),
+        /* @__PURE__ */ jsx9(Tbody, { children: data.map((user) => /* @__PURE__ */ jsxs6(Tr, { className: "group", children: [
+          /* @__PURE__ */ jsx9(Td, { children: /* @__PURE__ */ jsx9(
+            Link,
+            {
+              href: `/iam/users/${user.id}`,
+              className: "block text-left font-medium hover:text-primary hover:underline cursor-pointer",
+              children: /* @__PURE__ */ jsx9("p", { children: user.fullName })
+            }
+          ) }),
+          /* @__PURE__ */ jsx9(Td, { children: /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+            user.email && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-sm", children: user.email }),
+              user.emailVerified && /* @__PURE__ */ jsx9(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+            ] }),
+            user.phone && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-sm", children: user.phone }),
+              user.phoneVerified && /* @__PURE__ */ jsx9(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+            ] }),
+            !(user.email || user.phone) && /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: "\u2014" })
+          ] }) }),
+          /* @__PURE__ */ jsx9(Td, { children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx9(IconCalendar, { className: "h-4 w-4" }),
+            user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never"
+          ] }) }),
+          /* @__PURE__ */ jsx9(Td, { children: /* @__PURE__ */ jsx9(DataTableAction, { onClick: () => setEditingUserId(user.id) }) })
+        ] }, user.id)) })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        DataTablePagination,
+        {
+          pageIndex,
+          pageSize,
+          pageCount,
+          totalRows,
+          onPageChange,
+          onPageSizeChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx9("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__ */ jsx9(UserCard, { user }, user.id)) }),
+    /* @__PURE__ */ jsx9(
+      DataTablePagination,
+      {
+        pageIndex,
+        pageSize,
+        pageCount,
+        totalRows,
+        onPageChange,
+        onPageSizeChange
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/users.tsx
+import { jsx as jsx10, jsxs as jsxs7 } 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] = useState6(false);
+  const [bulkInviteOpen, setBulkInviteOpen] = useState6(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__ */ jsx10(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsxs7(PageBody, { className: "px-0", children: [
+    /* @__PURE__ */ jsx10(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx10(IconUsers3, { className: "h-5 w-5" }),
+        title: "Users",
+        actions: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx10(
+            EntityDrawerTrigger,
+            {
+              mode: "new",
+              entity: "User",
+              label: "Invite user",
+              open: inviteOpen,
+              onOpenChange: setInviteOpen,
+              children: (open, onClose) => /* @__PURE__ */ jsx10(InviteUserForm, { open, onClose })
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            EntityDrawerTrigger,
+            {
+              mode: "new",
+              entity: "User",
+              label: "Bulk invite",
+              variant: "outline",
+              open: bulkInviteOpen,
+              onOpenChange: setBulkInviteOpen,
+              children: (open, onClose) => /* @__PURE__ */ jsx10(BulkInviteUserForm, { open, onClose })
+            }
+          )
+        ] }),
+        search: /* @__PURE__ */ jsx10(EntitySearch, { paramKey: "search", placeholder: "Search users..." }),
+        filter: /* @__PURE__ */ jsx10(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "Email Verified", value: "emailVerified" },
+              { label: "Phone Verified", value: "phoneVerified" },
+              { label: "Not Verified", value: "notVerified" }
+            ],
+            placeholder: "Filter"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx10(
+          EntitySort,
+          {
+            options: [
+              { label: "Created", value: "createdAt" },
+              { label: "Updated", value: "updatedAt" },
+              { label: "Name", value: "fullName" },
+              { label: "Last Sign In", value: "lastSignInAt" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx10(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      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 as default
+};
+//# sourceMappingURL=users.js.map