@mesob/auth-react 0.3.4 → 0.4.0

package/dist/index.js

@@ -20,8 +20,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  Input,
-  Spinner
+  Input
 } from "@mesob/ui/components";
 import { useMesob as useMesob2 } from "@mesob/ui/providers";
 import { IconAlertCircle } from "@tabler/icons-react";
@@ -367,7 +366,11 @@ var AUTH_ERROR_MAPPING = {
   },
   HAS_NO_PASSWORD: {
     title: "No Password Set",
-    description: "Your account does not have a password set (e.g. social login). Please sign in with your provider or reset your password."
+    description: "Your account does not have a password yet. Continue to set a password before signing in."
+  },
+  PASSWORD_ALREADY_SET: {
+    title: "Password Already Set",
+    description: "This account already has a password. Use the normal sign-in form instead."
   }
 };
 var validCodes = Object.keys(AUTH_ERROR_MAPPING);
@@ -440,13 +443,21 @@ var AuthLayout = ({
   logoImage
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3("img", { src: logoImage || "", alt: "Mesob", width: 42, height: 42 }) }),
+    /* @__PURE__ */ jsx3("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3(
+      "img",
+      {
+        src: logoImage || "",
+        alt: title,
+        width: 42,
+        height: 42
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
       description && /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
     ] }),
     children,
-    /* @__PURE__ */ jsx3("div", { className: "mt-2 w-full", children: footer && /* @__PURE__ */ jsx3("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
+    footer && /* @__PURE__ */ jsx3("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx3("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
   ] });
 };
 
@@ -517,7 +528,7 @@ var ForgotPassword = () => {
   return /* @__PURE__ */ jsxs2(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
       footer: Link ? /* @__PURE__ */ jsx4(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx4(
@@ -547,29 +558,20 @@ var ForgotPassword = () => {
                   name: "account",
                   render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
                     /* @__PURE__ */ jsx4(FormLabel, { children: t("form.accountLabel") }),
-                    /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
-                      Input,
-                      {
-                        ...field,
-                        type: "text",
-                        placeholder: t("form.accountPlaceholder")
-                      }
-                    ) }),
+                    /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(Input, { ...field, type: "text" }) }),
                     /* @__PURE__ */ jsx4(FormMessage, {})
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs2(
+              /* @__PURE__ */ jsx4(
                 Button,
                 {
                   type: "submit",
                   form: "forgot-password-form",
                   className: "w-full",
                   disabled: isLoading || forgotPasswordMutation.isPending,
-                  children: [
-                    isLoading || forgotPasswordMutation.isPending && /* @__PURE__ */ jsx4(Spinner, {}),
-                    isLoading || forgotPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
-                  ]
+                  loading: isLoading || forgotPasswordMutation.isPending,
+                  children: isLoading || forgotPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
                 }
               )
             ]
@@ -602,7 +604,6 @@ import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
-  Spinner as Spinner2,
   useFormField
 } from "@mesob/ui/components";
 import { useMesob as useMesob3 } from "@mesob/ui/providers";
@@ -612,12 +613,7 @@ import { useForm as useForm2 } from "react-hook-form";
 import { toast as toast2 } from "sonner";
 import { z as z2 } from "zod";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function PasswordInput({
-  field,
-  show,
-  onToggle,
-  placeholder
-}) {
+function PasswordInput({ field, show, onToggle }) {
   const { formItemId, error } = useFormField();
   return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
     /* @__PURE__ */ jsx5(
@@ -626,7 +622,6 @@ function PasswordInput({
         ...field,
         id: formItemId,
         type: show ? "text" : "password",
-        placeholder,
         "aria-invalid": !!error,
         className: "pr-10"
       }
@@ -747,7 +742,7 @@ var ResetPasswordForm = ({
   return /* @__PURE__ */ jsxs3(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
       footer: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between w-full gap-2", children: [
@@ -810,8 +805,7 @@ var ResetPasswordForm = ({
                       {
                         field,
                         show: showPassword,
-                        onToggle: () => setShowPassword(!showPassword),
-                        placeholder: t("form.passwordPlaceholder")
+                        onToggle: () => setShowPassword(!showPassword)
                       }
                     ),
                     /* @__PURE__ */ jsx5(FormMessage2, {})
@@ -830,25 +824,22 @@ var ResetPasswordForm = ({
                       {
                         field,
                         show: showPassword,
-                        onToggle: () => setShowPassword(!showPassword),
-                        placeholder: t("form.passwordPlaceholder")
+                        onToggle: () => setShowPassword(!showPassword)
                       }
                     ),
                     /* @__PURE__ */ jsx5(FormMessage2, {})
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsx5(
                 Button2,
                 {
                   type: "submit",
                   form: "reset-password-form",
                   className: "w-full",
                   disabled: isLoading || resetPasswordMutation.isPending,
-                  children: [
-                    isLoading || resetPasswordMutation.isPending && /* @__PURE__ */ jsx5(Spinner2, {}),
-                    isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
-                  ]
+                  loading: isLoading || resetPasswordMutation.isPending,
+                  children: isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
                 }
               )
             ]
@@ -864,7 +855,7 @@ var ResetPasswordForm = ({
   );
 };
 
-// src/components/auth/sign-in.tsx
+// src/components/auth/set-password.tsx
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import {
   Alert as Alert3,
@@ -882,7 +873,7 @@ import {
 } from "@mesob/ui/components";
 import { useMesob as useMesob4 } from "@mesob/ui/providers";
 import { IconAlertCircle as IconAlertCircle3, IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-react";
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useEffectEvent, useState as useState4 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
 import { toast as toast3 } from "sonner";
 import { z as z3 } from "zod";
@@ -905,15 +896,9 @@ function normalizePhone(phone) {
   return cleaned;
 }
 
-// src/components/auth/sign-in.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-function PasswordInput2({
-  field,
-  show,
-  onToggle,
-  placeholder
-}) {
+// src/components/auth/set-password.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function PasswordInput2({ field, show, onToggle }) {
   const { formItemId, error } = useFormField2();
   return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
     /* @__PURE__ */ jsx6(
@@ -922,8 +907,6 @@ function PasswordInput2({
         ...field,
         id: formItemId,
         type: show ? "text" : "password",
-        placeholder,
-        autoComplete: "current-password",
         "aria-invalid": !!error,
         className: "pr-10"
       }
@@ -942,52 +925,339 @@ function PasswordInput2({
     )
   ] });
 }
-var signInSchema = (t, phoneRegex) => z3.object({
-  username: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
+var setPasswordSchema = (t) => z3.object({
+  password: z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
+  confirmPassword: z3.string()
+}).refine((data) => data.password === data.confirmPassword, {
+  message: t("errors.passwordsMismatch"),
+  path: ["confirmPassword"]
+});
+var getPhoneRegex = (phoneRegex) => {
+  if (typeof phoneRegex === "string") {
+    return new RegExp(phoneRegex);
+  }
+  return phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
+};
+var normalizeIdentifier = (identifier, phoneRegex) => {
+  const resolvedPhoneRegex = getPhoneRegex(phoneRegex);
+  return resolvedPhoneRegex.test(identifier) ? normalizePhone(identifier) : identifier;
+};
+var SetPassword = function SetPassword2({
+  identifier,
+  redirectUrl
+} = {}) {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const mesob = useMesob4();
+  const t = useTranslator("Auth.setPassword");
+  const Link = mesob?.navigation?.Link;
+  const [error, setError] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(false);
+  const [isChecking, setIsChecking] = useState4(true);
+  const [showPassword, setShowPassword] = useState4(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState4(false);
+  const [account, setAccount] = useState4(null);
+  const checkAccountMutation = hooks.useMutation("post", "/check-account");
+  const setPasswordMutation = hooks.useMutation("post", "/password/set");
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  const form = useForm3({
+    resolver: zodResolver3(setPasswordSchema(t)),
+    defaultValues: {
+      password: "",
+      confirmPassword: ""
+    }
+  });
+  useEffect3(() => {
+    if (error) {
+      toast3.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
+  const loadAccount = useEffectEvent(async () => {
+    if (!identifier) {
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.missingIdentifier")
+      });
+      setIsChecking(false);
+      return;
+    }
+    try {
+      const normalizedIdentifier = normalizeIdentifier(
+        identifier,
+        config.phoneRegex
+      );
+      const res = await checkAccountMutation.mutateAsync({
+        body: { username: normalizedIdentifier }
+      });
+      if (!(res.exists && res.account && res.requiresPasswordSetup)) {
+        setError({
+          title: t("errors.fallback"),
+          description: t("errors.accountNotEligible")
+        });
+        setIsChecking(false);
+        return;
+      }
+      setAccount({
+        fullName: res.account.fullName,
+        email: res.account.email,
+        phone: res.account.phone
+      });
+    } catch {
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.accountLookupFailed")
+      });
+    } finally {
+      setIsChecking(false);
+    }
+  });
+  useEffect3(() => {
+    loadAccount().catch(() => {
+      setIsChecking(false);
+    });
+  }, [identifier]);
+  const handleSubmit = form.handleSubmit(async (values) => {
+    if (!identifier) {
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const normalizedIdentifier = normalizeIdentifier(
+        identifier,
+        config.phoneRegex
+      );
+      const res = await setPasswordMutation.mutateAsync({
+        body: {
+          identifier: normalizedIdentifier,
+          password: values.password
+        }
+      });
+      if ("user" in res && "session" in res) {
+        setAuth(res);
+      }
+      onNavigate(defaultRedirect);
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  });
+  const accountLabel = account?.email ? t("form.emailLabel") : t("form.phoneLabel");
+  const accountValue = account?.email || account?.phone || identifier || "";
+  let errorContent = null;
+  if (error) {
+    errorContent = typeof error === "string" ? { title: "Error", description: error } : error;
+  }
+  const showError = !isChecking && !!errorContent;
+  const errorAlert = showError && errorContent && /* @__PURE__ */ jsxs4(Alert3, { variant: "destructive", className: "mt-4", children: [
+    /* @__PURE__ */ jsx6(IconAlertCircle3, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx6(AlertTitle3, { children: errorContent.title }),
+    /* @__PURE__ */ jsx6(AlertDescription3, { children: errorContent.description })
+  ] });
+  return /* @__PURE__ */ jsxs4(
+    AuthLayout,
+    {
+      title: config.ui.name,
+      description: t("description"),
+      logoImage,
+      footer: /* @__PURE__ */ jsxs4("p", { children: [
+        t("footer.hasPassword"),
+        " ",
+        Link ? /* @__PURE__ */ jsx6(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx6(
+          "a",
+          {
+            href: signInLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(signInLink);
+            },
+            className: "text-primary hover:underline",
+            children: t("footer.signInCta")
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx6(Form3, { ...form, children: /* @__PURE__ */ jsxs4(
+          "form",
+          {
+            id: "set-password-form",
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxs4(FormItem3, { children: [
+                /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.fullNameLabel") }),
+                /* @__PURE__ */ jsx6(FormControl3, { children: /* @__PURE__ */ jsx6(Input3, { value: account?.fullName || "", disabled: true }) })
+              ] }),
+              /* @__PURE__ */ jsxs4(FormItem3, { children: [
+                /* @__PURE__ */ jsx6(FormLabel3, { children: accountLabel }),
+                /* @__PURE__ */ jsx6(FormControl3, { children: /* @__PURE__ */ jsx6(Input3, { value: accountValue, disabled: true }) })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                FormField3,
+                {
+                  control: form.control,
+                  name: "password",
+                  render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
+                    /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.passwordLabel") }),
+                    /* @__PURE__ */ jsx6(
+                      PasswordInput2,
+                      {
+                        field,
+                        show: showPassword,
+                        onToggle: () => setShowPassword(!showPassword)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(FormMessage3, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                FormField3,
+                {
+                  control: form.control,
+                  name: "confirmPassword",
+                  render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
+                    /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.confirmPasswordLabel") }),
+                    /* @__PURE__ */ jsx6(
+                      PasswordInput2,
+                      {
+                        field,
+                        show: showConfirmPassword,
+                        onToggle: () => setShowConfirmPassword(!showConfirmPassword)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(FormMessage3, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                Button3,
+                {
+                  type: "submit",
+                  form: "set-password-form",
+                  className: "w-full",
+                  disabled: isChecking || !account || isLoading || setPasswordMutation.isPending,
+                  children: isLoading || setPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
+                }
+              )
+            ]
+          }
+        ) }),
+        errorAlert
+      ]
+    }
+  );
+};
+
+// src/components/auth/sign-in.tsx
+import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
+import {
+  Alert as Alert4,
+  AlertDescription as AlertDescription4,
+  AlertTitle as AlertTitle4,
+  Button as Button4,
+  Form as Form4,
+  FormControl as FormControl4,
+  FormField as FormField4,
+  FormItem as FormItem4,
+  FormLabel as FormLabel4,
+  FormMessage as FormMessage4,
+  Input as Input4,
+  useFormField as useFormField3
+} from "@mesob/ui/components";
+import { useMesob as useMesob5 } from "@mesob/ui/providers";
+import { IconAlertCircle as IconAlertCircle4, IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useForm as useForm4 } from "react-hook-form";
+import { toast as toast4 } from "sonner";
+import { z as z4 } from "zod";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+function PasswordInput3({ field, show, onToggle }) {
+  const { formItemId, error } = useFormField3();
+  return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx7(
+      Input4,
+      {
+        ...field,
+        id: formItemId,
+        type: show ? "text" : "password",
+        autoComplete: "current-password",
+        "aria-invalid": !!error,
+        className: "pr-10"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Button4,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+        onClick: onToggle,
+        "aria-label": show ? "Hide password" : "Show password",
+        children: show ? /* @__PURE__ */ jsx7(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye3, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+var signInSchema = (t, phoneRegex) => z4.object({
+  username: z4.string().trim().min(1, { message: t("errors.requiredField") }).refine(
     (val) => {
-      const isEmail = z3.email().safeParse(val).success;
+      const isEmail = z4.email().safeParse(val).success;
       const isPhone3 = phoneRegex.test(val);
       return isEmail || isPhone3;
     },
     { message: t("errors.invalidEmailOrPhone") }
   ),
-  password: z3.union([
-    z3.literal(""),
-    z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
+  password: z4.union([
+    z4.literal(""),
+    z4.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
   ]).optional()
 });
 var SignIn = ({ redirectUrl } = {}) => {
   const { hooks, setAuth } = useApi();
   const { config } = useConfig();
-  const mesob = useMesob4();
+  const mesob = useMesob5();
   const t = useTranslator("Auth.signIn");
   const Link = mesob?.navigation?.Link;
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [showPasswordField, setShowPasswordField] = useState4(false);
-  const [showPassword, setShowPassword] = useState4(false);
-  const [username, setUsername] = useState4("");
-  const [isChecking, setIsChecking] = useState4(false);
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [showPasswordField, setShowPasswordField] = useState5(false);
+  const [showPassword, setShowPassword] = useState5(false);
+  const [username, setUsername] = useState5("");
+  const [isChecking, setIsChecking] = useState5(false);
   const checkUserMutation = hooks.useMutation("post", "/check-account");
   const signInMutation = hooks.useMutation("post", "/sign-in");
   const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/dashboard";
   const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
   const signUpLink = config.navigation?.links?.signUp || "/auth/sign-up";
+  const setPasswordLink = config.navigation?.links?.setPassword || "/auth/set-password";
   const onNavigate = config.navigation?.onNavigate || ((path) => {
     if (typeof window !== "undefined") {
       window.location.href = path;
     }
   });
   const logoImage = config.ui.logoImage;
-  const form = useForm3({
-    resolver: zodResolver3(signInSchema(t, phoneRegex)),
+  const form = useForm4({
+    resolver: zodResolver4(signInSchema(t, phoneRegex)),
     defaultValues: { username: "", password: "" },
-    mode: "onChange"
+    mode: "onBlur"
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (error) {
-      toast3.error(error.title || "Error", {
+      toast4.error(error.title || "Error", {
         description: error.description
       });
     }
@@ -1002,16 +1272,26 @@ var SignIn = ({ redirectUrl } = {}) => {
         }
       });
       if (result.exists) {
+        if (result.requiresPasswordSetup) {
+          const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
+          onNavigate(
+            `${setPasswordLink}?identifier=${encodeURIComponent(normalizedUsername)}${redirectParam}`
+          );
+          return;
+        }
         setUsername(normalizedUsername);
         form.setValue("username", normalizedUsername);
         setShowPasswordField(true);
       } else {
         const email = isPhone(normalizedUsername) ? "" : normalizedUsername;
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
         if (email) {
-          onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
+          onNavigate(
+            `${signUpLink}?email=${encodeURIComponent(email)}${redirectParam}`
+          );
         } else {
           onNavigate(
-            `${signUpLink}?phone=${encodeURIComponent(normalizedUsername)}`
+            `${signUpLink}?phone=${encodeURIComponent(normalizedUsername)}${redirectParam}`
           );
         }
       }
@@ -1044,7 +1324,8 @@ var SignIn = ({ redirectUrl } = {}) => {
         }
       });
       if ("verificationId" in res && res.verificationId) {
-        const verifyPath = isPhone(username) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(username)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
+        const verifyPath = isPhone(username) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(username)}${redirectParam}` : `/auth/verify-email?verificationId=${res.verificationId}${redirectParam}`;
         onNavigate(verifyPath);
         return;
       }
@@ -1053,6 +1334,15 @@ var SignIn = ({ redirectUrl } = {}) => {
       }
       onNavigate(defaultRedirect);
     } catch (err) {
+      const authError = err;
+      const errorCode = authError.code || authError.message;
+      if (errorCode === "HAS_NO_PASSWORD") {
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
+        onNavigate(
+          `${setPasswordLink}?identifier=${encodeURIComponent(username)}${redirectParam}`
+        );
+        return;
+      }
       handleError(err, setError, t);
     } finally {
       setIsLoading(false);
@@ -1078,19 +1368,19 @@ var SignIn = ({ redirectUrl } = {}) => {
       errorContent = error;
     }
   }
-  const formContent = /* @__PURE__ */ jsx6(Form3, { ...form, children: /* @__PURE__ */ jsxs4(
+  const formContent = /* @__PURE__ */ jsx7(Form4, { ...form, children: /* @__PURE__ */ jsxs5(
     "form",
     {
       id: "sign-in-form",
       onSubmit: form.handleSubmit(onSubmit),
       className: "space-y-4",
       children: [
-        showPasswordField ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsxs4(FormItem3, { children: [
-            /* @__PURE__ */ jsxs4(FormLabel3, { className: "flex justify-between items-center", children: [
+        showPasswordField ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsxs5(FormItem4, { children: [
+            /* @__PURE__ */ jsxs5(FormLabel4, { className: "flex justify-between items-center", children: [
               t("form.accountLabel"),
-              /* @__PURE__ */ jsx6(
-                Button3,
+              /* @__PURE__ */ jsx7(
+                Button4,
                 {
                   type: "button",
                   variant: "link",
@@ -1101,58 +1391,50 @@ var SignIn = ({ redirectUrl } = {}) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx6(
-              Input3,
+            /* @__PURE__ */ jsx7(
+              Input4,
               {
                 id: "sign-in-username",
                 type: "text",
                 value: username,
+                autoComplete: "username",
                 disabled: true
               }
             )
           ] }),
-          /* @__PURE__ */ jsx6(
-            FormField3,
+          /* @__PURE__ */ jsx7(
+            FormField4,
             {
               control: form.control,
               name: "password",
-              render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
-                /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.passwordLabel") }),
-                /* @__PURE__ */ jsx6(
-                  PasswordInput2,
+              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
+                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.passwordLabel") }),
+                /* @__PURE__ */ jsx7(
+                  PasswordInput3,
                   {
                     field: { ...field, value: field.value ?? "" },
                     show: showPassword,
-                    onToggle: () => setShowPassword(!showPassword),
-                    placeholder: t("form.passwordPlaceholder")
+                    onToggle: () => setShowPassword(!showPassword)
                   }
                 ),
-                /* @__PURE__ */ jsx6(FormMessage3, {})
+                /* @__PURE__ */ jsx7(FormMessage4, {})
               ] })
             }
           )
-        ] }) : /* @__PURE__ */ jsx6(
-          FormField3,
+        ] }) : /* @__PURE__ */ jsx7(
+          FormField4,
           {
             control: form.control,
             name: "username",
-            render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
-              /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.accountLabel") }),
-              /* @__PURE__ */ jsx6(FormControl3, { children: /* @__PURE__ */ jsx6(
-                Input3,
-                {
-                  ...field,
-                  type: "text",
-                  placeholder: t("form.accountPlaceholder"),
-                  autoComplete: "username"
-                }
-              ) }),
-              /* @__PURE__ */ jsx6(FormMessage3, {})
+            render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
+              /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.accountLabel") }),
+              /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(Input4, { ...field, type: "text", autoComplete: "username" }) }),
+              /* @__PURE__ */ jsx7(FormMessage4, {})
             ] })
           }
         ),
-        /* @__PURE__ */ jsx6(
-          Button3,
+        /* @__PURE__ */ jsx7(
+          Button4,
           {
             type: "submit",
             className: "w-full",
@@ -1164,20 +1446,20 @@ var SignIn = ({ redirectUrl } = {}) => {
       ]
     }
   ) });
-  return /* @__PURE__ */ jsx6("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx7("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs5(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
-      footer: showPasswordField ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center w-full", children: Link ? /* @__PURE__ */ jsx6(
+      footer: showPasswordField ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center w-full", children: Link ? /* @__PURE__ */ jsx7(
         Link,
         {
           href: forgotPasswordLink,
           className: "text-primary inline-block hover:underline",
           children: t("footer.forgotPassword")
         }
-      ) : /* @__PURE__ */ jsx6(
+      ) : /* @__PURE__ */ jsx7(
         "a",
         {
           href: forgotPasswordLink,
@@ -1191,10 +1473,10 @@ var SignIn = ({ redirectUrl } = {}) => {
       ) }) : void 0,
       children: [
         formContent,
-        errorContent && /* @__PURE__ */ jsxs4(Alert3, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx6(IconAlertCircle3, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx6(AlertTitle3, { children: errorContent.title }),
-          /* @__PURE__ */ jsx6(AlertDescription3, { children: errorContent.description })
+        errorContent && /* @__PURE__ */ jsxs5(Alert4, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx7(IconAlertCircle4, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx7(AlertTitle4, { children: errorContent.title }),
+          /* @__PURE__ */ jsx7(AlertDescription4, { children: errorContent.description })
         ] })
       ]
     }
@@ -1202,50 +1484,44 @@ var SignIn = ({ redirectUrl } = {}) => {
 };
 
 // src/components/auth/sign-up.tsx
-import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
+import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import {
-  Alert as Alert4,
-  AlertDescription as AlertDescription4,
-  AlertTitle as AlertTitle4,
-  Button as Button4,
-  Form as Form4,
-  FormControl as FormControl4,
-  FormField as FormField4,
-  FormItem as FormItem4,
-  FormLabel as FormLabel4,
-  FormMessage as FormMessage4,
-  Input as Input4,
-  useFormField as useFormField3
+  Alert as Alert5,
+  AlertDescription as AlertDescription5,
+  AlertTitle as AlertTitle5,
+  Button as Button5,
+  Form as Form5,
+  FormControl as FormControl5,
+  FormField as FormField5,
+  FormItem as FormItem5,
+  FormLabel as FormLabel5,
+  FormMessage as FormMessage5,
+  Input as Input5,
+  useFormField as useFormField4
 } from "@mesob/ui/components";
-import { useMesob as useMesob5 } from "@mesob/ui/providers";
-import { IconAlertCircle as IconAlertCircle4, IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { useForm as useForm4 } from "react-hook-form";
-import { toast as toast4 } from "sonner";
-import { z as z4 } from "zod";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useMesob as useMesob6 } from "@mesob/ui/providers";
+import { IconAlertCircle as IconAlertCircle5, IconEye as IconEye4, IconEyeOff as IconEyeOff4 } from "@tabler/icons-react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useForm as useForm5 } from "react-hook-form";
+import { toast as toast5 } from "sonner";
+import { z as z5 } from "zod";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-function PasswordInput3({
-  field,
-  show,
-  onToggle,
-  placeholder
-}) {
-  const { formItemId, error } = useFormField3();
-  return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx7(
-      Input4,
+function PasswordInput4({ field, show, onToggle }) {
+  const { formItemId, error } = useFormField4();
+  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx8(
+      Input5,
       {
         ...field,
         id: formItemId,
         type: show ? "text" : "password",
-        placeholder,
         "aria-invalid": !!error,
         className: "pr-10"
       }
     ),
-    /* @__PURE__ */ jsx7(
-      Button4,
+    /* @__PURE__ */ jsx8(
+      Button5,
       {
         type: "button",
         variant: "ghost",
@@ -1253,14 +1529,14 @@ function PasswordInput3({
         className: "absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground",
         onClick: onToggle,
         "aria-label": show ? "Hide password" : "Show password",
-        children: show ? /* @__PURE__ */ jsx7(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye3, { className: "h-4 w-4" })
+        children: show ? /* @__PURE__ */ jsx8(IconEyeOff4, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx8(IconEye4, { className: "h-4 w-4" })
       }
     )
   ] });
 }
-var signUpSchema = (t) => z4.object({
-  fullName: z4.string().min(1, t("errors.fullNameRequired")),
-  identifier: z4.string().min(1, t("errors.contactRequired")).refine(
+var signUpSchema = (t) => z5.object({
+  fullName: z5.string().min(1, t("errors.fullNameRequired")),
+  identifier: z5.string().min(1, t("errors.contactRequired")).refine(
     (val) => {
       if (!val) {
         return false;
@@ -1271,8 +1547,8 @@ var signUpSchema = (t) => z4.object({
       message: t("errors.invalidEmailOrPhone")
     }
   ),
-  password: z4.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
-  confirmPassword: z4.string()
+  password: z5.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
+  confirmPassword: z5.string()
 }).refine((data) => data.password === data.confirmPassword, {
   message: t("errors.passwordsMismatch"),
   path: ["confirmPassword"]
@@ -1283,13 +1559,13 @@ var SignUp = ({
 } = {}) => {
   const { hooks, setAuth } = useApi();
   const { config } = useConfig();
-  const mesob = useMesob5();
+  const mesob = useMesob6();
   const t = useTranslator("Auth.signUp");
   const Link = mesob?.navigation?.Link;
-  const [isLoading, setIsLoading] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [showPassword, setShowPassword] = useState5(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState5(false);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [showPassword, setShowPassword] = useState6(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState6(false);
   const signUpMutation = hooks.useMutation("post", "/sign-up");
   const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
   const onNavigate = config.navigation?.onNavigate || ((path) => {
@@ -1300,8 +1576,8 @@ var SignUp = ({
   const logoImage = config.ui.logoImage;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
   const hasInitialIdentifier = !!initialIdentifier;
-  const form = useForm4({
-    resolver: zodResolver4(signUpSchema(t)),
+  const form = useForm5({
+    resolver: zodResolver5(signUpSchema(t)),
     defaultValues: {
       fullName: "",
       identifier: initialIdentifier || "",
@@ -1309,14 +1585,14 @@ var SignUp = ({
       confirmPassword: ""
     }
   });
-  useEffect4(() => {
+  useEffect5(() => {
     if (initialIdentifier) {
       form.setValue("identifier", initialIdentifier);
     }
   }, [initialIdentifier, form]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (error) {
-      toast4.error(error.title || "Error", {
+      toast5.error(error.title || "Error", {
         description: error.description
       });
     }
@@ -1331,23 +1607,22 @@ var SignUp = ({
         body: usingPhone ? {
           phone: identifier,
           password: values.password,
-          fullName: values.fullName,
-          handle: values.handle
+          fullName: values.fullName
         } : {
           email: identifier,
           password: values.password,
-          fullName: values.fullName,
-          handle: values.handle
+          fullName: values.fullName
         }
       });
       if ("verificationId" in res && res.verificationId) {
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
         if (usingPhone) {
           onNavigate(
-            `/auth/verify-phone?context=sign-up&verificationId=${res.verificationId}&phone=${encodeURIComponent(identifier)}`
+            `/auth/verify-phone?context=sign-up&verificationId=${res.verificationId}&phone=${encodeURIComponent(identifier)}${redirectParam}`
           );
         } else {
           onNavigate(
-            `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(identifier)}`
+            `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(identifier)}${redirectParam}`
           );
         }
         return;
@@ -1380,16 +1655,16 @@ var SignUp = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
-      footer: /* @__PURE__ */ jsxs5("p", { children: [
+      footer: /* @__PURE__ */ jsxs6("p", { children: [
         t("footer.hasAccount"),
         " ",
-        Link ? /* @__PURE__ */ jsx7(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx7(
+        Link ? /* @__PURE__ */ jsx8(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx8(
           "a",
           {
             href: signInLink,
@@ -1403,93 +1678,84 @@ var SignUp = ({
         )
       ] }),
       children: [
-        /* @__PURE__ */ jsx7(Form4, { ...form, children: /* @__PURE__ */ jsxs5("form", { id: "sign-up-form", onSubmit: handleSubmit, className: "space-y-4", children: [
-          /* @__PURE__ */ jsx7(
-            FormField4,
+        /* @__PURE__ */ jsx8(Form5, { ...form, children: /* @__PURE__ */ jsxs6("form", { id: "sign-up-form", onSubmit: handleSubmit, className: "space-y-4", children: [
+          /* @__PURE__ */ jsx8(
+            FormField5,
             {
               control: form.control,
               name: "fullName",
-              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
-                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.fullNameLabel") }),
-                /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(
-                  Input4,
-                  {
-                    ...field,
-                    placeholder: t("form.fullNamePlaceholder")
-                  }
-                ) }),
-                /* @__PURE__ */ jsx7(FormMessage4, {})
+              render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem5, { children: [
+                /* @__PURE__ */ jsx8(FormLabel5, { children: t("form.fullNameLabel") }),
+                /* @__PURE__ */ jsx8(FormControl5, { children: /* @__PURE__ */ jsx8(Input5, { ...field }) }),
+                /* @__PURE__ */ jsx8(FormMessage5, {})
               ] })
             }
           ),
-          /* @__PURE__ */ jsx7(
-            FormField4,
+          /* @__PURE__ */ jsx8(
+            FormField5,
             {
               control: form.control,
               name: "identifier",
-              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
-                /* @__PURE__ */ jsx7(
-                  FormLabel4,
+              render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem5, { children: [
+                /* @__PURE__ */ jsx8(
+                  FormLabel5,
                   {
                     className: hasInitialIdentifier ? "block" : void 0,
                     children: identifierLabel
                   }
                 ),
-                /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(
-                  Input4,
+                /* @__PURE__ */ jsx8(FormControl5, { children: /* @__PURE__ */ jsx8(
+                  Input5,
                   {
                     ...field,
                     type: field.value.includes("@") ? "email" : "tel",
-                    placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
                     disabled: hasInitialIdentifier
                   }
                 ) }),
-                /* @__PURE__ */ jsx7(FormMessage4, {})
+                /* @__PURE__ */ jsx8(FormMessage5, {})
               ] })
             }
           ),
-          /* @__PURE__ */ jsx7(
-            FormField4,
+          /* @__PURE__ */ jsx8(
+            FormField5,
             {
               control: form.control,
               name: "password",
-              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
-                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.passwordLabel") }),
-                /* @__PURE__ */ jsx7(
-                  PasswordInput3,
+              render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem5, { children: [
+                /* @__PURE__ */ jsx8(FormLabel5, { children: t("form.passwordLabel") }),
+                /* @__PURE__ */ jsx8(
+                  PasswordInput4,
                   {
                     field,
                     show: showPassword,
-                    onToggle: () => setShowPassword(!showPassword),
-                    placeholder: t("form.passwordPlaceholder")
+                    onToggle: () => setShowPassword(!showPassword)
                   }
                 ),
-                /* @__PURE__ */ jsx7(FormMessage4, {})
+                /* @__PURE__ */ jsx8(FormMessage5, {})
               ] })
             }
           ),
-          /* @__PURE__ */ jsx7(
-            FormField4,
+          /* @__PURE__ */ jsx8(
+            FormField5,
             {
               control: form.control,
               name: "confirmPassword",
-              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
-                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.confirmPasswordLabel") }),
-                /* @__PURE__ */ jsx7(
-                  PasswordInput3,
+              render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem5, { children: [
+                /* @__PURE__ */ jsx8(FormLabel5, { children: t("form.confirmPasswordLabel") }),
+                /* @__PURE__ */ jsx8(
+                  PasswordInput4,
                   {
                     field,
                     show: showConfirmPassword,
-                    onToggle: () => setShowConfirmPassword(!showConfirmPassword),
-                    placeholder: t("form.passwordPlaceholder")
+                    onToggle: () => setShowConfirmPassword(!showConfirmPassword)
                   }
                 ),
-                /* @__PURE__ */ jsx7(FormMessage4, {})
+                /* @__PURE__ */ jsx8(FormMessage5, {})
               ] })
             }
           ),
-          /* @__PURE__ */ jsx7(
-            Button4,
+          /* @__PURE__ */ jsx8(
+            Button5,
             {
               type: "submit",
               form: "sign-up-form",
@@ -1499,10 +1765,10 @@ var SignUp = ({
             }
           )
         ] }) }),
-        errorContent && /* @__PURE__ */ jsxs5(Alert4, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx7(IconAlertCircle4, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx7(AlertTitle4, { children: errorContent.title }),
-          /* @__PURE__ */ jsx7(AlertDescription4, { children: errorContent.description })
+        errorContent && /* @__PURE__ */ jsxs6(Alert5, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx8(IconAlertCircle5, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx8(AlertTitle5, { children: errorContent.title }),
+          /* @__PURE__ */ jsx8(AlertDescription5, { children: errorContent.description })
         ] })
       ]
     }
@@ -1510,36 +1776,35 @@ var SignUp = ({
 };
 
 // src/components/auth/verification-form.tsx
-import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
+import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
 import {
   Button as Button6,
-  Form as Form5,
-  FormControl as FormControl5,
-  FormField as FormField5,
-  FormItem as FormItem5,
-  FormLabel as FormLabel5,
-  FormMessage as FormMessage5,
+  Form as Form6,
+  FormControl as FormControl6,
+  FormField as FormField6,
+  FormItem as FormItem6,
+  FormLabel as FormLabel6,
+  FormMessage as FormMessage6,
   InputOTP as InputOTP2,
   InputOTPGroup as InputOTPGroup2,
-  InputOTPSlot as InputOTPSlot2,
-  Spinner as Spinner4
+  InputOTPSlot as InputOTPSlot2
 } from "@mesob/ui/components";
-import { useForm as useForm5 } from "react-hook-form";
-import { z as z5 } from "zod";
+import { useForm as useForm6 } from "react-hook-form";
+import { z as z6 } from "zod";
 
 // src/components/auth/countdown.tsx
-import { Button as Button5, Spinner as Spinner3 } from "@mesob/ui/components";
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Spinner } from "@mesob/ui/components";
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var Countdown = ({
   initialSeconds = 60,
   onResend,
   resending = false
 }) => {
   const t = useTranslator("Common");
-  const [seconds, setSeconds] = useState6(initialSeconds);
-  const [isResending, setIsResending] = useState6(false);
-  useEffect5(() => {
+  const [seconds, setSeconds] = useState7(initialSeconds);
+  const [isResending, setIsResending] = useState7(false);
+  useEffect6(() => {
     if (seconds <= 0) {
       return;
     }
@@ -1564,17 +1829,19 @@ var Countdown = ({
       setIsResending(false);
     }
   };
+  const busy = isResending || resending;
   if (seconds > 0) {
-    return /* @__PURE__ */ jsx8(Button5, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+    return /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: t("resendIn", { seconds }) });
   }
-  return /* @__PURE__ */ jsxs6(
-    Button5,
+  return /* @__PURE__ */ jsxs7(
+    "button",
     {
-      variant: "ghost",
+      type: "button",
       onClick: handleResend,
-      disabled: isResending || resending,
+      disabled: busy,
+      className: "text-sm text-primary hover:underline disabled:opacity-50 flex items-center gap-1",
       children: [
-        isResending || resending && /* @__PURE__ */ jsx8(Spinner3, {}),
+        busy && /* @__PURE__ */ jsx9(Spinner, { className: "h-3 w-3" }),
         t("resend")
       ]
     }
@@ -1582,9 +1849,9 @@ var Countdown = ({
 };
 
 // src/components/auth/verification-form.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var verificationSchema = (t) => z5.object({
-  code: z5.string().length(6, t("form.codeLength"))
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var verificationSchema = (t) => z6.object({
+  code: z6.string().length(6, t("form.codeLength"))
 });
 var VerificationForm = ({
   onSubmit,
@@ -1592,30 +1859,29 @@ var VerificationForm = ({
   isLoading = false
 }) => {
   const t = useTranslator("Auth.verification");
-  const form = useForm5({
-    resolver: zodResolver5(verificationSchema(t)),
-    defaultValues: {
-      code: ""
-    }
+  const form = useForm6({
+    resolver: zodResolver6(verificationSchema(t)),
+    defaultValues: { code: "" }
   });
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
-  return /* @__PURE__ */ jsx9(Form5, { ...form, children: /* @__PURE__ */ jsxs7(
+  const codeLength = form.watch("code").length;
+  return /* @__PURE__ */ jsx10(Form6, { ...form, children: /* @__PURE__ */ jsxs8(
     "form",
     {
       id: "verification-form",
       onSubmit: handleSubmit,
       className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx9(
-          FormField5,
+        /* @__PURE__ */ jsx10(
+          FormField6,
           {
             control: form.control,
             name: "code",
-            render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem5, { children: [
-              /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9(FormLabel5, { children: t("form.codeLabel") }) }),
-              /* @__PURE__ */ jsx9(FormControl5, { children: /* @__PURE__ */ jsx9(
+            render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem6, { children: [
+              /* @__PURE__ */ jsx10("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx10(FormLabel6, { children: t("form.codeLabel") }) }),
+              /* @__PURE__ */ jsx10(FormControl6, { children: /* @__PURE__ */ jsx10(
                 InputOTP2,
                 {
                   maxLength: 6,
@@ -1624,47 +1890,44 @@ var VerificationForm = ({
                   onChange: field.onChange,
                   onBlur: field.onBlur,
                   containerClassName: "gap-4 justify-center mb-2 flex items-center",
-                  children: /* @__PURE__ */ jsxs7(InputOTPGroup2, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
-                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 0 }),
-                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 1 }),
-                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 2 }),
-                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 3 }),
-                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 4 }),
-                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 5 })
+                  children: /* @__PURE__ */ jsxs8(InputOTPGroup2, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                    /* @__PURE__ */ jsx10(InputOTPSlot2, { className: "h-12", index: 0 }),
+                    /* @__PURE__ */ jsx10(InputOTPSlot2, { className: "h-12", index: 1 }),
+                    /* @__PURE__ */ jsx10(InputOTPSlot2, { className: "h-12", index: 2 }),
+                    /* @__PURE__ */ jsx10(InputOTPSlot2, { className: "h-12", index: 3 }),
+                    /* @__PURE__ */ jsx10(InputOTPSlot2, { className: "h-12", index: 4 }),
+                    /* @__PURE__ */ jsx10(InputOTPSlot2, { className: "h-12", index: 5 })
                   ] })
                 }
               ) }),
-              /* @__PURE__ */ jsx9(FormMessage5, {})
+              /* @__PURE__ */ jsx10(FormMessage6, {})
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx9(Countdown, { onResend, resending: isLoading }),
-          /* @__PURE__ */ jsxs7(
-            Button6,
-            {
-              type: "submit",
-              form: "verification-form",
-              disabled: isLoading || form.watch("code").length !== 6,
-              children: [
-                isLoading && /* @__PURE__ */ jsx9(Spinner4, {}),
-                t("form.confirm")
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx10(
+          Button6,
+          {
+            type: "submit",
+            form: "verification-form",
+            className: "w-full",
+            disabled: isLoading || codeLength !== 6,
+            loading: isLoading,
+            children: t("form.confirm")
+          }
+        ),
+        /* @__PURE__ */ jsx10("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx10(Countdown, { onResend, resending: isLoading }) })
       ]
     }
   ) });
 };
 
 // src/components/auth/verify-email.tsx
-import { Alert as Alert5, AlertDescription as AlertDescription5, AlertTitle as AlertTitle5 } from "@mesob/ui/components";
-import { useMesob as useMesob6 } from "@mesob/ui/providers";
-import { IconAlertCircle as IconAlertCircle5 } from "@tabler/icons-react";
-import { useEffect as useEffect6, useState as useState7 } from "react";
-import { toast as toast5 } from "sonner";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Alert as Alert6, AlertDescription as AlertDescription6, AlertTitle as AlertTitle6 } from "@mesob/ui/components";
+import { useMesob as useMesob7 } from "@mesob/ui/providers";
+import { IconAlertCircle as IconAlertCircle6 } from "@tabler/icons-react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { toast as toast6 } from "sonner";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var VerifyEmail = ({
   verificationId,
   email,
@@ -1672,13 +1935,13 @@ var VerifyEmail = ({
 }) => {
   const { hooks, setAuth } = useApi();
   const { config } = useConfig();
-  const mesob = useMesob6();
+  const mesob = useMesob7();
   const t = useTranslator("Auth.verification");
   const common = useTranslator("Common");
   const footer = useTranslator("Auth.forgotPassword.footer");
   const Link = mesob?.navigation?.Link;
-  const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [error, setError] = useState8(null);
   const verifyEmailMutation = hooks.useMutation(
     "post",
     "/email/verification/confirm"
@@ -1695,9 +1958,9 @@ var VerifyEmail = ({
   });
   const logoImage = config.ui.logoImage;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
-  useEffect6(() => {
+  useEffect7(() => {
     if (error) {
-      toast5.error(error.title || "Error", {
+      toast6.error(error.title || "Error", {
         description: error.description
       });
     }
@@ -1752,12 +2015,12 @@ var VerifyEmail = ({
     }
   };
   if (!verificationId) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       AuthLayout,
       {
         title: common("invalidLinkTitle"),
         description: common("invalidLinkDescription"),
-        footer: Link ? /* @__PURE__ */ jsx10(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx10(
+        footer: Link ? /* @__PURE__ */ jsx11(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx11(
           "a",
           {
             href: signInLink,
@@ -1769,7 +2032,7 @@ var VerifyEmail = ({
             children: footer("backToSignIn")
           }
         ),
-        children: /* @__PURE__ */ jsx10("div", {})
+        children: /* @__PURE__ */ jsx11("div", {})
       }
     );
   }
@@ -1781,13 +2044,13 @@ var VerifyEmail = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     AuthLayout,
     {
-      title: t("email.title"),
+      title: config.ui.name,
       description: t("email.description"),
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsx10(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx10(
+      footer: Link ? /* @__PURE__ */ jsx11(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx11(
         "a",
         {
           href: signInLink,
@@ -1800,7 +2063,7 @@ var VerifyEmail = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           VerificationForm,
           {
             verificationId,
@@ -1810,10 +2073,10 @@ var VerifyEmail = ({
             error
           }
         ),
-        errorContent && /* @__PURE__ */ jsxs8(Alert5, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx10(IconAlertCircle5, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx10(AlertTitle5, { children: errorContent.title }),
-          /* @__PURE__ */ jsx10(AlertDescription5, { children: errorContent.description })
+        errorContent && /* @__PURE__ */ jsxs9(Alert6, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx11(IconAlertCircle6, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx11(AlertTitle6, { children: errorContent.title }),
+          /* @__PURE__ */ jsx11(AlertDescription6, { children: errorContent.description })
         ] })
       ]
     }
@@ -1821,12 +2084,12 @@ var VerifyEmail = ({
 };
 
 // src/components/auth/verify-phone.tsx
-import { Alert as Alert6, AlertDescription as AlertDescription6, AlertTitle as AlertTitle6 } from "@mesob/ui/components";
-import { useMesob as useMesob7 } from "@mesob/ui/providers";
-import { IconAlertCircle as IconAlertCircle6 } from "@tabler/icons-react";
-import { useEffect as useEffect7, useState as useState8 } from "react";
-import { toast as toast6 } from "sonner";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Alert as Alert7, AlertDescription as AlertDescription7, AlertTitle as AlertTitle7 } from "@mesob/ui/components";
+import { useMesob as useMesob8 } from "@mesob/ui/providers";
+import { IconAlertCircle as IconAlertCircle7 } from "@tabler/icons-react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
+import { toast as toast7 } from "sonner";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var VerifyPhone = ({
   verificationId,
   context,
@@ -1835,13 +2098,13 @@ var VerifyPhone = ({
 }) => {
   const { hooks, refresh, setAuth } = useApi();
   const { config } = useConfig();
-  const mesob = useMesob7();
+  const mesob = useMesob8();
   const Link = mesob?.navigation?.Link;
   const t = useTranslator("Auth.verification");
   const common = useTranslator("Common");
   const footer = useTranslator("Auth.forgotPassword.footer");
-  const [isLoading, setIsLoading] = useState8(false);
-  const [error, setError] = useState8(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
   const verifyPhoneMutation = hooks.useMutation(
     "post",
     "/phone/verification/confirm"
@@ -1858,9 +2121,9 @@ var VerifyPhone = ({
   });
   const logoImage = config.ui.logoImage;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
-  useEffect7(() => {
+  useEffect8(() => {
     if (error) {
-      toast6.error(error.title || "Error", {
+      toast7.error(error.title || "Error", {
         description: error.description
       });
     }
@@ -1928,13 +2191,13 @@ var VerifyPhone = ({
     }
   };
   if (!verificationId) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       AuthLayout,
       {
         title: common("invalidLinkTitle"),
         description: common("invalidLinkDescription"),
-        footer: /* @__PURE__ */ jsx11(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }),
-        children: /* @__PURE__ */ jsx11("div", {})
+        footer: /* @__PURE__ */ jsx12(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }),
+        children: /* @__PURE__ */ jsx12("div", {})
       }
     );
   }
@@ -1946,15 +2209,15 @@ var VerifyPhone = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     AuthLayout,
     {
-      title: t("phone.title"),
+      title: config.ui.name,
       description: t("phone.description", {
         target: phone || t("phone.missingPhone")
       }),
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsx11(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx11(
+      footer: Link ? /* @__PURE__ */ jsx12(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx12(
         "a",
         {
           href: signInLink,
@@ -1967,7 +2230,7 @@ var VerifyPhone = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           VerificationForm,
           {
             verificationId,
@@ -1977,20 +2240,55 @@ var VerifyPhone = ({
             error
           }
         ),
-        errorContent && /* @__PURE__ */ jsxs9(Alert6, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx11(IconAlertCircle6, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx11(AlertTitle6, { children: errorContent.title }),
-          /* @__PURE__ */ jsx11(AlertDescription6, { children: errorContent.description })
+        errorContent && /* @__PURE__ */ jsxs10(Alert7, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx12(IconAlertCircle7, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx12(AlertTitle7, { children: errorContent.title }),
+          /* @__PURE__ */ jsx12(AlertDescription7, { children: errorContent.description })
         ] })
       ]
     }
   );
 };
 
+// src/components/authorization/deny.tsx
+import { deny as canDeny } from "@mesob/common";
+import { Fragment as Fragment2, jsx as jsx13 } from "react/jsx-runtime";
+function Deny({ permissions, userPermissions, children }) {
+  const { isLoading, user } = useSession();
+  if (userPermissions === void 0 && isLoading) {
+    return null;
+  }
+  const resolvedPermissions = userPermissions ?? user?.permissions ?? [];
+  if (canDeny(permissions, resolvedPermissions)) {
+    return /* @__PURE__ */ jsx13(Fragment2, { children });
+  }
+  return null;
+}
+
+// src/components/authorization/grant.tsx
+import { grant as canGrant } from "@mesob/common";
+import { Fragment as Fragment3, jsx as jsx14 } from "react/jsx-runtime";
+function Grant({
+  permissions,
+  userPermissions,
+  fallback = null,
+  children
+}) {
+  const { isLoading, user } = useSession();
+  if (userPermissions === void 0 && isLoading) {
+    return null;
+  }
+  const resolvedPermissions = userPermissions ?? user?.permissions ?? [];
+  if (canGrant(permissions, resolvedPermissions)) {
+    return /* @__PURE__ */ jsx14(Fragment3, { children });
+  }
+  return /* @__PURE__ */ jsx14(Fragment3, { children: fallback });
+}
+
 // src/components/error-boundary.tsx
 import { Button as Button7 } from "@mesob/ui/components";
 import { Component } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -2012,28 +2310,112 @@ var ErrorBoundary = class extends Component {
           reset: this.reset
         });
       }
-      return /* @__PURE__ */ jsx12(ErrorFallback, { error: this.state.error, reset: this.reset });
+      return /* @__PURE__ */ jsx15(ErrorFallback, { error: this.state.error, reset: this.reset });
     }
     return this.props.children;
   }
 };
 function ErrorFallback({ error, reset }) {
-  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: /* @__PURE__ */ jsxs10("div", { className: "max-w-md w-full space-y-4 text-center", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx12("h2", { className: "text-2xl font-bold text-destructive", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: error.message || "An unexpected error occurred" })
+  return /* @__PURE__ */ jsx15("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: /* @__PURE__ */ jsxs11("div", { className: "max-w-md w-full space-y-4 text-center", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx15("h2", { className: "text-2xl font-bold text-destructive", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx15("p", { className: "text-muted-foreground", children: error.message || "An unexpected error occurred" })
     ] }),
-    /* @__PURE__ */ jsx12(Button7, { onClick: reset, variant: "outline", children: "Try again" })
+    /* @__PURE__ */ jsx15(Button7, { onClick: reset, variant: "outline", children: "Try again" })
   ] }) });
 }
 function AuthErrorBoundary({ children }) {
-  return /* @__PURE__ */ jsx12(ErrorBoundary, { children });
+  return /* @__PURE__ */ jsx15(ErrorBoundary, { children });
+}
+
+// src/components/iam/permission-selector.tsx
+import {
+  Badge,
+  EntitySelector,
+  useEntitySectionState
+} from "@mesob/ui/components";
+import { IconKey } from "@tabler/icons-react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var permissionColumns = [
+  {
+    key: "permission",
+    header: "Permission",
+    cell: (permission) => /* @__PURE__ */ jsxs12("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx16("p", { className: "font-medium", children: permission.activity }),
+      /* @__PURE__ */ jsx16("p", { className: "font-mono text-xs text-muted-foreground", children: permission.id })
+    ] })
+  },
+  {
+    key: "scope",
+    header: "Scope",
+    cell: (permission) => /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx16(Badge, { variant: "secondary", children: permission.application }),
+      /* @__PURE__ */ jsx16(Badge, { variant: "outline", children: permission.feature })
+    ] })
+  }
+];
+function PermissionSelector({
+  trigger,
+  multiple = true,
+  onSelect,
+  excludeIds = []
+}) {
+  const { hooks } = useApi();
+  const state = useEntitySectionState({
+    defaultSort: "id",
+    defaultOrder: "asc",
+    defaultPageSize: 10,
+    searchParamName: "search"
+  });
+  const permissionsQuery = state.queryConfig;
+  const { data, isPending, isFetching } = hooks.useQuery(
+    "get",
+    "/permissions",
+    permissionsQuery
+  );
+  const items = (data?.permissions ?? []).filter(
+    (permission) => !excludeIds.includes(permission.id)
+  );
+  const config = {
+    title: "Select permission(s)",
+    multiple,
+    entityName: "permission",
+    entityIcon: IconKey,
+    columns: permissionColumns,
+    getItemLabel: (permission) => permission.id,
+    searchPlaceholder: "Search permissions...",
+    filterOptions: [
+      { label: "All", value: "" },
+      { label: "Application", value: "application" },
+      { label: "Feature", value: "feature" },
+      { label: "Activity", value: "activity" }
+    ],
+    sortOptions: [
+      { label: "ID", value: "id" },
+      { label: "Application", value: "application" },
+      { label: "Feature", value: "feature" },
+      { label: "Activity", value: "activity" }
+    ],
+    showViewToggle: false,
+    wrapHeaderInCard: false
+  };
+  return /* @__PURE__ */ jsx16(
+    EntitySelector,
+    {
+      trigger,
+      config,
+      onSelect,
+      items,
+      total: items.length,
+      isLoading: isPending || isFetching,
+      state
+    }
+  );
 }
 
 // src/components/iam/permissions.tsx
-import { Badge, Button as Button8 } from "@mesob/ui/components";
-import { useLocale } from "next-intl";
-import { useState as useState9 } from "react";
+import { Badge as Badge2, Button as Button8 } from "@mesob/ui/components";
+import { useState as useState10 } from "react";
 
 // src/components/shared/data-table.tsx
 import {
@@ -2047,7 +2429,7 @@ import {
 
 // src/components/skeletons/table-skeleton.tsx
 import { Skeleton } from "@mesob/ui/components";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function TableSkeleton({ columns = 5, rows = 10 }) {
   const headerKeys = Array.from({ length: columns }, (_, i) => `header-${i}`);
   const rowKeys = Array.from({ length: rows }, (_, i) => `row-${i}`);
@@ -2055,32 +2437,32 @@ function TableSkeleton({ columns = 5, rows = 10 }) {
     { length: rows },
     (_, rowIdx) => Array.from({ length: columns }, (_2, colIdx) => `cell-${rowIdx}-${colIdx}`)
   );
-  return /* @__PURE__ */ jsxs11("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx13(Skeleton, { className: "h-8 w-48" }),
-      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-32" })
+  return /* @__PURE__ */ jsxs13("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-8 w-48" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-32" })
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 flex-1 max-w-sm" }),
-      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-24" }),
-      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-24" })
+    /* @__PURE__ */ jsxs13("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 flex-1 max-w-sm" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-24" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-24" })
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "border rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsx13("div", { className: "flex gap-4 p-4 bg-muted", children: headerKeys.map((key) => /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 flex-1" }, key)) }),
-      rowKeys.map((rowKey, rowIdx) => /* @__PURE__ */ jsx13("div", { className: "flex gap-4 p-4 border-t", children: cellKeys[rowIdx]?.map((cellKey) => /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 flex-1" }, cellKey)) }, rowKey))
+    /* @__PURE__ */ jsxs13("div", { className: "border rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsx17("div", { className: "flex gap-4 p-4 bg-muted", children: headerKeys.map((key) => /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 flex-1" }, key)) }),
+      rowKeys.map((rowKey, rowIdx) => /* @__PURE__ */ jsx17("div", { className: "flex gap-4 p-4 border-t", children: cellKeys[rowIdx]?.map((cellKey) => /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 flex-1" }, cellKey)) }, rowKey))
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-32" }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-20" }),
-        /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-20" })
+    /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 w-32" }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-20" }),
+        /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-20" })
       ] })
     ] })
   ] });
 }
 
 // src/components/shared/data-table.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function DataTable({
   data,
   columns,
@@ -2090,24 +2472,24 @@ function DataTable({
   actions
 }) {
   if (isLoading) {
-    return /* @__PURE__ */ jsx14(TableSkeleton, { columns: columns.length, rows: 5 });
+    return /* @__PURE__ */ jsx18(TableSkeleton, { columns: columns.length, rows: 5 });
   }
   if (data.length === 0) {
-    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: [
-      /* @__PURE__ */ jsx14("p", { className: "text-muted-foreground", children: emptyMessage }),
-      actions && /* @__PURE__ */ jsx14("div", { className: "mt-4", children: actions })
+    return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: [
+      /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: emptyMessage }),
+      actions && /* @__PURE__ */ jsx18("div", { className: "mt-4", children: actions })
     ] });
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "w-full space-y-4", children: [
-    actions && /* @__PURE__ */ jsx14("div", { className: "flex justify-end", children: actions }),
-    /* @__PURE__ */ jsx14("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs12(Table, { children: [
-      /* @__PURE__ */ jsx14(TableHeader, { children: /* @__PURE__ */ jsx14(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx14(TableHead, { children: column.header }, column.key)) }) }),
-      /* @__PURE__ */ jsx14(TableBody, { children: data.map((row) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs14("div", { className: "w-full space-y-4", children: [
+    actions && /* @__PURE__ */ jsx18("div", { className: "flex justify-end", children: actions }),
+    /* @__PURE__ */ jsx18("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs14(Table, { children: [
+      /* @__PURE__ */ jsx18(TableHeader, { children: /* @__PURE__ */ jsx18(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx18(TableHead, { children: column.header }, column.key)) }) }),
+      /* @__PURE__ */ jsx18(TableBody, { children: data.map((row) => /* @__PURE__ */ jsx18(
         TableRow,
         {
           onClick: () => onRowClick?.(row),
           className: onRowClick ? "cursor-pointer hover:bg-muted/50" : "",
-          children: columns.map((column) => /* @__PURE__ */ jsx14(TableCell, { children: column.cell(row) }, `${row.id}-${column.key}`))
+          children: columns.map((column) => /* @__PURE__ */ jsx18(TableCell, { children: column.cell(row) }, `${row.id}-${column.key}`))
         },
         row.id
       )) })
@@ -2116,23 +2498,10 @@ function DataTable({
 }
 
 // src/components/iam/permissions.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-function getTranslation(value, locale) {
-  if (!value) {
-    return "";
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "object") {
-    return value[locale] ?? value.en ?? value.am ?? "";
-  }
-  return "";
-}
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function Permissions() {
   const { hooks } = useApi();
-  const locale = useLocale();
-  const [page, setPage] = useState9(1);
+  const [page, setPage] = useState10(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/permissions", {
     params: {
@@ -2142,81 +2511,636 @@ function Permissions() {
       }
     }
   });
-  const columns = [
-    {
-      key: "name",
-      header: "Permission",
-      cell: (permission) => /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("p", { className: "font-medium", children: getTranslation(permission.name, locale) }),
-        /* @__PURE__ */ jsx15(Badge, { variant: "outline", className: "mt-1 font-mono text-xs", children: permission.code })
-      ] })
-    },
-    {
-      key: "resource",
-      header: "Resource",
-      cell: (permission) => /* @__PURE__ */ jsx15(Badge, { variant: "secondary", children: permission.resource })
-    },
-    {
-      key: "action",
-      header: "Action",
-      cell: (permission) => /* @__PURE__ */ jsx15(Badge, { variant: "outline", children: permission.action })
-    },
+  const columns = [
+    {
+      key: "activity",
+      header: "Permission",
+      cell: (permission) => /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx19("p", { className: "font-medium", children: permission.activity }),
+        /* @__PURE__ */ jsx19(Badge2, { variant: "outline", className: "mt-1 font-mono text-xs", children: permission.id })
+      ] })
+    },
+    {
+      key: "application",
+      header: "Application",
+      cell: (permission) => /* @__PURE__ */ jsx19(Badge2, { variant: "secondary", children: permission.application })
+    },
+    {
+      key: "feature",
+      header: "Feature",
+      cell: (permission) => /* @__PURE__ */ jsx19(Badge2, { variant: "outline", children: permission.feature })
+    },
+    {
+      key: "description",
+      header: "Description",
+      cell: (permission) => /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: String(permission.description ?? "\u2014") })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx19("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-destructive", children: "Error loading permissions" }) });
+  }
+  return /* @__PURE__ */ jsxs15("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Permissions" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "View the permission catalog for this tenant" })
+      ] }),
+      /* @__PURE__ */ jsx19(Button8, { variant: "outline", children: "Seed Permissions" })
+    ] }),
+    /* @__PURE__ */ jsx19(
+      DataTable,
+      {
+        data: data?.permissions || [],
+        columns,
+        isLoading,
+        emptyMessage: "No permissions found"
+      }
+    ),
+    data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs15("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx19(
+        Button8,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage((prev) => prev - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs15("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx19(
+        Button8,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/iam/role-detail-layout.tsx
+import {
+  EntityDetailHeader,
+  EntityEmptyState,
+  PageContainer,
+  useBreadcrumbs
+} from "@mesob/ui/components";
+import { IconShield } from "@tabler/icons-react";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+function str(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object" && value !== null && "en" in value) {
+    const localized = value;
+    return localized.en ?? localized.am ?? "";
+  }
+  return String(value);
+}
+function RoleDetailLayout({
+  roleId,
+  basePath = "/iam/roles",
+  children
+}) {
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const { data, isLoading, isFetching, isError } = hooks.useQuery(
+    "get",
+    "/roles/{id}",
+    { params: { path: { id: roleId } } },
+    { enabled: !!roleId }
+  );
+  const role = data?.role;
+  const title = role ? str(role.name) || role.code : roleId ?? "Role";
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam" },
+      { label: "Roles", href: basePath },
+      { label: title }
+    ]
+  });
+  const tabs = useMemo2(
+    () => [
+      { value: "detail", name: "Detail", href: `${basePath}/${roleId}` },
+      {
+        value: "permissions",
+        name: "Permissions",
+        href: `${basePath}/${roleId}/permissions`
+      },
+      {
+        value: "users",
+        name: "Users",
+        href: `${basePath}/${roleId}/users`
+      }
+    ],
+    [basePath, roleId]
+  );
+  if (!roleId) {
+    return null;
+  }
+  const loading = isLoading || isFetching;
+  if (!(loading || role)) {
+    return /* @__PURE__ */ jsx20(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsx20(
+      EntityEmptyState,
+      {
+        icon: IconShield,
+        entityName: "role",
+        title: isError ? "Role unavailable" : "Role not found",
+        description: isError ? "Failed to load this role." : "This role no longer exists.",
+        actionLabel: "Back to roles",
+        onAction: () => config.navigation?.onNavigate?.(basePath) ?? window.history.back()
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs16(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: [
+    /* @__PURE__ */ jsx20(
+      EntityDetailHeader,
+      {
+        title,
+        icon: /* @__PURE__ */ jsx20(IconShield, { className: "h-5 w-5" }),
+        loading,
+        tabs
+      }
+    ),
+    children
+  ] });
+}
+
+// src/components/iam/role-detail-page.tsx
+import { zodResolver as zodResolver7 } from "@hookform/resolvers/zod";
+import {
+  EntityFormActions,
+  Form as Form7,
+  FormControl as FormControl7,
+  FormField as FormField7,
+  FormItem as FormItem7,
+  FormLabel as FormLabel7,
+  FormMessage as FormMessage7,
+  Input as Input6,
+  LocaleInputText,
+  LocaleInputTextarea,
+  Section,
+  Skeleton as Skeleton2
+} from "@mesob/ui/components";
+import { useLocaleSchemas } from "@mesob/ui/providers";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect as useEffect9, useMemo as useMemo3 } from "react";
+import { useForm as useForm7 } from "react-hook-form";
+import { toast as toast8 } from "sonner";
+import { z as z7 } from "zod";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+function RoleDetailPage({
+  roleId,
+  basePath = "/iam/roles"
+}) {
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const qc = useQueryClient();
+  const { localeInputDefault, requiredSchema, optionalSchema } = useLocaleSchemas();
+  const schema = useMemo3(
+    () => z7.object({
+      name: requiredSchema,
+      code: z7.string().min(1, "Code is required"),
+      description: optionalSchema
+    }),
+    [requiredSchema, optionalSchema]
+  );
+  const defaults = useMemo3(
+    () => ({
+      name: { ...localeInputDefault },
+      code: "",
+      description: { ...localeInputDefault }
+    }),
+    [localeInputDefault]
+  );
+  const { data, isLoading } = hooks.useQuery(
+    "get",
+    "/roles/{id}",
+    { params: { path: { id: roleId } } },
+    { enabled: !!roleId }
+  );
+  const update = hooks.useMutation("put", "/roles/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+      toast8.success("Role updated");
+    },
+    onError: () => {
+      toast8.error("Failed to update role");
+    }
+  });
+  const remove = hooks.useMutation("delete", "/roles/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      toast8.success("Role deleted");
+      config.navigation?.onNavigate?.(basePath);
+    },
+    onError: () => {
+      toast8.error("Failed to delete role");
+    }
+  });
+  const form = useForm7({
+    resolver: zodResolver7(schema),
+    defaultValues: defaults
+  });
+  const { reset, formState, control, register } = form;
+  useEffect9(() => {
+    if (!data?.role) {
+      return;
+    }
+    const r = data.role;
+    reset({
+      name: r.name ?? {},
+      code: r.code,
+      description: r.description ?? {}
+    });
+  }, [data?.role, reset]);
+  if (!roleId) {
+    return null;
+  }
+  const role = data?.role;
+  const editable = role?.isEditable !== false;
+  const deletable = role?.isDeletable !== false;
+  const onSubmit = form.handleSubmit(async (d) => {
+    await update.mutateAsync({
+      params: { path: { id: roleId } },
+      body: {
+        name: d.name,
+        code: d.code,
+        description: d.description ?? void 0
+      }
+    });
+  });
+  const footer = role ? /* @__PURE__ */ jsx21(
+    EntityFormActions,
+    {
+      mode: "edit",
+      onSubmit,
+      onDelete: deletable ? () => remove.mutate({
+        params: { path: { id: roleId } }
+      }) : void 0,
+      isSubmitting: update.isPending,
+      isDeleting: remove.isPending,
+      disabled: !editable,
+      itemName: "role"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx21(Section, { title: "Role details", footer, defaultOpen: true, children: isLoading || !role ? /* @__PURE__ */ jsx21(RoleDetailSkeleton, {}) : /* @__PURE__ */ jsx21(Form7, { ...form, children: /* @__PURE__ */ jsxs17("form", { onSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx21(
+      LocaleInputText,
+      {
+        label: "Name",
+        field: "name",
+        required: true,
+        register,
+        errors: formState.errors,
+        placeholder: "e.g. Administrator",
+        disabled: !editable
+      }
+    ),
+    /* @__PURE__ */ jsx21(
+      FormField7,
+      {
+        control,
+        name: "code",
+        render: ({ field }) => /* @__PURE__ */ jsxs17(FormItem7, { children: [
+          /* @__PURE__ */ jsxs17(FormLabel7, { children: [
+            "Code ",
+            /* @__PURE__ */ jsx21("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx21(FormControl7, { children: /* @__PURE__ */ jsx21(
+            Input6,
+            {
+              placeholder: "e.g. admin",
+              disabled: !editable,
+              ...field
+            }
+          ) }),
+          /* @__PURE__ */ jsx21(FormMessage7, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx21(
+      LocaleInputTextarea,
+      {
+        label: "Description",
+        field: "description",
+        register,
+        errors: formState.errors,
+        placeholder: "Description",
+        rows: 3,
+        disabled: !editable
+      }
+    )
+  ] }) }) });
+}
+function RoleDetailSkeleton() {
+  return /* @__PURE__ */ jsxs17("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx21(Skeleton2, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx21(Skeleton2, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx21(Skeleton2, { className: "h-4 w-14" }),
+      /* @__PURE__ */ jsx21(Skeleton2, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx21(Skeleton2, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx21(Skeleton2, { className: "h-20 w-full" })
+    ] })
+  ] });
+}
+
+// src/components/iam/role-permissions-page.tsx
+import {
+  Badge as Badge3,
+  Button as Button9,
+  DataTablePagination,
+  DeleteConfirmButton,
+  DisplayTable,
+  EntityEmptyState as EntityEmptyState2,
+  EntityFilter,
+  EntityHeader,
+  EntityLoadingState,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconKey as IconKey2, IconPlus, IconTrash } from "@tabler/icons-react";
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useMemo as useMemo4 } from "react";
+import { toast as toast9 } from "sonner";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 4;
+function RolePermissionsPage({ roleId }) {
+  const { hooks } = useApi();
+  const qc = useQueryClient2();
+  const { queryConfig, params, setParams } = useEntityParams({
+    searchKey: "search",
+    defaultSort: "application",
+    defaultOrder: "asc"
+  });
+  const permissionsQuery = useMemo4(
+    () => ({
+      params: {
+        path: { id: roleId },
+        query: queryConfig.params.query
+      }
+    }),
+    [queryConfig, roleId]
+  );
+  const { data, isPending, isFetching } = hooks.useQuery(
+    "get",
+    "/roles/{id}/permissions",
+    permissionsQuery,
+    { enabled: !!roleId }
+  );
+  const assignPermissions = hooks.useMutation(
+    "post",
+    "/roles/{id}/permissions",
     {
-      key: "description",
-      header: "Description",
-      cell: (permission) => /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: getTranslation(permission.description, locale) })
-    },
+      onSuccess: (result) => {
+        qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+        qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+        qc.invalidateQueries({ queryKey: ["get", "/roles/{id}/permissions"] });
+        toast9.success(
+          result?.created ? `${result.created} permission(s) added` : "No changes"
+        );
+      },
+      onError: () => {
+        toast9.error("Failed to assign permissions");
+      }
+    }
+  );
+  const revokePermission = hooks.useMutation(
+    "delete",
+    "/roles/{id}/permissions/{permissionId}",
     {
-      key: "actions",
-      header: "Actions",
-      cell: (_permission) => /* @__PURE__ */ jsx15(Button8, { variant: "outline", size: "sm", children: "Edit" })
+      onSuccess: () => {
+        qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+        qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+        qc.invalidateQueries({
+          queryKey: ["get", "/roles/{id}/permissions"]
+        });
+        toast9.success("Permission removed");
+      },
+      onError: () => {
+        toast9.error("Failed to remove permission");
+      }
     }
-  ];
-  if (error) {
-    return /* @__PURE__ */ jsx15("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx15("p", { className: "text-destructive", children: "Error loading permissions" }) });
+  );
+  const permissions = data?.permissions ?? [];
+  const { total, pageCount } = useEntityPagination({
+    items: permissions,
+    total: data?.total,
+    pageSize: params.pageSize
+  });
+  const isLoading = isPending || isFetching;
+  const currentView = params.view || "table";
+  if (!roleId) {
+    return null;
   }
-  return /* @__PURE__ */ jsxs13("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("h1", { className: "text-3xl font-bold", children: "Permissions" }),
-        /* @__PURE__ */ jsx15("p", { className: "text-muted-foreground", children: "Manage system permissions" })
-      ] }),
-      /* @__PURE__ */ jsx15(Button8, { children: "Create Permission" })
-    ] }),
-    /* @__PURE__ */ jsx15(
-      DataTable,
+  let content;
+  if (isLoading) {
+    content = /* @__PURE__ */ jsx22(
+      EntityLoadingState,
       {
-        data: data?.permissions || [],
-        columns,
-        isLoading,
-        emptyMessage: "No permissions found"
+        view: currentView,
+        rowCount: params.pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: params.pageSize
       }
-    ),
-    data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx15(
-        Button8,
+    );
+  } else if (total === 0) {
+    content = /* @__PURE__ */ jsx22(
+      EntityEmptyState2,
+      {
+        icon: IconKey2,
+        entityName: "permission",
+        title: "No permissions assigned",
+        description: "Assign permissions from the selector to grant access to this role."
+      }
+    );
+  } else if (currentView === "table") {
+    content = /* @__PURE__ */ jsxs18("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs18(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx22(Thead, { children: /* @__PURE__ */ jsxs18(Tr, { children: [
+          /* @__PURE__ */ jsx22(Th, { children: "Permission" }),
+          /* @__PURE__ */ jsx22(Th, { children: "Application" }),
+          /* @__PURE__ */ jsx22(Th, { children: "Feature" }),
+          /* @__PURE__ */ jsx22(Th, { className: "w-[60px]" })
+        ] }) }),
+        /* @__PURE__ */ jsx22(Tbody, { children: permissions.map((permission) => /* @__PURE__ */ jsxs18(Tr, { children: [
+          /* @__PURE__ */ jsx22(Td, { children: /* @__PURE__ */ jsxs18("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx22("p", { className: "font-medium", children: permission.activity }),
+            /* @__PURE__ */ jsx22("p", { className: "font-mono text-xs text-muted-foreground", children: permission.id })
+          ] }) }),
+          /* @__PURE__ */ jsx22(Td, { children: /* @__PURE__ */ jsx22(Badge3, { variant: "secondary", children: permission.application }) }),
+          /* @__PURE__ */ jsx22(Td, { children: /* @__PURE__ */ jsx22(Badge3, { variant: "outline", children: permission.feature }) }),
+          /* @__PURE__ */ jsx22(Td, { children: /* @__PURE__ */ jsx22(
+            DeleteConfirmButton,
+            {
+              entityName: "permission",
+              onConfirm: () => revokePermission.mutate({
+                params: {
+                  path: { id: roleId, permissionId: permission.id }
+                }
+              }),
+              triggerClassName: "size-8 text-destructive hover:text-destructive"
+            }
+          ) })
+        ] }, permission.id)) })
+      ] }),
+      /* @__PURE__ */ jsx22(
+        DataTablePagination,
         {
-          variant: "outline",
-          disabled: page === 1,
-          onClick: () => setPage(page - 1),
-          children: "Previous"
+          pageIndex: params.page - 1,
+          pageSize: params.pageSize,
+          pageCount,
+          totalRows: total,
+          onPageChange: (page) => setParams({ page: page + 1 }),
+          onPageSizeChange: (pageSize) => setParams({ pageSize, page: 1 })
         }
-      ),
-      /* @__PURE__ */ jsxs13("span", { className: "text-sm text-muted-foreground", children: [
-        "Page ",
-        page
-      ] }),
-      /* @__PURE__ */ jsx15(Button8, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
-    ] })
+      )
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxs18("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx22("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3", children: permissions.map((permission) => /* @__PURE__ */ jsx22(
+        "div",
+        {
+          className: "rounded-xl border border-border/60 bg-card p-4 shadow-sm",
+          children: /* @__PURE__ */ jsxs18("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx22("p", { className: "font-semibold", children: permission.activity }),
+              /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsx22(Badge3, { variant: "secondary", children: permission.application }),
+                /* @__PURE__ */ jsx22(Badge3, { variant: "outline", children: permission.feature })
+              ] }),
+              /* @__PURE__ */ jsx22("p", { className: "font-mono text-xs text-muted-foreground", children: permission.id })
+            ] }),
+            /* @__PURE__ */ jsx22(
+              Button9,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                onClick: () => revokePermission.mutate({
+                  params: {
+                    path: { id: roleId, permissionId: permission.id }
+                  }
+                }),
+                disabled: revokePermission.isPending,
+                children: /* @__PURE__ */ jsx22(IconTrash, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        },
+        permission.id
+      )) }),
+      /* @__PURE__ */ jsx22(
+        DataTablePagination,
+        {
+          pageIndex: params.page - 1,
+          pageSize: params.pageSize,
+          pageCount,
+          totalRows: total,
+          onPageChange: (page) => setParams({ page: page + 1 }),
+          onPageSizeChange: (pageSize) => setParams({ pageSize, page: 1 })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs18(PageBody, { className: "px-0 pb-6", children: [
+    /* @__PURE__ */ jsx22(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx22(IconKey2, { className: "h-5 w-5" }),
+        title: "Role permissions",
+        actions: /* @__PURE__ */ jsx22(
+          PermissionSelector,
+          {
+            trigger: /* @__PURE__ */ jsxs18(Button9, { size: "sm", loading: assignPermissions.isPending, children: [
+              /* @__PURE__ */ jsx22(IconPlus, { className: "h-4 w-4" }),
+              "Add permissions"
+            ] }),
+            onSelect: (selectedPermissions) => {
+              if (!selectedPermissions.length) {
+                return;
+              }
+              assignPermissions.mutate({
+                params: { path: { id: roleId } },
+                body: {
+                  permissionIds: selectedPermissions.map(
+                    (permission) => permission.id
+                  )
+                }
+              });
+            },
+            excludeIds: permissions.map((permission) => permission.id)
+          }
+        ),
+        search: /* @__PURE__ */ jsx22(
+          EntitySearch,
+          {
+            paramKey: "search",
+            placeholder: "Search assigned permissions..."
+          }
+        ),
+        filter: /* @__PURE__ */ jsx22(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "Application", value: "application" },
+              { label: "Feature", value: "feature" },
+              { label: "Activity", value: "activity" }
+            ],
+            placeholder: "Search field"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx22(
+          EntitySort,
+          {
+            defaultSort: "application",
+            defaultOrder: "asc",
+            options: [
+              { label: "ID", value: "id" },
+              { label: "Application", value: "application" },
+              { label: "Feature", value: "feature" },
+              { label: "Activity", value: "activity" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx22(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    content
   ] });
 }
 
 // src/components/iam/roles.tsx
-import { Badge as Badge2, Button as Button9 } from "@mesob/ui/components";
-import { useLocale as useLocale2 } from "next-intl";
-import { useState as useState10 } from "react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function getTranslation2(value, locale) {
+import { Badge as Badge4, Button as Button10 } from "@mesob/ui/components";
+import { useLocale } from "next-intl";
+import { useState as useState11 } from "react";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+function getTranslation(value, locale) {
   if (!value) {
     return "";
   }
@@ -2230,8 +3154,8 @@ function getTranslation2(value, locale) {
 }
 function Roles() {
   const { hooks } = useApi();
-  const locale = useLocale2();
-  const [page, setPage] = useState10(1);
+  const locale = useLocale();
+  const [page, setPage] = useState11(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/roles", {
     params: {
@@ -2245,42 +3169,45 @@ function Roles() {
     {
       key: "name",
       header: "Role",
-      cell: (role) => /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsx16("p", { className: "font-medium", children: getTranslation2(role.name, locale) }),
-        /* @__PURE__ */ jsx16(Badge2, { variant: "outline", className: "mt-1", children: role.code })
+      cell: (role) => /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx23("p", { className: "font-medium", children: getTranslation(role.name, locale) }),
+        /* @__PURE__ */ jsx23(Badge4, { variant: "outline", className: "mt-1", children: role.code })
       ] })
     },
     {
-      key: "description",
-      header: "Description",
-      cell: (role) => /* @__PURE__ */ jsx16("p", { className: "text-sm text-muted-foreground", children: getTranslation2(role.description, locale) })
+      key: "access",
+      header: "Access",
+      cell: (role) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap gap-2", children: [
+        role.isSystem ? /* @__PURE__ */ jsx23(Badge4, { children: "System" }) : null,
+        /* @__PURE__ */ jsxs19(Badge4, { variant: "secondary", children: [
+          role.permissionCount ?? 0,
+          " permissions"
+        ] })
+      ] })
     },
     {
       key: "createdAt",
       header: "Created",
-      cell: (role) => /* @__PURE__ */ jsx16("p", { className: "text-sm", children: new Date(role.createdAt).toLocaleDateString() })
+      cell: (role) => /* @__PURE__ */ jsx23("p", { className: "text-sm", children: new Date(role.createdAt).toLocaleDateString() })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_role) => /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx16(Button9, { variant: "outline", size: "sm", children: "Permissions" }),
-        /* @__PURE__ */ jsx16(Button9, { variant: "outline", size: "sm", children: "Edit" })
-      ] })
+      cell: (_role) => /* @__PURE__ */ jsx23("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx23(Button10, { variant: "outline", size: "sm", children: "Edit" }) })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx16("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx16("p", { className: "text-destructive", children: "Error loading roles" }) });
+    return /* @__PURE__ */ jsx23("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx23("p", { className: "text-destructive", children: "Error loading roles" }) });
   }
-  return /* @__PURE__ */ jsxs14("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsx16("h1", { className: "text-3xl font-bold", children: "Roles" }),
-        /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: "Manage user roles" })
+  return /* @__PURE__ */ jsxs19("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx23("h1", { className: "text-3xl font-bold", children: "Roles" }),
+        /* @__PURE__ */ jsx23("p", { className: "text-muted-foreground", children: "Manage roles and assigned permissions" })
       ] }),
-      /* @__PURE__ */ jsx16(Button9, { children: "Create Role" })
+      /* @__PURE__ */ jsx23(Button10, { children: "Create Role" })
     ] }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx23(
       DataTable,
       {
         data: data?.roles || [],
@@ -2289,32 +3216,39 @@ function Roles() {
         emptyMessage: "No roles found"
       }
     ),
-    data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs14("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx16(
-        Button9,
+    data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx23(
+        Button10,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs14("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs19("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx16(Button9, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx23(
+        Button10,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/iam/sessions.tsx
-import { Button as Button10 } from "@mesob/ui/components";
-import { useState as useState11 } from "react";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Button as Button11 } from "@mesob/ui/components";
+import { useState as useState12 } from "react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function Sessions() {
   const { hooks } = useApi();
-  const [selectedSessionId] = useState11(null);
+  const [selectedSessionId] = useState12(null);
   const { data, isLoading, error, refetch } = hooks.useQuery(
     "get",
     "/sessions"
@@ -2340,31 +3274,31 @@ function Sessions() {
     {
       key: "createdAt",
       header: "Created",
-      cell: (session) => /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium", children: new Date(session.createdAt).toLocaleDateString() }),
-        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: new Date(session.createdAt).toLocaleTimeString() })
+      cell: (session) => /* @__PURE__ */ jsxs20("div", { children: [
+        /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium", children: new Date(session.createdAt).toLocaleDateString() }),
+        /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: new Date(session.createdAt).toLocaleTimeString() })
       ] })
     },
     {
       key: "expiresAt",
       header: "Expires",
-      cell: (session) => /* @__PURE__ */ jsx17("p", { className: "text-sm", children: new Date(session.expiresAt).toLocaleDateString() })
+      cell: (session) => /* @__PURE__ */ jsx24("p", { className: "text-sm", children: new Date(session.expiresAt).toLocaleDateString() })
     },
     {
       key: "userAgent",
       header: "Device",
-      cell: (session) => /* @__PURE__ */ jsx17("p", { className: "text-sm truncate max-w-xs", children: session.userAgent || "Unknown" })
+      cell: (session) => /* @__PURE__ */ jsx24("p", { className: "text-sm truncate max-w-xs", children: session.userAgent || "Unknown" })
     },
     {
       key: "ip",
       header: "IP Address",
-      cell: (session) => /* @__PURE__ */ jsx17("p", { className: "text-sm font-mono", children: session.ip || "Unknown" })
+      cell: (session) => /* @__PURE__ */ jsx24("p", { className: "text-sm font-mono", children: session.ip || "Unknown" })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (session) => /* @__PURE__ */ jsx17(
-        Button10,
+      cell: (session) => /* @__PURE__ */ jsx24(
+        Button11,
         {
           variant: "destructive",
           size: "sm",
@@ -2376,14 +3310,14 @@ function Sessions() {
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx17("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx17("p", { className: "text-destructive", children: "Error loading sessions" }) });
+    return /* @__PURE__ */ jsx24("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx24("p", { className: "text-destructive", children: "Error loading sessions" }) });
   }
-  return /* @__PURE__ */ jsxs15("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx17("h1", { className: "text-3xl font-bold", children: "Sessions" }),
-      /* @__PURE__ */ jsx17("p", { className: "text-muted-foreground", children: "View and manage active sessions" })
+  return /* @__PURE__ */ jsxs20("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs20("div", { children: [
+      /* @__PURE__ */ jsx24("h1", { className: "text-3xl font-bold", children: "Sessions" }),
+      /* @__PURE__ */ jsx24("p", { className: "text-muted-foreground", children: "View and manage active sessions" })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx24(
       DataTable,
       {
         data: data?.sessions || [],
@@ -2396,12 +3330,12 @@ function Sessions() {
 }
 
 // src/components/iam/tenants.tsx
-import { Badge as Badge3, Button as Button11 } from "@mesob/ui/components";
-import { useState as useState12 } from "react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Badge as Badge5, Button as Button12 } from "@mesob/ui/components";
+import { useState as useState13 } from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function Tenants() {
   const { hooks } = useApi();
-  const [page, setPage] = useState12(1);
+  const [page, setPage] = useState13(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/tenants", {
     params: {
@@ -2415,9 +3349,9 @@ function Tenants() {
     {
       key: "name",
       header: "Tenant",
-      cell: (tenant) => /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx18("p", { className: "font-medium", children: tenant.name }),
-        /* @__PURE__ */ jsxs16("p", { className: "text-sm text-muted-foreground", children: [
+      cell: (tenant) => /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsx25("p", { className: "font-medium", children: tenant.name }),
+        /* @__PURE__ */ jsxs21("p", { className: "text-sm text-muted-foreground", children: [
           "/",
           tenant.slug
         ] })
@@ -2426,34 +3360,34 @@ function Tenants() {
     {
       key: "status",
       header: "Status",
-      cell: (tenant) => /* @__PURE__ */ jsx18(Badge3, { variant: tenant.status === "active" ? "default" : "secondary", children: tenant.status })
+      cell: (tenant) => /* @__PURE__ */ jsx25(Badge5, { variant: tenant.status === "active" ? "default" : "secondary", children: tenant.status })
     },
     {
       key: "createdAt",
       header: "Created",
-      cell: (tenant) => /* @__PURE__ */ jsx18("p", { className: "text-sm", children: new Date(tenant.createdAt).toLocaleDateString() })
+      cell: (tenant) => /* @__PURE__ */ jsx25("p", { className: "text-sm", children: new Date(tenant.createdAt).toLocaleDateString() })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_tenant) => /* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx18(Button11, { variant: "outline", size: "sm", children: "Domains" }),
-        /* @__PURE__ */ jsx18(Button11, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_tenant) => /* @__PURE__ */ jsxs21("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx25(Button12, { variant: "outline", size: "sm", children: "Domains" }),
+        /* @__PURE__ */ jsx25(Button12, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx18("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx18("p", { className: "text-destructive", children: "Error loading tenants" }) });
+    return /* @__PURE__ */ jsx25("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx25("p", { className: "text-destructive", children: "Error loading tenants" }) });
   }
-  return /* @__PURE__ */ jsxs16("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx18("h1", { className: "text-3xl font-bold", children: "Tenants" }),
-        /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: "Manage tenant organizations" })
+  return /* @__PURE__ */ jsxs21("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsx25("h1", { className: "text-3xl font-bold", children: "Tenants" }),
+        /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground", children: "Manage tenant organizations" })
       ] }),
-      /* @__PURE__ */ jsx18(Button11, { children: "Create Tenant" })
+      /* @__PURE__ */ jsx25(Button12, { children: "Create Tenant" })
     ] }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx25(
       DataTable,
       {
         data: data?.tenants || [],
@@ -2462,32 +3396,39 @@ function Tenants() {
         emptyMessage: "No tenants found"
       }
     ),
-    data && "tenants" in data && data.tenants && data.tenants.length >= limit && /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx18(
-        Button11,
+    data && "tenants" in data && data.tenants && data.tenants.length >= limit && /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx25(
+        Button12,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs16("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs21("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx18(Button11, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx25(
+        Button12,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/iam/users.tsx
-import { Badge as Badge4, Button as Button12 } from "@mesob/ui/components";
-import { useState as useState13 } from "react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Badge as Badge6, Button as Button13 } from "@mesob/ui/components";
+import { useState as useState14 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function Users() {
   const { hooks } = useApi();
-  const [page, setPage] = useState13(1);
+  const [page, setPage] = useState14(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/users", {
     params: {
@@ -2501,54 +3442,48 @@ function Users() {
     {
       key: "fullName",
       header: "Name",
-      cell: (user) => /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx19("p", { className: "font-medium", children: user.fullName }),
-        /* @__PURE__ */ jsxs17("p", { className: "text-sm text-muted-foreground", children: [
-          "@",
-          user.handle
-        ] })
-      ] })
+      cell: (user) => /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsx26("p", { className: "font-medium", children: user.fullName }) })
     },
     {
       key: "contact",
       header: "Contact",
-      cell: (user) => /* @__PURE__ */ jsxs17("div", { className: "space-y-1", children: [
-        user.email && /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx19("p", { className: "text-sm", children: user.email }),
-          user.emailVerified && /* @__PURE__ */ jsx19(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+      cell: (user) => /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+        user.email && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx26("p", { className: "text-sm", children: user.email }),
+          user.emailVerified && /* @__PURE__ */ jsx26(Badge6, { variant: "outline", className: "text-xs", children: "Verified" })
         ] }),
-        user.phone && /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx19("p", { className: "text-sm", children: user.phone }),
-          user.phoneVerified && /* @__PURE__ */ jsx19(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+        user.phone && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx26("p", { className: "text-sm", children: user.phone }),
+          user.phoneVerified && /* @__PURE__ */ jsx26(Badge6, { variant: "outline", className: "text-xs", children: "Verified" })
         ] })
       ] })
     },
     {
       key: "lastSignIn",
       header: "Last Sign In",
-      cell: (user) => /* @__PURE__ */ jsx19("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never" })
+      cell: (user) => /* @__PURE__ */ jsx26("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never" })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_user) => /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx19(Button12, { variant: "outline", size: "sm", children: "View" }),
-        /* @__PURE__ */ jsx19(Button12, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_user) => /* @__PURE__ */ jsxs22("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx26(Button13, { variant: "outline", size: "sm", children: "View" }),
+        /* @__PURE__ */ jsx26(Button13, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx19("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-destructive", children: "Error loading users" }) });
+    return /* @__PURE__ */ jsx26("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx26("p", { className: "text-destructive", children: "Error loading users" }) });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Users" }),
-        /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "Manage user accounts" })
+  return /* @__PURE__ */ jsxs22("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs22("div", { children: [
+        /* @__PURE__ */ jsx26("h1", { className: "text-3xl font-bold", children: "Users" }),
+        /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground", children: "Manage user accounts" })
       ] }),
-      /* @__PURE__ */ jsx19(Button12, { children: "Create User" })
+      /* @__PURE__ */ jsx26(Button13, { children: "Create User" })
     ] }),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx26(
       DataTable,
       {
         data: data?.users || [],
@@ -2557,76 +3492,179 @@ function Users() {
         emptyMessage: "No users found"
       }
     ),
-    data && "users" in data && data.users && data.users.length >= limit && /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx19(
-        Button12,
+    data && "users" in data && data.users && data.users.length >= limit && /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx26(
+        Button13,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs17("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs22("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx19(Button12, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx26(
+        Button13,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/profile/account.tsx
-import { Separator } from "@mesob/ui/components";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Badge as Badge8, Card as Card2, CardContent, Separator } from "@mesob/ui/components";
+
+// src/components/profile/change-profile.tsx
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge as Badge7,
+  Button as Button14
+} from "@mesob/ui/components";
+import { useState as useState15 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var ChangeProfile = ({ user }) => {
+  const [isEditing, setIsEditing] = useState15(false);
+  const initials = user.fullName?.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2) || "U";
+  return /* @__PURE__ */ jsxs23("div", { className: "w-full rounded-[1.5rem] border border-border/60 bg-background/80 p-5 shadow-sm backdrop-blur", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs23(Avatar, { className: "h-14 w-14 ring-4 ring-primary/10", children: [
+          /* @__PURE__ */ jsx27(AvatarImage, { src: user.image || "", alt: user.fullName || "" }),
+          /* @__PURE__ */ jsx27(AvatarFallback, { children: initials })
+        ] }),
+        /* @__PURE__ */ jsxs23("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx27("div", { className: "text-base font-semibold", children: user.fullName }),
+          /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx27(Badge7, { variant: "outline", children: user.emailVerified ? "Email verified" : "Email unverified" }),
+            /* @__PURE__ */ jsx27(Badge7, { variant: "outline", children: user.phoneVerified ? "Phone verified" : "Phone unverified" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx27(
+        Button14,
+        {
+          variant: "secondary",
+          className: "rounded-full px-5 text-primary hover:text-primary/80",
+          onClick: () => setIsEditing((v) => !v),
+          children: isEditing ? "Hide editor" : "Update profile"
+        }
+      )
+    ] }),
+    isEditing && /* @__PURE__ */ jsx27("div", { className: "mt-4 rounded-2xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", children: "Profile editing is not wired yet. Contact and password flows below are live." })
+  ] });
+};
+
+// src/components/profile/account.tsx
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function Account() {
   const { user, isAuthenticated } = useSession();
   if (!(isAuthenticated && user)) {
-    return /* @__PURE__ */ jsx20("div", { children: "Sign in required" });
+    return /* @__PURE__ */ jsx28("div", { className: "rounded-[1.75rem] border border-dashed border-border bg-muted/30 p-8 text-sm text-muted-foreground", children: "Sign in required." });
   }
-  return /* @__PURE__ */ jsxs18("div", { className: "p-6 max-w-4xl", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsx20("h2", { className: "text-lg font-semibold mb-4", children: "Profile details" }),
-      /* @__PURE__ */ jsx20(Separator, {})
-    ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "space-y-6 transition-all duration-300 ease-in-out", children: [
-      /* @__PURE__ */ jsx20("div", { className: "flex flex-col md:flex-row items-start gap-4 md:gap-12 min-h-[3rem]", children: /* @__PURE__ */ jsx20("div", { className: "w-full md:w-48 mt-4 shrink-0 h-fit", children: /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: "Profile" }) }) }),
-      /* @__PURE__ */ jsx20(Separator, {}),
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row gap-4 md:gap-12 py-2", children: [
-        /* @__PURE__ */ jsx20("div", { className: "w-full md:w-48 shrink-0", children: /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: "Email addresses" }) }),
-        /* @__PURE__ */ jsx20("div", { className: "flex-1 space-y-4", children: /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-between group", children: user.email ? /* @__PURE__ */ jsx20("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx20("span", { className: "text-sm", children: user.email }) }) : /* @__PURE__ */ jsx20("span", { className: "text-sm text-muted-foreground", children: "No email address" }) }) })
-      ] }),
-      /* @__PURE__ */ jsx20(Separator, {}),
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row gap-4 md:gap-12 py-2", children: [
-        /* @__PURE__ */ jsx20("div", { className: "w-full md:w-48 shrink-0", children: /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: "Phone numbers" }) }),
-        /* @__PURE__ */ jsx20("div", { className: "flex-1 space-y-4", children: user.phone ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx20("span", { className: "text-sm", children: user.phone }) }) : /* @__PURE__ */ jsx20("span", { className: "text-sm text-muted-foreground", children: "No phone number" }) })
+  const contactItems = [
+    {
+      label: "Email",
+      value: user.email ?? "No email address",
+      status: user.emailVerified ? "Verified" : "Needs verification"
+    },
+    {
+      label: "Phone",
+      value: user.phone ?? "No phone number",
+      status: user.phoneVerified ? "Verified" : "Needs verification"
+    }
+  ];
+  return /* @__PURE__ */ jsxs24("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "relative overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-primary/5 p-6 shadow-sm", children: [
+      /* @__PURE__ */ jsx28("div", { className: "absolute inset-y-0 right-0 w-1/3 bg-[radial-gradient(circle_at_top,_hsl(var(--primary)/0.16),_transparent_60%)]" }),
+      /* @__PURE__ */ jsxs24("div", { className: "relative flex flex-col gap-5", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx28(Badge8, { variant: "outline", children: "Profile console" }),
+          /* @__PURE__ */ jsx28(Badge8, { variant: "secondary", children: "Live session data" })
+        ] }),
+        /* @__PURE__ */ jsxs24("div", { className: "max-w-2xl space-y-2", children: [
+          /* @__PURE__ */ jsx28("h2", { className: "text-2xl font-semibold tracking-tight", children: "Account details, contact state, and verification status." }),
+          /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: "Keep the identity surface minimal here. Contact updates and sensitive changes stay in security." })
+        ] }),
+        /* @__PURE__ */ jsx28(ChangeProfile, { user })
       ] })
+    ] }),
+    /* @__PURE__ */ jsxs24("div", { className: "grid gap-4 lg:grid-cols-[1.5fr_0.9fr]", children: [
+      /* @__PURE__ */ jsx28(Card2, { className: "rounded-[1.75rem] border-border/60 shadow-sm", children: /* @__PURE__ */ jsxs24(CardContent, { className: "space-y-5 p-6", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx28("div", { className: "text-sm font-medium text-muted-foreground", children: "Contact channels" }),
+          /* @__PURE__ */ jsx28("div", { className: "text-lg font-semibold", children: "Primary profile data" })
+        ] }),
+        /* @__PURE__ */ jsx28(Separator, {}),
+        /* @__PURE__ */ jsx28("div", { className: "space-y-4", children: contactItems.map((item) => /* @__PURE__ */ jsxs24(
+          "div",
+          {
+            className: "flex flex-col gap-3 rounded-2xl border border-border/60 bg-muted/20 p-4 md:flex-row md:items-center md:justify-between",
+            children: [
+              /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx28("div", { className: "text-sm font-medium", children: item.label }),
+                /* @__PURE__ */ jsx28("div", { className: "text-sm text-muted-foreground", children: item.value })
+              ] }),
+              /* @__PURE__ */ jsx28(Badge8, { variant: "outline", children: item.status })
+            ]
+          },
+          item.label
+        )) })
+      ] }) }),
+      /* @__PURE__ */ jsx28(Card2, { className: "rounded-[1.75rem] border-border/60 shadow-sm", children: /* @__PURE__ */ jsxs24(CardContent, { className: "space-y-5 p-6", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx28("div", { className: "text-sm font-medium text-muted-foreground", children: "Snapshot" }),
+          /* @__PURE__ */ jsx28("div", { className: "text-lg font-semibold", children: "Session-facing identity" })
+        ] }),
+        /* @__PURE__ */ jsx28(Separator, {}),
+        /* @__PURE__ */ jsxs24("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ jsxs24("div", { className: "rounded-2xl bg-primary/[0.06] p-4", children: [
+            /* @__PURE__ */ jsx28("div", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Full name" }),
+            /* @__PURE__ */ jsx28("div", { className: "mt-2 text-base font-semibold", children: user.fullName })
+          ] }),
+          /* @__PURE__ */ jsxs24("div", { className: "rounded-2xl bg-muted/25 p-4", children: [
+            /* @__PURE__ */ jsx28("div", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Last sign in" }),
+            /* @__PURE__ */ jsx28("div", { className: "mt-2 text-base font-semibold", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleString() : "No activity recorded" })
+          ] })
+        ] })
+      ] }) })
     ] })
   ] });
 }
 
+// src/components/profile/security.tsx
+import { Badge as Badge9, Card as Card3, CardContent as CardContent2, Separator as Separator2 } from "@mesob/ui/components";
+
 // src/components/profile/change-email-form.tsx
 import {
-  Button as Button14,
+  Button as Button16,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
 } from "@mesob/ui/components";
 import { IconChevronDown } from "@tabler/icons-react";
-import { useState as useState16 } from "react";
+import { useState as useState18 } from "react";
 
 // src/components/profile/request-change-email-form.tsx
-import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
-import { Button as Button13, Input as Input5, Label, Spinner as Spinner5 } from "@mesob/ui/components";
-import { IconEye as IconEye4, IconEyeOff as IconEyeOff4 } from "@tabler/icons-react";
-import { useEffect as useEffect8, useState as useState14 } from "react";
-import { useForm as useForm6 } from "react-hook-form";
-import { toast as toast7 } from "sonner";
-import { z as z6 } from "zod";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-var emailPasswordSchema = z6.object({
-  email: z6.string().email("Invalid email address"),
-  password: z6.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+import { zodResolver as zodResolver8 } from "@hookform/resolvers/zod";
+import { Button as Button15, Input as Input7, Label, Spinner as Spinner2 } from "@mesob/ui/components";
+import { IconEye as IconEye5, IconEyeOff as IconEyeOff5 } from "@tabler/icons-react";
+import { useEffect as useEffect10, useState as useState16 } from "react";
+import { useForm as useForm8 } from "react-hook-form";
+import { toast as toast10 } from "sonner";
+import { z as z8 } from "zod";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+var emailPasswordSchema = z8.object({
+  email: z8.string().email("Invalid email address"),
+  password: z8.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
 });
 function isAuthError2(error) {
   return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
@@ -2681,9 +3719,9 @@ function RequestChangeEmailForm({
 }) {
   const { user } = useSession();
   const { hooks } = useApi();
-  const [isSubmitting, setIsSubmitting] = useState14(false);
-  const [isChecking, setIsChecking] = useState14(true);
-  const [showPassword, setShowPassword] = useState14(false);
+  const [isSubmitting, setIsSubmitting] = useState16(false);
+  const [isChecking, setIsChecking] = useState16(true);
+  const [showPassword, setShowPassword] = useState16(false);
   const getPendingAccountChangeQuery = hooks.useQuery(
     "get",
     "/account-change/pending",
@@ -2696,8 +3734,8 @@ function RequestChangeEmailForm({
     "post",
     "/email/verification/request"
   );
-  const emailPasswordForm = useForm6({
-    resolver: zodResolver6(emailPasswordSchema),
+  const emailPasswordForm = useForm8({
+    resolver: zodResolver8(emailPasswordSchema),
     defaultValues: {
       email: "",
       password: ""
@@ -2710,7 +3748,7 @@ function RequestChangeEmailForm({
     setValue,
     formState: { errors }
   } = emailPasswordForm;
-  useEffect8(() => {
+  useEffect10(() => {
     let active = true;
     const run = async () => {
       try {
@@ -2734,7 +3772,7 @@ function RequestChangeEmailForm({
         }
         setValue("email", accountChange.newEmail, { shouldValidate: true });
         if (verificationId) {
-          toast7.message("Resuming verification\u2026");
+          toast10.message("Resuming verification\u2026");
           onSuccess(verificationId, accountChange.newEmail);
           return;
         }
@@ -2750,7 +3788,7 @@ function RequestChangeEmailForm({
   }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
   const onEmailPasswordSubmit = async (data) => {
     if (!user) {
-      toast7.error("User not found");
+      toast10.error("User not found");
       return;
     }
     try {
@@ -2763,10 +3801,10 @@ function RequestChangeEmailForm({
       });
       if (checkResult.data?.exists) {
         if (user?.email?.toLowerCase() === data.email.toLowerCase()) {
-          toast7.error("This is already your current email address.");
+          toast10.error("This is already your current email address.");
           return;
         }
-        toast7.error(
+        toast10.error(
           "This email is already taken. Please use a different email."
         );
         return;
@@ -2774,34 +3812,34 @@ function RequestChangeEmailForm({
       const verification = await requestEmailVerificationMutation.mutateAsync({
         body: { email: data.email }
       });
-      toast7.success("Verification code sent to your email");
+      toast10.success("Verification code sent to your email");
       onSuccess(verification.data?.verificationId ?? "", data.email);
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       if (isAuthError2(error)) {
         const errorCode = getErrorCode(error);
         if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
-          toast7.error("Incorrect password. Please try again.");
+          toast10.error("Incorrect password. Please try again.");
           return;
         }
       }
-      toast7.error(errorMessage);
+      toast10.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
   };
   const isLoading = isSubmitting || isChecking;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs25(
     "form",
     {
       onSubmit: handleSubmit(onEmailPasswordSubmit),
       className: "p-4 space-y-4 border-t",
       children: [
-        /* @__PURE__ */ jsxs19("div", { className: "space-y-4 w-full md:w-1/2", children: [
-          /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx21(Label, { htmlFor: "email", children: "New Email Address" }),
-            /* @__PURE__ */ jsx21(
-              Input5,
+        /* @__PURE__ */ jsxs25("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx29(Label, { htmlFor: "email", children: "New Email Address" }),
+            /* @__PURE__ */ jsx29(
+              Input7,
               {
                 id: "email",
                 type: "email",
@@ -2810,13 +3848,13 @@ function RequestChangeEmailForm({
                 disabled: isLoading
               }
             ),
-            errors.email && /* @__PURE__ */ jsx21("p", { className: "text-sm text-destructive", children: errors.email.message })
+            errors.email && /* @__PURE__ */ jsx29("p", { className: "text-sm text-destructive", children: errors.email.message })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx21(Label, { htmlFor: "password", children: "Password" }),
-            /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx21(
-                Input5,
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx29(Label, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx29(
+                Input7,
                 {
                   id: "password",
                   type: showPassword ? "text" : "password",
@@ -2826,23 +3864,23 @@ function RequestChangeEmailForm({
                   disabled: isLoading
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx29(
                 "button",
                 {
                   type: "button",
                   onClick: () => setShowPassword(!showPassword),
                   className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
                   disabled: isLoading,
-                  children: showPassword ? /* @__PURE__ */ jsx21(IconEyeOff4, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx21(IconEye4, { className: "h-4 w-4" })
+                  children: showPassword ? /* @__PURE__ */ jsx29(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx29(IconEye5, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            errors.password && /* @__PURE__ */ jsx21("p", { className: "text-sm text-destructive", children: errors.password.message })
+            errors.password && /* @__PURE__ */ jsx29("p", { className: "text-sm text-destructive", children: errors.password.message })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx21(
-            Button13,
+        /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx29(
+            Button15,
             {
               type: "button",
               variant: "outline",
@@ -2851,8 +3889,8 @@ function RequestChangeEmailForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsxs19(Button13, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx21(Spinner5, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsxs25(Button15, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx29(Spinner2, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -2862,8 +3900,8 @@ function RequestChangeEmailForm({
 }
 
 // src/components/profile/verify-change-email-form.tsx
-import { useState as useState15 } from "react";
-import { toast as toast8 } from "sonner";
+import { useState as useState17 } from "react";
+import { toast as toast11 } from "sonner";
 
 // src/components/profile/otp-verification-modal.tsx
 import {
@@ -2873,7 +3911,7 @@ import {
   DialogHeader,
   DialogTitle
 } from "@mesob/ui/components";
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function OtpVerificationModal({
   open,
   title,
@@ -2884,7 +3922,7 @@ function OtpVerificationModal({
   onResend,
   onCancel
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx30(
     Dialog,
     {
       open,
@@ -2893,12 +3931,12 @@ function OtpVerificationModal({
           onCancel?.();
         }
       },
-      children: /* @__PURE__ */ jsxs20(DialogContent, { children: [
-        /* @__PURE__ */ jsxs20(DialogHeader, { children: [
-          /* @__PURE__ */ jsx22(DialogTitle, { children: title }),
-          description && /* @__PURE__ */ jsx22(DialogDescription, { children: description })
+      children: /* @__PURE__ */ jsxs26(DialogContent, { children: [
+        /* @__PURE__ */ jsxs26(DialogHeader, { children: [
+          /* @__PURE__ */ jsx30(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx30(DialogDescription, { children: description })
         ] }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx30(
           VerificationForm,
           {
             verificationId,
@@ -2913,7 +3951,7 @@ function OtpVerificationModal({
 }
 
 // src/components/profile/verify-change-email-form.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function isAuthError3(error) {
   return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
 }
@@ -2968,8 +4006,8 @@ function VerifyChangeEmailForm({
 }) {
   const { refresh } = useSession();
   const { hooks } = useApi();
-  const [isSubmitting, setIsSubmitting] = useState15(false);
-  const [currentVerificationId, setCurrentVerificationId] = useState15(verificationId);
+  const [isSubmitting, setIsSubmitting] = useState17(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState17(verificationId);
   const verifyEmailMutation = hooks.useMutation(
     "post",
     "/email/verification/confirm"
@@ -2981,7 +4019,7 @@ function VerifyChangeEmailForm({
   );
   const onOtpSubmit = async (code) => {
     if (!currentVerificationId) {
-      toast8.error("Verification not found. Please request a new code.");
+      toast11.error("Verification not found. Please request a new code.");
       return;
     }
     try {
@@ -2995,21 +4033,21 @@ function VerifyChangeEmailForm({
       await updateEmailMutation.mutateAsync({
         body: { email }
       });
-      toast8.success("Email updated successfully");
+      toast11.success("Email updated successfully");
       await refresh();
       onSuccess();
     } catch (error) {
       const errorMessage = getErrorMessage2(error);
-      toast8.error(errorMessage);
+      toast11.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
   };
   if (!currentVerificationId) {
-    toast8.error("Verification not found. Please request a new code.");
+    toast11.error("Verification not found. Please request a new code.");
     return null;
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx31(
     OtpVerificationModal,
     {
       open: true,
@@ -3025,9 +4063,9 @@ function VerifyChangeEmailForm({
             body: { email }
           });
           setCurrentVerificationId(next.data?.verificationId ?? null);
-          toast8.success("Verification code resent");
+          toast11.success("Verification code resent");
         } catch (error) {
-          toast8.error(getErrorMessage2(error));
+          toast11.error(getErrorMessage2(error));
         } finally {
           setIsSubmitting(false);
         }
@@ -3038,13 +4076,13 @@ function VerifyChangeEmailForm({
 }
 
 // src/components/profile/change-email-form.tsx
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function ChangeEmailForm() {
   const { user } = useSession();
-  const [isOpen, setIsOpen] = useState16(false);
-  const [showOtp, setShowOtp] = useState16(false);
-  const [verificationId, setVerificationId] = useState16(null);
-  const [newEmail, setNewEmail] = useState16("");
+  const [isOpen, setIsOpen] = useState18(false);
+  const [showOtp, setShowOtp] = useState18(false);
+  const [verificationId, setVerificationId] = useState18(null);
+  const [newEmail, setNewEmail] = useState18("");
   const resetForms = () => {
     setShowOtp(false);
     setVerificationId(null);
@@ -3065,23 +4103,23 @@ function ChangeEmailForm() {
   };
   const title = user?.email ? "Change Email" : "Add Email";
   const description = user?.email ? "Update your email address" : "Add an email address to your account";
-  return /* @__PURE__ */ jsx24(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs21("div", { className: "border rounded-lg", children: [
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx32(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs27("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs27(
       CollapsibleTrigger,
       {
-        render: /* @__PURE__ */ jsx24(
-          Button14,
+        render: /* @__PURE__ */ jsx32(
+          Button16,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
           }
         ),
         children: [
-          /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx24("span", { className: "font-medium", children: title }),
-            /* @__PURE__ */ jsx24("span", { className: "text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx32("span", { className: "font-medium", children: title }),
+            /* @__PURE__ */ jsx32("span", { className: "text-sm text-muted-foreground", children: description })
           ] }),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx32(
             IconChevronDown,
             {
               className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -3090,7 +4128,7 @@ function ChangeEmailForm() {
         ]
       }
     ),
-    /* @__PURE__ */ jsx24(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx32(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx32(
       VerifyChangeEmailForm,
       {
         email: newEmail,
@@ -3098,7 +4136,7 @@ function ChangeEmailForm() {
         onSuccess: handleVerifySuccess,
         onCancel: handleCancel
       }
-    ) : /* @__PURE__ */ jsx24(
+    ) : /* @__PURE__ */ jsx32(
       RequestChangeEmailForm,
       {
         onSuccess: handleRequestSuccess,
@@ -3110,26 +4148,26 @@ function ChangeEmailForm() {
 }
 
 // src/components/profile/change-password-form.tsx
-import { zodResolver as zodResolver7 } from "@hookform/resolvers/zod";
+import { zodResolver as zodResolver9 } from "@hookform/resolvers/zod";
 import {
-  Button as Button15,
+  Button as Button17,
   Collapsible as Collapsible2,
   CollapsibleContent as CollapsibleContent2,
   CollapsibleTrigger as CollapsibleTrigger2,
-  Input as Input6,
+  Input as Input8,
   Label as Label2,
-  Spinner as Spinner6
+  Spinner as Spinner3
 } from "@mesob/ui/components";
-import { IconChevronDown as IconChevronDown2, IconEye as IconEye5, IconEyeOff as IconEyeOff5 } from "@tabler/icons-react";
-import { useState as useState17 } from "react";
-import { useForm as useForm7 } from "react-hook-form";
-import { toast as toast9 } from "sonner";
-import { z as z7 } from "zod";
-import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
-var changePasswordSchema = z7.object({
-  currentPassword: z7.string().min(8, "Password must be at least 8 characters"),
-  newPassword: z7.string().min(8, "Password must be at least 8 characters"),
-  confirmPassword: z7.string().min(8, "Password must be at least 8 characters")
+import { IconChevronDown as IconChevronDown2, IconEye as IconEye6, IconEyeOff as IconEyeOff6 } from "@tabler/icons-react";
+import { useState as useState19 } from "react";
+import { useForm as useForm9 } from "react-hook-form";
+import { toast as toast12 } from "sonner";
+import { z as z9 } from "zod";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+var changePasswordSchema = z9.object({
+  currentPassword: z9.string().min(8, "Password must be at least 8 characters"),
+  newPassword: z9.string().min(8, "Password must be at least 8 characters"),
+  confirmPassword: z9.string().min(8, "Password must be at least 8 characters")
 }).refine((data) => data.newPassword === data.confirmPassword, {
   message: "Passwords don't match",
   path: ["confirmPassword"]
@@ -3183,13 +4221,13 @@ function getPasswordChangeErrorMessage(error) {
 }
 function ChangePasswordForm() {
   const { user: _user } = useSession();
-  const [isOpen, setIsOpen] = useState17(false);
-  const [isSubmitting, setIsSubmitting] = useState17(false);
-  const [showPassword, setShowPassword] = useState17(false);
-  const [showNewPassword, setShowNewPassword] = useState17(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState17(false);
-  const form = useForm7({
-    resolver: zodResolver7(changePasswordSchema),
+  const [isOpen, setIsOpen] = useState19(false);
+  const [isSubmitting, setIsSubmitting] = useState19(false);
+  const [showPassword, setShowPassword] = useState19(false);
+  const [showNewPassword, setShowNewPassword] = useState19(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState19(false);
+  const form = useForm9({
+    resolver: zodResolver9(changePasswordSchema),
     defaultValues: {
       currentPassword: "",
       newPassword: "",
@@ -3200,32 +4238,32 @@ function ChangePasswordForm() {
   const onSubmit = (_data) => {
     try {
       setIsSubmitting(true);
-      toast9.error("Password change unavailable");
+      toast12.error("Password change unavailable");
       setIsOpen(false);
     } catch (error) {
       const errorMessage = getPasswordChangeErrorMessage(error);
-      toast9.error(errorMessage);
+      toast12.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx25(Collapsible2, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs22("div", { className: "border rounded-lg", children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx33(Collapsible2, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs28("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs28(
       CollapsibleTrigger2,
       {
-        render: /* @__PURE__ */ jsx25(
-          Button15,
+        render: /* @__PURE__ */ jsx33(
+          Button17,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
           }
         ),
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx25("span", { className: "font-medium", children: "Change Password" }),
-            /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: "Update your account password" })
+          /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx33("span", { className: "font-medium", children: "Change Password" }),
+            /* @__PURE__ */ jsx33("span", { className: "text-sm text-muted-foreground", children: "Update your account password" })
           ] }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx33(
             IconChevronDown2,
             {
               className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -3234,17 +4272,17 @@ function ChangePasswordForm() {
         ]
       }
     ),
-    /* @__PURE__ */ jsx25(CollapsibleContent2, { children: /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsx33(CollapsibleContent2, { children: /* @__PURE__ */ jsxs28(
       "form",
       {
         onSubmit: handleSubmit(onSubmit),
         className: "p-4 space-y-4 border-t",
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "space-y-2 w-full md:w-1/2", children: [
-            /* @__PURE__ */ jsx25(Label2, { htmlFor: "currentPassword", children: "Old Password" }),
-            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx25(
-                Input6,
+          /* @__PURE__ */ jsxs28("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx33(Label2, { htmlFor: "currentPassword", children: "Old Password" }),
+            /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx33(
+                Input8,
                 {
                   id: "currentPassword",
                   type: showPassword ? "text" : "password",
@@ -3253,23 +4291,23 @@ function ChangePasswordForm() {
                   ...register("currentPassword")
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx33(
                 "button",
                 {
                   type: "button",
                   onClick: () => setShowPassword(!showPassword),
                   className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showPassword ? /* @__PURE__ */ jsx25(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx25(IconEye5, { className: "h-4 w-4" })
+                  children: showPassword ? /* @__PURE__ */ jsx33(IconEyeOff6, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(IconEye6, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            formState.errors.currentPassword && /* @__PURE__ */ jsx25("p", { className: "text-sm text-destructive", children: formState.errors.currentPassword.message })
+            formState.errors.currentPassword && /* @__PURE__ */ jsx33("p", { className: "text-sm text-destructive", children: formState.errors.currentPassword.message })
           ] }),
-          /* @__PURE__ */ jsxs22("div", { className: "space-y-2 w-full md:w-1/2", children: [
-            /* @__PURE__ */ jsx25(Label2, { htmlFor: "newPassword", children: "New Password" }),
-            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx25(
-                Input6,
+          /* @__PURE__ */ jsxs28("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx33(Label2, { htmlFor: "newPassword", children: "New Password" }),
+            /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx33(
+                Input8,
                 {
                   id: "newPassword",
                   type: showNewPassword ? "text" : "password",
@@ -3278,23 +4316,23 @@ function ChangePasswordForm() {
                   ...register("newPassword")
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx33(
                 "button",
                 {
                   type: "button",
                   onClick: () => setShowNewPassword(!showNewPassword),
                   className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showNewPassword ? /* @__PURE__ */ jsx25(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx25(IconEye5, { className: "h-4 w-4" })
+                  children: showNewPassword ? /* @__PURE__ */ jsx33(IconEyeOff6, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(IconEye6, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            formState.errors.newPassword && /* @__PURE__ */ jsx25("p", { className: "text-sm text-destructive", children: formState.errors.newPassword.message })
+            formState.errors.newPassword && /* @__PURE__ */ jsx33("p", { className: "text-sm text-destructive", children: formState.errors.newPassword.message })
           ] }),
-          /* @__PURE__ */ jsxs22("div", { className: "space-y-2 w-full md:w-1/2", children: [
-            /* @__PURE__ */ jsx25(Label2, { htmlFor: "confirmPassword", children: "Confirm New Password" }),
-            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx25(
-                Input6,
+          /* @__PURE__ */ jsxs28("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx33(Label2, { htmlFor: "confirmPassword", children: "Confirm New Password" }),
+            /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx33(
+                Input8,
                 {
                   id: "confirmPassword",
                   type: showConfirmPassword ? "text" : "password",
@@ -3303,21 +4341,21 @@ function ChangePasswordForm() {
                   ...register("confirmPassword")
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx33(
                 "button",
                 {
                   type: "button",
                   onClick: () => setShowConfirmPassword(!showConfirmPassword),
                   className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showConfirmPassword ? /* @__PURE__ */ jsx25(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx25(IconEye5, { className: "h-4 w-4" })
+                  children: showConfirmPassword ? /* @__PURE__ */ jsx33(IconEyeOff6, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(IconEye6, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            formState.errors.confirmPassword && /* @__PURE__ */ jsx25("p", { className: "text-sm text-destructive", children: formState.errors.confirmPassword.message })
+            formState.errors.confirmPassword && /* @__PURE__ */ jsx33("p", { className: "text-sm text-destructive", children: formState.errors.confirmPassword.message })
           ] }),
-          /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2", children: [
-            /* @__PURE__ */ jsx25(
-              Button15,
+          /* @__PURE__ */ jsxs28("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsx33(
+              Button17,
               {
                 type: "button",
                 variant: "outline",
@@ -3329,8 +4367,8 @@ function ChangePasswordForm() {
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsxs22(Button15, { type: "submit", disabled: isSubmitting, children: [
-              isSubmitting && /* @__PURE__ */ jsx25(Spinner6, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxs28(Button17, { type: "submit", disabled: isSubmitting, children: [
+              isSubmitting && /* @__PURE__ */ jsx33(Spinner3, { className: "mr-2 h-4 w-4" }),
               "Change Password"
             ] })
           ] })
@@ -3342,25 +4380,25 @@ function ChangePasswordForm() {
 
 // src/components/profile/change-phone-form.tsx
 import {
-  Button as Button17,
+  Button as Button19,
   Collapsible as Collapsible3,
   CollapsibleContent as CollapsibleContent3,
   CollapsibleTrigger as CollapsibleTrigger3
 } from "@mesob/ui/components";
 import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
-import { useState as useState20 } from "react";
+import { useState as useState22 } from "react";
 
 // src/components/profile/request-change-phone-form.tsx
-import { zodResolver as zodResolver8 } from "@hookform/resolvers/zod";
-import { Button as Button16, Input as Input7, Label as Label3, Spinner as Spinner7 } from "@mesob/ui/components";
-import { IconEye as IconEye6, IconEyeOff as IconEyeOff6 } from "@tabler/icons-react";
-import { useEffect as useEffect9, useState as useState18 } from "react";
-import { useForm as useForm8 } from "react-hook-form";
-import { toast as toast10 } from "sonner";
-import { z as z8 } from "zod";
-import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
-var phonePasswordSchema = (phoneRegex) => z8.object({
-  phone: z8.string().trim().min(1, { message: "Phone number is required" }).refine(
+import { zodResolver as zodResolver10 } from "@hookform/resolvers/zod";
+import { Button as Button18, Input as Input9, Label as Label3, Spinner as Spinner4 } from "@mesob/ui/components";
+import { IconEye as IconEye7, IconEyeOff as IconEyeOff7 } from "@tabler/icons-react";
+import { useEffect as useEffect11, useState as useState20 } from "react";
+import { useForm as useForm10 } from "react-hook-form";
+import { toast as toast13 } from "sonner";
+import { z as z10 } from "zod";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+var phonePasswordSchema = (phoneRegex) => z10.object({
+  phone: z10.string().trim().min(1, { message: "Phone number is required" }).refine(
     (val) => {
       const isPhone3 = phoneRegex.test(val);
       return isPhone3;
@@ -3369,7 +4407,7 @@ var phonePasswordSchema = (phoneRegex) => z8.object({
       message: "Invalid phone number"
     }
   ),
-  password: z8.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+  password: z10.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
 });
 function isAuthError5(error) {
   return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
@@ -3425,9 +4463,9 @@ function RequestChangePhoneForm({
   const { user } = useSession();
   const { hooks } = useApi();
   const { config } = useConfig();
-  const [isSubmitting, setIsSubmitting] = useState18(false);
-  const [isChecking, setIsChecking] = useState18(true);
-  const [showPassword, setShowPassword] = useState18(false);
+  const [isSubmitting, setIsSubmitting] = useState20(false);
+  const [isChecking, setIsChecking] = useState20(true);
+  const [showPassword, setShowPassword] = useState20(false);
   const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
   const getPendingAccountChangeQuery = hooks.useQuery(
     "get",
@@ -3441,8 +4479,8 @@ function RequestChangePhoneForm({
     "post",
     "/phone/verification/request"
   );
-  const phonePasswordForm = useForm8({
-    resolver: zodResolver8(phonePasswordSchema(phoneRegex)),
+  const phonePasswordForm = useForm10({
+    resolver: zodResolver10(phonePasswordSchema(phoneRegex)),
     defaultValues: {
       phone: "",
       password: ""
@@ -3455,7 +4493,7 @@ function RequestChangePhoneForm({
     setValue,
     formState: { errors }
   } = phonePasswordForm;
-  useEffect9(() => {
+  useEffect11(() => {
     let active = true;
     const run = async () => {
       try {
@@ -3479,7 +4517,7 @@ function RequestChangePhoneForm({
         }
         setValue("phone", accountChange.newPhone, { shouldValidate: true });
         if (verificationId) {
-          toast10.message("Resuming verification\u2026");
+          toast13.message("Resuming verification\u2026");
           onSuccess(verificationId, accountChange.newPhone);
           return;
         }
@@ -3495,7 +4533,7 @@ function RequestChangePhoneForm({
   }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
   const onPhonePasswordSubmit = async (data) => {
     if (!user) {
-      toast10.error("User not found");
+      toast13.error("User not found");
       return;
     }
     try {
@@ -3509,10 +4547,10 @@ function RequestChangePhoneForm({
       });
       if (checkResult.data?.exists) {
         if (user?.phone?.replace(/\s/g, "") === normalizedPhone.replace(/\s/g, "")) {
-          toast10.error("This is already your current phone number.");
+          toast13.error("This is already your current phone number.");
           return;
         }
-        toast10.error(
+        toast13.error(
           "This phone number is already taken. Please use a different number."
         );
         return;
@@ -3523,34 +4561,34 @@ function RequestChangePhoneForm({
           context: "change-phone"
         }
       });
-      toast10.success("Verification code sent to your phone");
+      toast13.success("Verification code sent to your phone");
       onSuccess(verification.data?.verificationId ?? "", normalizedPhone);
     } catch (error) {
       const errorMessage = getErrorMessage3(error);
       if (isAuthError5(error)) {
         const errorCode = getErrorCode4(error);
         if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
-          toast10.error("Incorrect password. Please try again.");
+          toast13.error("Incorrect password. Please try again.");
           return;
         }
       }
-      toast10.error(errorMessage);
+      toast13.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
   };
   const isLoading = isSubmitting || isChecking;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs29(
     "form",
     {
       onSubmit: handleSubmit(onPhonePasswordSubmit),
       className: "p-4 space-y-4 border-t",
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "space-y-4 w-full md:w-1/2", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx26(Label3, { htmlFor: "phone", children: "Phone Number" }),
-            /* @__PURE__ */ jsx26(
-              Input7,
+        /* @__PURE__ */ jsxs29("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs29("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx34(Label3, { htmlFor: "phone", children: "Phone Number" }),
+            /* @__PURE__ */ jsx34(
+              Input9,
               {
                 id: "phone",
                 type: "tel",
@@ -3559,13 +4597,13 @@ function RequestChangePhoneForm({
                 disabled: isLoading
               }
             ),
-            errors.phone && /* @__PURE__ */ jsx26("p", { className: "text-sm text-destructive", children: errors.phone.message })
+            errors.phone && /* @__PURE__ */ jsx34("p", { className: "text-sm text-destructive", children: errors.phone.message })
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx26(Label3, { htmlFor: "password", children: "Password" }),
-            /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx26(
-                Input7,
+          /* @__PURE__ */ jsxs29("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx34(Label3, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx34(
+                Input9,
                 {
                   id: "password",
                   type: showPassword ? "text" : "password",
@@ -3575,22 +4613,22 @@ function RequestChangePhoneForm({
                   disabled: isLoading
                 }
               ),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx34(
                 "button",
                 {
                   type: "button",
                   onClick: () => setShowPassword(!showPassword),
                   className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showPassword ? /* @__PURE__ */ jsx26(IconEyeOff6, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx26(IconEye6, { className: "h-4 w-4" })
+                  children: showPassword ? /* @__PURE__ */ jsx34(IconEyeOff7, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx34(IconEye7, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            errors.password && /* @__PURE__ */ jsx26("p", { className: "text-sm text-destructive", children: errors.password.message })
+            errors.password && /* @__PURE__ */ jsx34("p", { className: "text-sm text-destructive", children: errors.password.message })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx26(
-            Button16,
+        /* @__PURE__ */ jsxs29("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx34(
+            Button18,
             {
               type: "button",
               variant: "outline",
@@ -3599,8 +4637,8 @@ function RequestChangePhoneForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsxs23(Button16, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx26(Spinner7, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsxs29(Button18, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx34(Spinner4, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -3610,9 +4648,9 @@ function RequestChangePhoneForm({
 }
 
 // src/components/profile/verify-change-phone-form.tsx
-import { useState as useState19 } from "react";
-import { toast as toast11 } from "sonner";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { useState as useState21 } from "react";
+import { toast as toast14 } from "sonner";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function isAuthError6(error) {
   return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
 }
@@ -3667,8 +4705,8 @@ function VerifyChangePhoneForm({
 }) {
   const { refresh } = useSession();
   const { hooks } = useApi();
-  const [isSubmitting, setIsSubmitting] = useState19(false);
-  const [currentVerificationId, setCurrentVerificationId] = useState19(verificationId);
+  const [isSubmitting, setIsSubmitting] = useState21(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState21(verificationId);
   const verifyPhoneOtpMutation = hooks.useMutation(
     "post",
     "/phone/verification/confirm"
@@ -3680,7 +4718,7 @@ function VerifyChangePhoneForm({
   );
   const onOtpSubmit = async (code) => {
     if (!currentVerificationId) {
-      toast11.error("Verification not found. Please request a new code.");
+      toast14.error("Verification not found. Please request a new code.");
       return;
     }
     try {
@@ -3695,21 +4733,21 @@ function VerifyChangePhoneForm({
       await updatePhoneMutation.mutateAsync({
         body: { phone }
       });
-      toast11.success("Phone number updated successfully");
+      toast14.success("Phone number updated successfully");
       await refresh();
       onSuccess();
     } catch (error) {
       const errorMessage = getErrorMessage4(error);
-      toast11.error(errorMessage);
+      toast14.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
   };
   if (!currentVerificationId) {
-    toast11.error("Verification not found. Please request a new code.");
+    toast14.error("Verification not found. Please request a new code.");
     return null;
   }
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx35(
     OtpVerificationModal,
     {
       open: true,
@@ -3728,9 +4766,9 @@ function VerifyChangePhoneForm({
             }
           });
           setCurrentVerificationId(next.data?.verificationId ?? null);
-          toast11.success("Verification code resent");
+          toast14.success("Verification code resent");
         } catch (error) {
-          toast11.error(getErrorMessage4(error));
+          toast14.error(getErrorMessage4(error));
         } finally {
           setIsSubmitting(false);
         }
@@ -3741,13 +4779,13 @@ function VerifyChangePhoneForm({
 }
 
 // src/components/profile/change-phone-form.tsx
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 function ChangePhoneForm() {
   const { user } = useSession();
-  const [isOpen, setIsOpen] = useState20(false);
-  const [showOtp, setShowOtp] = useState20(false);
-  const [verificationId, setVerificationId] = useState20(null);
-  const [newPhone, setNewPhone] = useState20("");
+  const [isOpen, setIsOpen] = useState22(false);
+  const [showOtp, setShowOtp] = useState22(false);
+  const [verificationId, setVerificationId] = useState22(null);
+  const [newPhone, setNewPhone] = useState22("");
   const resetForms = () => {
     setShowOtp(false);
     setVerificationId(null);
@@ -3768,23 +4806,23 @@ function ChangePhoneForm() {
   };
   const title = user?.phone ? "Change Phone" : "Add Phone";
   const description = user?.phone ? "Update your phone number" : "Add a phone number to your account";
-  return /* @__PURE__ */ jsx28(Collapsible3, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs24("div", { className: "border rounded-lg", children: [
-    /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx36(Collapsible3, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs30("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs30(
       CollapsibleTrigger3,
       {
-        render: /* @__PURE__ */ jsx28(
-          Button17,
+        render: /* @__PURE__ */ jsx36(
+          Button19,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
           }
         ),
         children: [
-          /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx28("span", { className: "font-medium", children: title }),
-            /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx36("span", { className: "font-medium", children: title }),
+            /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground", children: description })
           ] }),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx36(
             IconChevronDown3,
             {
               className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -3793,7 +4831,7 @@ function ChangePhoneForm() {
         ]
       }
     ),
-    /* @__PURE__ */ jsx28(CollapsibleContent3, { children: showOtp ? /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx36(CollapsibleContent3, { children: showOtp ? /* @__PURE__ */ jsx36(
       VerifyChangePhoneForm,
       {
         phone: newPhone,
@@ -3801,7 +4839,7 @@ function ChangePhoneForm() {
         onSuccess: handleVerifySuccess,
         onCancel: handleCancel
       }
-    ) : /* @__PURE__ */ jsx28(
+    ) : /* @__PURE__ */ jsx36(
       RequestChangePhoneForm,
       {
         onSuccess: handleRequestSuccess,
@@ -3813,70 +4851,101 @@ function ChangePhoneForm() {
 }
 
 // src/components/profile/security.tsx
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 function Security() {
-  return /* @__PURE__ */ jsxs25("div", { className: "p-6 space-y-6", children: [
-    /* @__PURE__ */ jsxs25("div", { children: [
-      /* @__PURE__ */ jsx29("h1", { className: "text-2xl font-semibold", children: "Security" }),
-      /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground", children: "Manage your security settings" })
+  const { user } = useSession();
+  return /* @__PURE__ */ jsxs31("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "relative overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-amber-500/5 p-6 shadow-sm", children: [
+      /* @__PURE__ */ jsx37("div", { className: "absolute left-0 top-0 h-32 w-32 rounded-full bg-primary/10 blur-3xl" }),
+      /* @__PURE__ */ jsxs31("div", { className: "relative flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx37(Badge9, { variant: "outline", children: "Security center" }),
+          /* @__PURE__ */ jsx37(Badge9, { variant: "secondary", children: user?.emailVerified || user?.phoneVerified ? "Recovery methods available" : "Add a recovery method" })
+        ] }),
+        /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx37("h1", { className: "text-2xl font-semibold tracking-tight", children: "Security" }),
+          /* @__PURE__ */ jsx37("p", { className: "max-w-2xl text-sm text-muted-foreground", children: "Password, email, and phone updates all live here. Keep recovery channels current so account recovery stays predictable." })
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs25("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx29(ChangePasswordForm, {}),
-      /* @__PURE__ */ jsx29(ChangeEmailForm, {}),
-      /* @__PURE__ */ jsx29(ChangePhoneForm, {})
+    /* @__PURE__ */ jsxs31("div", { className: "grid gap-4 lg:grid-cols-[0.85fr_1.4fr]", children: [
+      /* @__PURE__ */ jsx37(Card3, { className: "rounded-[1.75rem] border-border/60 shadow-sm", children: /* @__PURE__ */ jsxs31(CardContent2, { className: "space-y-5 p-6", children: [
+        /* @__PURE__ */ jsxs31("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx37("div", { className: "text-sm font-medium text-muted-foreground", children: "Verification state" }),
+          /* @__PURE__ */ jsx37("div", { className: "text-lg font-semibold", children: "Recovery readiness" })
+        ] }),
+        /* @__PURE__ */ jsx37(Separator2, {}),
+        /* @__PURE__ */ jsxs31("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "rounded-2xl border border-border/60 bg-muted/20 p-4", children: [
+            /* @__PURE__ */ jsx37("div", { className: "text-sm font-medium", children: "Email" }),
+            /* @__PURE__ */ jsx37("div", { className: "mt-1 text-sm text-muted-foreground", children: user?.email ?? "No email added" }),
+            /* @__PURE__ */ jsx37("div", { className: "mt-3", children: /* @__PURE__ */ jsx37(Badge9, { variant: "outline", children: user?.emailVerified ? "Verified" : "Unverified" }) })
+          ] }),
+          /* @__PURE__ */ jsxs31("div", { className: "rounded-2xl border border-border/60 bg-muted/20 p-4", children: [
+            /* @__PURE__ */ jsx37("div", { className: "text-sm font-medium", children: "Phone" }),
+            /* @__PURE__ */ jsx37("div", { className: "mt-1 text-sm text-muted-foreground", children: user?.phone ?? "No phone added" }),
+            /* @__PURE__ */ jsx37("div", { className: "mt-3", children: /* @__PURE__ */ jsx37(Badge9, { variant: "outline", children: user?.phoneVerified ? "Verified" : "Unverified" }) })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx37(ChangePasswordForm, {}),
+        /* @__PURE__ */ jsx37(ChangeEmailForm, {}),
+        /* @__PURE__ */ jsx37(ChangePhoneForm, {})
+      ] })
     ] })
   ] });
 }
 
 // src/components/skeletons/auth-form-skeleton.tsx
-import { Skeleton as Skeleton2 } from "@mesob/ui/components";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Skeleton as Skeleton3 } from "@mesob/ui/components";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 function AuthFormSkeleton() {
-  return /* @__PURE__ */ jsxs26("div", { className: "w-full max-w-md space-y-6 p-6", children: [
-    /* @__PURE__ */ jsxs26("div", { className: "space-y-2 text-center", children: [
-      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-8 w-48 mx-auto" }),
-      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-64 mx-auto" })
+  return /* @__PURE__ */ jsxs32("div", { className: "w-full max-w-md space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx38(Skeleton3, { className: "h-8 w-48 mx-auto" }),
+      /* @__PURE__ */ jsx38(Skeleton3, { className: "h-4 w-64 mx-auto" })
     ] }),
-    /* @__PURE__ */ jsxs26("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-24" }),
-        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-10 w-full" })
+    /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx38(Skeleton3, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx38(Skeleton3, { className: "h-10 w-full" })
       ] }),
-      /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-24" }),
-        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-10 w-full" })
+      /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx38(Skeleton3, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx38(Skeleton3, { className: "h-10 w-full" })
       ] }),
-      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-10 w-full" })
+      /* @__PURE__ */ jsx38(Skeleton3, { className: "h-10 w-full" })
     ] }),
-    /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-px w-full" }),
-      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-32 mx-auto" })
+    /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx38(Skeleton3, { className: "h-px w-full" }),
+      /* @__PURE__ */ jsx38(Skeleton3, { className: "h-4 w-32 mx-auto" })
     ] })
   ] });
 }
 
 // src/components/skeletons/profile-skeleton.tsx
-import { Skeleton as Skeleton3 } from "@mesob/ui/components";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Skeleton as Skeleton4 } from "@mesob/ui/components";
+import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function ProfileSkeleton() {
-  return /* @__PURE__ */ jsxs27("div", { className: "w-full max-w-4xl space-y-8 p-6", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsx31(Skeleton3, { className: "h-24 w-24 rounded-full" }),
-      /* @__PURE__ */ jsxs27("div", { className: "space-y-2 flex-1", children: [
-        /* @__PURE__ */ jsx31(Skeleton3, { className: "h-8 w-48" }),
-        /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-64" })
+  return /* @__PURE__ */ jsxs33("div", { className: "w-full max-w-4xl space-y-8 p-6", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx39(Skeleton4, { className: "h-24 w-24 rounded-full" }),
+      /* @__PURE__ */ jsxs33("div", { className: "space-y-2 flex-1", children: [
+        /* @__PURE__ */ jsx39(Skeleton4, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsx39(Skeleton4, { className: "h-4 w-64" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx31("div", { className: "space-y-6", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs27("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx31(Skeleton3, { className: "h-6 w-32" }),
-      /* @__PURE__ */ jsxs27("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-24" }),
-          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-32" })
+    /* @__PURE__ */ jsx39("div", { className: "space-y-6", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx39(Skeleton4, { className: "h-6 w-32" }),
+      /* @__PURE__ */ jsxs33("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx39(Skeleton4, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx39(Skeleton4, { className: "h-4 w-32" })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-24" }),
-          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-40" })
+        /* @__PURE__ */ jsxs33("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx39(Skeleton4, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx39(Skeleton4, { className: "h-4 w-40" })
         ] })
       ] })
     ] }, i)) })
@@ -3894,15 +4963,22 @@ export {
   AuthErrorBoundary,
   AuthFormSkeleton,
   DataTable,
+  Deny,
   ErrorBoundary,
   ForgotPassword,
+  Grant,
   MesobAuthProvider,
+  PermissionSelector,
   Permissions,
   ProfileSkeleton,
   ResetPasswordForm,
+  RoleDetailLayout,
+  RoleDetailPage,
+  RolePermissionsPage,
   Roles,
   Security,
   Sessions,
+  SetPassword,
   SignIn,
   SignUp,
   TableSkeleton,