@greatapps/common 1.1.345 → 1.1.347

package/dist/components/account/sections/PreferencesSection.mjs

@@ -112,8 +112,8 @@ function PreferencesSection({ onClose }) {
     setPendingSubmit(null);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6", children: [
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1", children: [
         /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Prefer\xEAncias" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
           /* @__PURE__ */ jsx("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: /* @__PURE__ */ jsx(
@@ -127,7 +127,6 @@ function PreferencesSection({ onClose }) {
               disabled: !canEditPreferences
             }
           ) }),
-          /* @__PURE__ */ jsx(Separator, {}),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: [
             /* @__PURE__ */ jsx(
               ComboboxField,
@@ -192,7 +191,7 @@ function PreferencesSection({ onClose }) {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10", children: [
         /* @__PURE__ */ jsx(
           Button,
           {

package/dist/components/account/sections/PreferencesSection.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/PreferencesSection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { FormField } from '../../ui/form/FormField';\nimport { ComboboxField } from '../../ui/form/ComboboxField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { UserProfile } from '../../../modules/users/schema';\nimport type { UpdateAccountRequest } from '../../../modules/accounts/types';\nimport {\n  useUpdateAccountUser,\n  useUpdateAccount,\n} from '../../../modules/accounts/hooks/useAccountManagement';\nimport {\n  LANGUAGE_OPTIONS,\n  TIME_FORMAT_OPTIONS,\n} from '../constants';\nimport { useTimezones } from '../../../modules/accounts/hooks/useTimezones';\nimport { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';\n\ninterface PreferencesFormValues {\n  companyName: string;\n  language: string;\n  currency: string;\n  timezone: string;\n  timeFormat: string;\n  receive_sms: boolean;\n  receive_email: boolean;\n}\n\ninterface PreferencesSectionProps {\n  onClose: () => void;\n}\n\nexport function PreferencesSection({ onClose }: PreferencesSectionProps) {\n  const { data: timezones = [] } = useTimezones();\n  const { data: currencies = [] } = useCurrencies();\n  const { user, account } = useAuth();\n  const canEditPreferences =\n    user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;\n  const updateAccountUser = useUpdateAccountUser();\n  const updateAccount = useUpdateAccount();\n  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);\n  const [pendingSubmit, setPendingSubmit] = useState<{\n    data: PreferencesFormValues;\n    accountFields: UpdateAccountRequest;\n  } | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =\n    useForm<PreferencesFormValues>({\n      defaultValues: {\n        companyName: '',\n        language: '',\n        currency: '',\n        timezone: '',\n        timeFormat: '24h',\n        receive_sms: false,\n        receive_email: false,\n      },\n    });\n\n  useEffect(() => {\n    if (!user || !account) return;\n    reset({\n      companyName: account.name ?? '',\n      language: LANGUAGE_OPTIONS.find(\n        (o) => o.apiValue === user.language?.toLowerCase()\n      )?.value ?? 'pt-BR',\n      currency: account.currency,\n      timezone: account.timezone,\n      timeFormat: '24h',\n      receive_sms: user.receive_sms ?? false,\n      receive_email: user.receive_email ?? false,\n    });\n  }, [user, account, reset]);\n\n  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {\n    setIsSaving(true);\n    try {\n      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();\n      await updateAccountUser.mutateAsync({\n        language: apiLanguage,\n        receive_sms: data.receive_sms,\n        receive_email: data.receive_email,\n      });\n\n      if (canEditPreferences && Object.keys(accountFields).length > 0) {\n        await updateAccount.mutateAsync(accountFields);\n      }\n\n      reset(data);\n      toast.custom((t) => (\n        <Toast variant=\"success\" message=\"Preferências salvas com sucesso\" toastId={t} />\n      ));\n      onClose();\n    } catch (error) {\n      toast.custom((t) => (\n        <Toast\n          variant=\"error\"\n          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}\n          toastId={t}\n        />\n      ));\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const onSubmit = (data: PreferencesFormValues) => {\n    const accountFields: UpdateAccountRequest = {\n      ...(canEditPreferences && dirtyFields.companyName && { name: data.companyName }),\n      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),\n      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),\n    };\n    const globalFieldChanged = Object.keys(accountFields).length > 0;\n\n    if (globalFieldChanged) {\n      setPendingSubmit({ data, accountFields });\n      setConfirmGlobalOpen(true);\n    } else {\n      doSave(data, accountFields);\n    }\n  };\n\n  const handleConfirmGlobal = () => {\n    setConfirmGlobalOpen(false);\n    if (pendingSubmit) {\n      doSave(pendingSubmit.data, pendingSubmit.accountFields);\n      setPendingSubmit(null);\n    }\n  };\n\n  const handleCancelGlobal = () => {\n    setConfirmGlobalOpen(false);\n    setPendingSubmit(null);\n  };\n\n  return (\n    <>\n      <form onSubmit={handleSubmit(onSubmit)} className=\"flex flex-col\">\n        <div className=\"overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6\">\n          <span className=\"paragraph-medium-semibold text-gray-950\">Preferências</span>\n          <div className=\"flex flex-col gap-8\">\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <FormField\n                label=\"Nome da empresa\"\n                placeholder=\"Digite o nome da empresa\"\n                classnameContainer=\"w-full\"\n                value={watch('companyName')}\n                onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <ComboboxField\n                label=\"Idioma\"\n                placeholder=\"Selecione o idioma\"\n                searchPlaceholder=\"Buscar idioma...\"\n                containerClassName=\"w-full\"\n                options={LANGUAGE_OPTIONS}\n                value={watch('language')}\n                onChange={(value) => setValue('language', value, { shouldDirty: true })}\n              />\n              <ComboboxField\n                label=\"Moeda\"\n                placeholder=\"Selecione a moeda\"\n                searchPlaceholder=\"Buscar moeda...\"\n                containerClassName=\"w-full\"\n                options={currencies}\n                value={watch('currency')}\n                onChange={(value) => setValue('currency', value, { shouldDirty: true })}\n                icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col gap-4\">\n              <span className=\"paragraph-medium-semibold text-gray-950\">Exibição hora</span>\n              <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n                <ComboboxField\n                  label=\"Fuso horário\"\n                  placeholder=\"Selecione o fuso horário\"\n                  searchPlaceholder=\"Buscar fuso horário...\"\n                  containerClassName=\"w-full\"\n                  options={timezones}\n                  value={watch('timezone')}\n                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}\n                  icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                  disabled={!canEditPreferences}\n                />\n                <SelectField\n                  label=\"Formato hora\"\n                  placeholder=\"Selecione o formato\"\n                  className=\"h-10!\"\n                  containerClassName=\"w-full\"\n                  options={TIME_FORMAT_OPTIONS}\n                  value={watch('timeFormat')}\n                  onChange={(value) =>\n                    setValue('timeFormat', value as string, { shouldDirty: true })\n                  }\n                  icon={<IconLock className=\"size-4 text-gray-400\" />}\n                  disabled\n                />\n              </div>\n            </div>\n\n          </div>\n        </div>\n\n        <div className=\"flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white\">\n          <Button\n            variant=\"secondary\"\n            className=\"h-10!\"\n            type=\"button\"\n            disabled={isSaving}\n            onClick={() => {\n              reset();\n              onClose();\n            }}\n          >\n            Cancelar\n          </Button>\n          <Button className=\"h-10!\" type=\"submit\" disabled={isSaving}>\n            {isSaving ? 'Salvando...' : 'Salvar alterações'}\n          </Button>\n        </div>\n      </form>\n\n      <ConfirmGlobalPreferencesModal\n        open={confirmGlobalOpen}\n        onConfirm={handleConfirmGlobal}\n        onCancel={handleCancelGlobal}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/PreferencesSection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { FormField } from '../../ui/form/FormField';\nimport { ComboboxField } from '../../ui/form/ComboboxField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { UserProfile } from '../../../modules/users/schema';\nimport type { UpdateAccountRequest } from '../../../modules/accounts/types';\nimport {\n  useUpdateAccountUser,\n  useUpdateAccount,\n} from '../../../modules/accounts/hooks/useAccountManagement';\nimport {\n  LANGUAGE_OPTIONS,\n  TIME_FORMAT_OPTIONS,\n} from '../constants';\nimport { useTimezones } from '../../../modules/accounts/hooks/useTimezones';\nimport { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';\n\ninterface PreferencesFormValues {\n  companyName: string;\n  language: string;\n  currency: string;\n  timezone: string;\n  timeFormat: string;\n  receive_sms: boolean;\n  receive_email: boolean;\n}\n\ninterface PreferencesSectionProps {\n  onClose: () => void;\n}\n\nexport function PreferencesSection({ onClose }: PreferencesSectionProps) {\n  const { data: timezones = [] } = useTimezones();\n  const { data: currencies = [] } = useCurrencies();\n  const { user, account } = useAuth();\n  const canEditPreferences =\n    user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;\n  const updateAccountUser = useUpdateAccountUser();\n  const updateAccount = useUpdateAccount();\n  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);\n  const [pendingSubmit, setPendingSubmit] = useState<{\n    data: PreferencesFormValues;\n    accountFields: UpdateAccountRequest;\n  } | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =\n    useForm<PreferencesFormValues>({\n      defaultValues: {\n        companyName: '',\n        language: '',\n        currency: '',\n        timezone: '',\n        timeFormat: '24h',\n        receive_sms: false,\n        receive_email: false,\n      },\n    });\n\n  useEffect(() => {\n    if (!user || !account) return;\n    reset({\n      companyName: account.name ?? '',\n      language: LANGUAGE_OPTIONS.find(\n        (o) => o.apiValue === user.language?.toLowerCase()\n      )?.value ?? 'pt-BR',\n      currency: account.currency,\n      timezone: account.timezone,\n      timeFormat: '24h',\n      receive_sms: user.receive_sms ?? false,\n      receive_email: user.receive_email ?? false,\n    });\n  }, [user, account, reset]);\n\n  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {\n    setIsSaving(true);\n    try {\n      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();\n      await updateAccountUser.mutateAsync({\n        language: apiLanguage,\n        receive_sms: data.receive_sms,\n        receive_email: data.receive_email,\n      });\n\n      if (canEditPreferences && Object.keys(accountFields).length > 0) {\n        await updateAccount.mutateAsync(accountFields);\n      }\n\n      reset(data);\n      toast.custom((t) => (\n        <Toast variant=\"success\" message=\"Preferências salvas com sucesso\" toastId={t} />\n      ));\n      onClose();\n    } catch (error) {\n      toast.custom((t) => (\n        <Toast\n          variant=\"error\"\n          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}\n          toastId={t}\n        />\n      ));\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const onSubmit = (data: PreferencesFormValues) => {\n    const accountFields: UpdateAccountRequest = {\n      ...(canEditPreferences && dirtyFields.companyName && { name: data.companyName }),\n      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),\n      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),\n    };\n    const globalFieldChanged = Object.keys(accountFields).length > 0;\n\n    if (globalFieldChanged) {\n      setPendingSubmit({ data, accountFields });\n      setConfirmGlobalOpen(true);\n    } else {\n      doSave(data, accountFields);\n    }\n  };\n\n  const handleConfirmGlobal = () => {\n    setConfirmGlobalOpen(false);\n    if (pendingSubmit) {\n      doSave(pendingSubmit.data, pendingSubmit.accountFields);\n      setPendingSubmit(null);\n    }\n  };\n\n  const handleCancelGlobal = () => {\n    setConfirmGlobalOpen(false);\n    setPendingSubmit(null);\n  };\n\n  return (\n    <>\n      <form onSubmit={handleSubmit(onSubmit)} className=\"flex flex-col h-full\">\n        <div className=\"overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1\">\n          <span className=\"paragraph-medium-semibold text-gray-950\">Preferências</span>\n          <div className=\"flex flex-col gap-8\">\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <FormField\n                label=\"Nome da empresa\"\n                placeholder=\"Digite o nome da empresa\"\n                classnameContainer=\"w-full\"\n                value={watch('companyName')}\n                onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <ComboboxField\n                label=\"Idioma\"\n                placeholder=\"Selecione o idioma\"\n                searchPlaceholder=\"Buscar idioma...\"\n                containerClassName=\"w-full\"\n                options={LANGUAGE_OPTIONS}\n                value={watch('language')}\n                onChange={(value) => setValue('language', value, { shouldDirty: true })}\n              />\n              <ComboboxField\n                label=\"Moeda\"\n                placeholder=\"Selecione a moeda\"\n                searchPlaceholder=\"Buscar moeda...\"\n                containerClassName=\"w-full\"\n                options={currencies}\n                value={watch('currency')}\n                onChange={(value) => setValue('currency', value, { shouldDirty: true })}\n                icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col gap-4\">\n              <span className=\"paragraph-medium-semibold text-gray-950\">Exibição hora</span>\n              <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n                <ComboboxField\n                  label=\"Fuso horário\"\n                  placeholder=\"Selecione o fuso horário\"\n                  searchPlaceholder=\"Buscar fuso horário...\"\n                  containerClassName=\"w-full\"\n                  options={timezones}\n                  value={watch('timezone')}\n                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}\n                  icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                  disabled={!canEditPreferences}\n                />\n                <SelectField\n                  label=\"Formato hora\"\n                  placeholder=\"Selecione o formato\"\n                  className=\"h-10!\"\n                  containerClassName=\"w-full\"\n                  options={TIME_FORMAT_OPTIONS}\n                  value={watch('timeFormat')}\n                  onChange={(value) =>\n                    setValue('timeFormat', value as string, { shouldDirty: true })\n                  }\n                  icon={<IconLock className=\"size-4 text-gray-400\" />}\n                  disabled\n                />\n              </div>\n            </div>\n\n          </div>\n        </div>\n\n        <div className=\"fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\n          <Button\n            variant=\"secondary\"\n            className=\"h-10!\"\n            type=\"button\"\n            disabled={isSaving}\n            onClick={() => {\n              reset();\n              onClose();\n            }}\n          >\n            Cancelar\n          </Button>\n          <Button className=\"h-10!\" type=\"submit\" disabled={isSaving}>\n            {isSaving ? 'Salvando...' : 'Salvar alterações'}\n          </Button>\n        </div>\n      </form>\n\n      <ConfirmGlobalPreferencesModal\n        open={confirmGlobalOpen}\n        onConfirm={handleConfirmGlobal}\n        onCancel={handleCancelGlobal}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account/sections/SecuritySection.mjs

@@ -1,143 +1,28 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { IconLock, IconTool } from "@tabler/icons-react";
-import { Badge } from "../../ui/data-display/Badge";
-import { Button } from "../../ui/buttons/Button";
-import { useAuth } from "../../../providers/auth.provider";
-import { useQueryClient } from "@tanstack/react-query";
-import { USER_QUERY_KEY } from "../../../modules/auth/hooks/useUserQuery";
-import { AccountSectionType } from "../../../enums/AccountSectionType";
-import TwoFactorAuthModal from "../TwoFactorAuthModal";
-import DisableTwoFactorAuthModal from "../DisableTwoFactorAuthModal";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle } from "@tabler/icons-react";
 function SecuritySection({
-  setActiveSection,
   onClose,
   onDeleteAccount
 }) {
-  const { user } = useAuth();
-  const queryClient = useQueryClient();
-  const twoFactorAuth = user?.two_factor_authentication ?? false;
-  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
-  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
-  const handleToggleTwoFactor = useCallback(() => {
-    if (twoFactorAuth) {
-      setDisableTwoFactorOpen(true);
-    } else {
-      setTwoFactorOpen(true);
-    }
-  }, [twoFactorAuth]);
-  const handleDisableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setDisableTwoFactorOpen(false);
-  }, [queryClient]);
-  const handleEnableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setTwoFactorOpen(false);
-  }, [queryClient]);
-  const handleDeleteAccount = useCallback(() => {
-    onDeleteAccount?.();
-  }, [onDeleteAccount]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto", children: [
-      /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 hidden lg:block", children: "Seguran\xE7a" }),
-      /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors",
-            onClick: handleToggleTwoFactor,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start lg:items-center gap-4 lg:gap-5", children: [
-                /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconTool, { size: 20, className: "text-gray-950" }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Autentica\xE7\xE3o de dois fatores" }),
-                    /* @__PURE__ */ jsx(
-                      Badge,
-                      {
-                        className: `paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? "text-green-600 bg-green-50" : "text-gray-600 bg-gray-50"}`,
-                        children: twoFactorAuth ? "Habilitado" : "Desabilitado"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Envio de c\xF3digo de seguran\xE7a (e-mail ou sms) para o usu\xE1rio acessar o sistema" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "secondary",
-                  className: "h-10! shrink-0 w-full lg:w-auto",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleToggleTwoFactor();
-                  },
-                  children: twoFactorAuth ? "Desabilitar" : "Habilitar"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors",
-            onClick: () => setActiveSection(AccountSectionType.CHANGE_PASSWORD),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start lg:items-center gap-4 lg:gap-5", children: [
-                /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconLock, { size: 20, className: "text-gray-950" }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Alterar senha de acesso" }),
-                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Atualize sua senha sempre que necess\xE1rio para manter sua conta segura." })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "secondary",
-                  className: "h-10! shrink-0 w-full lg:w-auto",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setActiveSection(AccountSectionType.CHANGE_PASSWORD);
-                  },
-                  children: "Alterar senha"
-                }
-              )
-            ]
-          }
-        )
+  return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto", children: [
+    /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 hidden lg:block", children: "Seguran\xE7a" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center lg:items-start gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "size-10 rounded-full bg-red-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20, className: "text-red-500" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Excluir conta" }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Esta a\xE7\xE3o \xE9 permanente e n\xE3o pode ser desfeita. Todos os seus dados, projetos e configura\xE7\xF5es ser\xE3o removidos definitivamente." })
       ] }),
       onDeleteAccount && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: "paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit",
-          onClick: handleDeleteAccount,
+          onClick: onDeleteAccount,
           children: "Excluir minha conta"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: onClose, children: "Cancelar" }),
-      /* @__PURE__ */ jsx(Button, { className: "h-10!", onClick: onClose, children: "Salvar altera\xE7\xF5es" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      DisableTwoFactorAuthModal,
-      {
-        open: disableTwoFactorOpen,
-        onClose: () => setDisableTwoFactorOpen(false),
-        onSuccess: handleDisableTwoFactorSuccess
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TwoFactorAuthModal,
-      {
-        open: twoFactorOpen,
-        onClose: () => setTwoFactorOpen(false),
-        onSuccess: handleEnableTwoFactorSuccess
-      }
-    )
+    ] })
   ] });
 }
 export {

package/dist/components/account/sections/SecuritySection.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/SecuritySection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { IconLock, IconTool } from '@tabler/icons-react';\nimport { Badge } from '../../ui/data-display/Badge';\nimport { Button } from '../../ui/buttons/Button';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';\nimport { AccountSectionType } from '../../../enums/AccountSectionType';\nimport TwoFactorAuthModal from '../TwoFactorAuthModal';\nimport DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';\n\ninterface SecuritySectionProps {\n  setActiveSection: (section: AccountSectionType) => void;\n  onClose: () => void;\n  onDeleteAccount?: () => void;\n}\n\nexport function SecuritySection({\n  setActiveSection,\n  onClose,\n  onDeleteAccount,\n}: SecuritySectionProps) {\n  const { user } = useAuth();\n  const queryClient = useQueryClient();\n\n  const twoFactorAuth = user?.two_factor_authentication ?? false;\n  const [twoFactorOpen, setTwoFactorOpen] = useState(false);\n  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);\n\n  const handleToggleTwoFactor = useCallback(() => {\n    if (twoFactorAuth) {\n      setDisableTwoFactorOpen(true);\n    } else {\n      setTwoFactorOpen(true);\n    }\n  }, [twoFactorAuth]);\n\n  const handleDisableTwoFactorSuccess = useCallback(() => {\n    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\n    setDisableTwoFactorOpen(false);\n  }, [queryClient]);\n\n  const handleEnableTwoFactorSuccess = useCallback(() => {\n    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\n    setTwoFactorOpen(false);\n  }, [queryClient]);\n\n  const handleDeleteAccount = useCallback(() => {\n    onDeleteAccount?.();\n  }, [onDeleteAccount]);\n\n  return (\n    <>\n      <div className=\"h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto\">\n        <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">Segurança</span>\n\n        <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\n          <div\n            className=\"flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors\"\n            onClick={handleToggleTwoFactor}\n          >\n            <div className=\"flex flex-1 items-start lg:items-center gap-4 lg:gap-5\">\n              <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0\">\n                <IconTool size={20} className=\"text-gray-950\" />\n              </div>\n              <div className=\"flex flex-col gap-1.5 flex-1\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"paragraph-small-semibold text-gray-950\">\n                    Autenticação de dois fatores\n                  </span>\n                  <Badge\n                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}\n                  >\n                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}\n                  </Badge>\n                </div>\n                <span className=\"paragraph-small-regular text-gray-600\">\n                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema\n                </span>\n              </div>\n            </div>\n            <Button\n              variant=\"secondary\"\n              className=\"h-10! shrink-0 w-full lg:w-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                handleToggleTwoFactor();\n              }}\n            >\n              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}\n            </Button>\n          </div>\n\n          <div\n            className=\"flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors\"\n            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}\n          >\n            <div className=\"flex flex-1 items-start lg:items-center gap-4 lg:gap-5\">\n              <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0\">\n                <IconLock size={20} className=\"text-gray-950\" />\n              </div>\n              <div className=\"flex flex-col gap-1.5 flex-1\">\n                <span className=\"paragraph-small-semibold text-gray-950\">\n                  Alterar senha de acesso\n                </span>\n                <span className=\"paragraph-small-regular text-gray-600\">\n                  Atualize sua senha sempre que necessário para manter sua conta segura.\n                </span>\n              </div>\n            </div>\n            <Button\n              variant=\"secondary\"\n              className=\"h-10! shrink-0 w-full lg:w-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                setActiveSection(AccountSectionType.CHANGE_PASSWORD);\n              }}\n            >\n              Alterar senha\n            </Button>\n          </div>\n        </div>\n\n        {onDeleteAccount && (\n          <button\n            type=\"button\"\n            className=\"paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit\"\n            onClick={handleDeleteAccount}\n          >\n            Excluir minha conta\n          </button>\n        )}\n      </div>\n\n      <div className=\"fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\n        <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={onClose}>\n          Cancelar\n        </Button>\n        <Button className=\"h-10!\" onClick={onClose}>\n          Salvar alterações\n        </Button>\n      </div>\n\n      <DisableTwoFactorAuthModal\n        open={disableTwoFactorOpen}\n        onClose={() => setDisableTwoFactorOpen(false)}\n        onSuccess={handleDisableTwoFactorSuccess}\n      />\n      <TwoFactorAuthModal\n        open={twoFactorOpen}\n        onClose={() => setTwoFactorOpen(false)}\n        onSuccess={handleEnableTwoFactorSuccess}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/SecuritySection.tsx"],"sourcesContent":["'use client';\n\nimport { IconAlertTriangle } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { AccountSectionType } from '../../../enums/AccountSectionType';\n\ninterface SecuritySectionProps {\n  setActiveSection: (section: AccountSectionType) => void;\n  onClose: () => void;\n  onDeleteAccount?: () => void;\n}\n\nexport function SecuritySection({\n  onClose,\n  onDeleteAccount,\n}: SecuritySectionProps) {\n  return (\n    <div className=\"h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto\">\n      <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">Segurança</span>\n\n      <div className=\"flex flex-col items-center lg:items-start gap-4\">\n        <div className=\"size-10 rounded-full bg-red-50 flex items-center justify-center\">\n          <IconAlertTriangle size={20} className=\"text-red-500\" />\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <span className=\"paragraph-medium-semibold text-gray-950\">Excluir conta</span>\n          <span className=\"paragraph-small-regular text-gray-600\">\n            Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.\n          </span>\n        </div>\n\n        {onDeleteAccount && (\n          <button\n            type=\"button\"\n            className=\"paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit\"\n            onClick={onDeleteAccount}\n          >\n            Excluir minha conta\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAmBM,cAOE,YAPF;AAjBN,SAAS,yBAAyB;AAW3B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAAyB;AACvB,SACE,qBAAC,SAAI,WAAU,gIACb;AAAA,wBAAC,UAAK,WAAU,2DAA0D,0BAAS;AAAA,IAEnF,qBAAC,SAAI,WAAU,mDACb;AAAA,0BAAC,SAAI,WAAU,mEACb,8BAAC,qBAAkB,MAAM,IAAI,WAAU,gBAAe,GACxD;AAAA,MAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAK,WAAU,2CAA0C,2BAAa;AAAA,QACvE,oBAAC,UAAK,WAAU,yCAAwC,iKAExD;AAAA,SACF;AAAA,MAEC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACV;AAAA;AAAA,MAED;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.345",
+  "version": "1.1.347",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/account/sections/PreferencesSection.tsx

@@ -145,8 +145,8 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
 
   return (
     <>
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
-        <div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6">
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col h-full">
+        <div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1">
           <span className="paragraph-medium-semibold text-gray-950">Preferências</span>
           <div className="flex flex-col gap-8">
             <div className="flex flex-col lg:flex-row items-center gap-3">
@@ -160,8 +160,6 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
               />
             </div>
 
-            <Separator />
-
             <div className="flex flex-col lg:flex-row items-center gap-3">
               <ComboboxField
                 label="Idioma"
@@ -220,7 +218,7 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
           </div>
         </div>
 
-        <div className="flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white">
+        <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
           <Button
             variant="secondary"
             className="h-10!"

package/src/components/account/sections/SecuritySection.tsx

@@ -1,15 +1,9 @@
 'use client';
 
-import { useState, useCallback } from 'react';
-import { IconLock, IconTool } from '@tabler/icons-react';
-import { Badge } from '../../ui/data-display/Badge';
+import { IconAlertTriangle } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { useAuth } from '../../../providers/auth.provider';
-import { useQueryClient } from '@tanstack/react-query';
-import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
 import { AccountSectionType } from '../../../enums/AccountSectionType';
-import TwoFactorAuthModal from '../TwoFactorAuthModal';
-import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
 
 interface SecuritySectionProps {
   setActiveSection: (section: AccountSectionType) => void;
@@ -18,141 +12,35 @@ interface SecuritySectionProps {
 }
 
 export function SecuritySection({
-  setActiveSection,
   onClose,
   onDeleteAccount,
 }: SecuritySectionProps) {
-  const { user } = useAuth();
-  const queryClient = useQueryClient();
-
-  const twoFactorAuth = user?.two_factor_authentication ?? false;
-  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
-  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
-
-  const handleToggleTwoFactor = useCallback(() => {
-    if (twoFactorAuth) {
-      setDisableTwoFactorOpen(true);
-    } else {
-      setTwoFactorOpen(true);
-    }
-  }, [twoFactorAuth]);
-
-  const handleDisableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setDisableTwoFactorOpen(false);
-  }, [queryClient]);
-
-  const handleEnableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setTwoFactorOpen(false);
-  }, [queryClient]);
-
-  const handleDeleteAccount = useCallback(() => {
-    onDeleteAccount?.();
-  }, [onDeleteAccount]);
-
   return (
-    <>
-      <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-        <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
+    <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
+      <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
 
-        <div className="border border-gray-200 rounded-lg overflow-hidden">
-          <div
-            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
-            onClick={handleToggleTwoFactor}
-          >
-            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
-              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
-                <IconTool size={20} className="text-gray-950" />
-              </div>
-              <div className="flex flex-col gap-1.5 flex-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <span className="paragraph-small-semibold text-gray-950">
-                    Autenticação de dois fatores
-                  </span>
-                  <Badge
-                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
-                  >
-                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
-                  </Badge>
-                </div>
-                <span className="paragraph-small-regular text-gray-600">
-                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
-                </span>
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="h-10! shrink-0 w-full lg:w-auto"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleToggleTwoFactor();
-              }}
-            >
-              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
-            </Button>
-          </div>
+      <div className="flex flex-col items-center lg:items-start gap-4">
+        <div className="size-10 rounded-full bg-red-50 flex items-center justify-center">
+          <IconAlertTriangle size={20} className="text-red-500" />
+        </div>
 
-          <div
-            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
-            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
-          >
-            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
-              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
-                <IconLock size={20} className="text-gray-950" />
-              </div>
-              <div className="flex flex-col gap-1.5 flex-1">
-                <span className="paragraph-small-semibold text-gray-950">
-                  Alterar senha de acesso
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  Atualize sua senha sempre que necessário para manter sua conta segura.
-                </span>
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="h-10! shrink-0 w-full lg:w-auto"
-              onClick={(e) => {
-                e.stopPropagation();
-                setActiveSection(AccountSectionType.CHANGE_PASSWORD);
-              }}
-            >
-              Alterar senha
-            </Button>
-          </div>
+        <div className="flex flex-col gap-2">
+          <span className="paragraph-medium-semibold text-gray-950">Excluir conta</span>
+          <span className="paragraph-small-regular text-gray-600">
+            Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.
+          </span>
         </div>
 
         {onDeleteAccount && (
           <button
             type="button"
             className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
-            onClick={handleDeleteAccount}
+            onClick={onDeleteAccount}
           >
             Excluir minha conta
           </button>
         )}
       </div>
-
-      <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
-        <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
-          Cancelar
-        </Button>
-        <Button className="h-10!" onClick={onClose}>
-          Salvar alterações
-        </Button>
-      </div>
-
-      <DisableTwoFactorAuthModal
-        open={disableTwoFactorOpen}
-        onClose={() => setDisableTwoFactorOpen(false)}
-        onSuccess={handleDisableTwoFactorSuccess}
-      />
-      <TwoFactorAuthModal
-        open={twoFactorOpen}
-        onClose={() => setTwoFactorOpen(false)}
-        onSuccess={handleEnableTwoFactorSuccess}
-      />
-    </>
+    </div>
   );
 }