@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/team/UserSheet.tsx

@@ -0,0 +1,688 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IconBell, IconCheck, IconMail, IconStack2, IconUser, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../ui/data-display/Tabs';
+import { Toast } from '../../../ui/feedback/Toast';
+import { Dialog, DialogContent } from '../../../ui/overlay/Dialog';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { ImageCropModal } from '../../../widgets/ImageUpload/ImageCropModal';
+import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../../modules/images/constants/image.constants';
+import { useImageUpload } from '../../../../modules/images/hooks/use-image-upload.hook';
+import { useCreateAccountUser } from '../../../../modules/accounts/hooks/create-account-user.hook';
+import { useUpdateAccountUserById } from '../../../../modules/accounts/hooks/useAccountManagement';
+import { useAddUserProjects } from '../../../../modules/accounts/hooks/add-user-projects.hook';
+import { useRemoveUserProjects } from '../../../../modules/accounts/hooks/remove-user-projects.hook';
+import { useProjects } from '../../../../modules/projects/hooks/list-projects.hook';
+import { useInvalidateUser } from '../../../../modules/auth/hooks/useUserQuery';
+import { UserProfile, type User } from '../../../../modules/users/schema';
+import { useAuth } from '../../../../providers/auth.provider';
+import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { base64ToFile } from '../../../../modules/images/utils/base64';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useTeamFlows, type UserSheetState } from '../../../../store/useTeamFlows';
+import { ChangeEmailModal } from '../ChangeEmailModal';
+import { ChangePhoneModal } from '../ChangePhoneModal';
+import { ChangePasswordSection } from '../ChangePasswordSection';
+import TwoFactorAuthModal from '../../TwoFactorAuthModal';
+import DisableTwoFactorAuthModal from '../../DisableTwoFactorAuthModal';
+import { NotificationsStep } from './steps/NotificationsStep';
+import { ProjectSelectionStep } from './steps/ProjectSelectionStep';
+import { UserInformationStep } from './steps/UserInformationStep';
+import { buildUserFormDefaults, buildUserFormSchema, type UserFormData } from './user-form.schema';
+
+const USER_AVATAR_CONFIG = { width: 200, height: 200, aspectRatio: 1 };
+
+const STORAGE_URL = process.env.NEXT_PUBLIC_STORAGE_URL || '';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const tabTriggerClasses =
+  'flex items-center gap-2 px-2 py-2 rounded-none border-b-2 border-transparent data-[state=active]:border-zinc-950 data-[state=active]:bg-transparent data-[state=active]:shadow-none bg-transparent';
+
+type UserSheetContentProps = {
+  open: boolean;
+  mode: 'add' | 'edit';
+  initialData?: User;
+  onClose: () => void;
+};
+
+function UserSheetContent({ open, mode, initialData, onClose }: UserSheetContentProps) {
+  const translate = useTranslations();
+  const translateSheet = useTranslations('common.account.workspace.team.sheet');
+  const isMobile = useIsMobile();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const isEditMode = mode === 'edit';
+
+  const [currentStep, setCurrentStep] = useState(1);
+  const [photoRemoved, setPhotoRemoved] = useState(false);
+  const [emailExistsError, setEmailExistsError] = useState<string | null>(null);
+  const [isCheckingEmail, setIsCheckingEmail] = useState(false);
+  const [showChangePhone, setShowChangePhone] = useState(false);
+  const [showChangeEmail, setShowChangeEmail] = useState(false);
+  const [showTwoFactor, setShowTwoFactor] = useState(false);
+  const [showDisableTwoFactor, setShowDisableTwoFactor] = useState(false);
+  const [showChangePassword, setShowChangePassword] = useState(false);
+  const selectAnotherInputRef = useRef<HTMLInputElement>(null);
+
+  const { user: currentUser } = useAuth();
+  const invalidateUser = useInvalidateUser();
+
+  const isOwnProfile = isEditMode && currentUser?.id === initialData?.id;
+  const currentProfile = currentUser?.profile;
+  const targetProfile = initialData?.profile;
+  const canManageUsers = currentProfile === UserProfile.owner || currentProfile === UserProfile.admin;
+
+  // Admin edita todo mundo menos o proprietário; qualquer um edita o próprio perfil.
+  const canEditUser = isEditMode
+    ? isOwnProfile
+      ? true
+      : currentProfile === UserProfile.owner
+        ? true
+        : currentProfile === UserProfile.admin
+          ? targetProfile !== UserProfile.owner
+          : false
+    : canManageUsers;
+
+  const canChangeProfile = isEditMode
+    ? initialData?.profile === UserProfile.owner
+      ? false
+      : canManageUsers
+    : canManageUsers;
+
+  const userFormSchema = useMemo(
+    () =>
+      buildUserFormSchema({
+        required: translate('common.validations.required'),
+        invalidEmail: translate('common.validations.invalidEmail'),
+      }),
+    [translate]
+  );
+
+  const form = useForm<UserFormData>({
+    mode: 'onTouched',
+    resolver: zodResolver(userFormSchema),
+    defaultValues: buildUserFormDefaults(initialData),
+  });
+
+  const { originalImage, showCropModal, setShowCropModal, fileName, handleFileSelect, handleCropConfirm } =
+    useImageUpload({
+      config: USER_AVATAR_CONFIG,
+      onSuccess: (base64) => {
+        form.setValue('photo', base64ToFile(base64, 'avatar.webp'), { shouldDirty: true });
+        setPhotoRemoved(false);
+      },
+      onError: (error) => {
+        toast.custom((toastId) => <Toast toastId={toastId} variant="error" message={error} />, {
+          duration: 5000,
+        });
+      },
+    });
+
+  const twoFactorSource = isOwnProfile
+    ? currentUser?.two_factor_authentication ?? false
+    : initialData?.two_factor_authentication ?? false;
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(twoFactorSource);
+  useEffect(() => setTwoFactorEnabled(twoFactorSource), [twoFactorSource]);
+
+  const createAccountUser = useCreateAccountUser();
+  const updateAccountUser = useUpdateAccountUserById();
+  const addUserProjects = useAddUserProjects();
+  const removeUserProjects = useRemoveUserProjects();
+  // Sem `limit` o backend devolve só a primeira página: admin/proprietário precisa de todos os ids
+  // para receber acesso a todos os projetos (mesmo limite da lista do passo de projetos).
+  const { data: projectsData } = useProjects({ limit: 5000 });
+
+  const allProjectIds = useMemo(() => projectsData?.data?.map((project) => project.id) || [], [projectsData]);
+
+  const initialProfile = initialData?.profile || UserProfile.admin;
+  const hasFullAccessOnOpen = initialProfile === UserProfile.admin || initialProfile === UserProfile.owner;
+
+  useEffect(() => {
+    form.reset({ ...buildUserFormDefaults(initialData), profile: initialProfile });
+
+    setPhotoRemoved(false);
+    setCurrentStep(1);
+    setEmailExistsError(null);
+    setIsCheckingEmail(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Admin e proprietário têm acesso a todos os projetos: marca os que faltam quando a lista de
+  // 5.000 projetos chega, sem sobrescrever uma seleção que o usuário já tenha alterado.
+  useEffect(() => {
+    if (!hasFullAccessOnOpen || allProjectIds.length === 0) return;
+    if (form.getFieldState('selectedProjects').isDirty) return;
+
+    form.setValue(
+      'selectedProjects',
+      Object.fromEntries(allProjectIds.map((id) => [id.toString(), true])),
+      { shouldDirty: true }
+    );
+  }, [allProjectIds, hasFullAccessOnOpen, form]);
+
+  const photo = useWatch({ control: form.control, name: 'photo' });
+  const selectedProjects = useWatch({ control: form.control, name: 'selectedProjects' });
+  const profile = useWatch({ control: form.control, name: 'profile' });
+  const nameValue = useWatch({ control: form.control, name: 'name' });
+  const emailValue = useWatch({ control: form.control, name: 'email' });
+  const isAdmin = profile === UserProfile.admin;
+
+  const canContinue =
+    !!nameValue?.trim() && EMAIL_REGEX.test(emailValue || '') && !isCheckingEmail && !emailExistsError;
+
+  const photoPreview = useMemo(() => {
+    if (photo instanceof File) return URL.createObjectURL(photo);
+    if (!photo && !photoRemoved && initialData?.photo) return `${STORAGE_URL}/${initialData.photo}`;
+    return null;
+  }, [photo, photoRemoved, initialData?.photo]);
+
+  const selectedCount = useMemo(() => {
+    if (isAdmin) return allProjectIds.length;
+    return Object.values(selectedProjects).filter(Boolean).length;
+  }, [selectedProjects, isAdmin, allProjectIds]);
+
+  const getProjectsForSubmit = useCallback(
+    (formData: UserFormData) => {
+      if (formData.profile === UserProfile.admin || formData.profile === UserProfile.owner) {
+        return allProjectIds;
+      }
+      return Object.keys(formData.selectedProjects)
+        .filter((key) => formData.selectedProjects[key])
+        .map(Number);
+    },
+    [allProjectIds]
+  );
+
+  const handleClose = useCallback(() => {
+    form.reset(buildUserFormDefaults(initialData));
+    setCurrentStep(1);
+    setPhotoRemoved(false);
+    setEmailExistsError(null);
+    setIsCheckingEmail(false);
+    onClose();
+  }, [form, initialData, onClose]);
+
+  const handleProfileChange = useCallback(
+    (newProfile: UserProfile) => {
+      const hasFullAccess = newProfile === UserProfile.admin || newProfile === UserProfile.owner;
+      form.setValue(
+        'selectedProjects',
+        hasFullAccess
+          ? Object.fromEntries(allProjectIds.map((id) => [id.toString(), true]))
+          : Object.fromEntries(initialData?.projects?.map((project) => [project.id.toString(), true]) || []),
+        { shouldDirty: true }
+      );
+    },
+    [form, allProjectIds, initialData]
+  );
+
+  const handlePhotoChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) handleFileSelect(file);
+      event.target.value = '';
+    },
+    [handleFileSelect]
+  );
+
+  const handleRemovePhoto = useCallback(() => {
+    form.setValue('photo', null, { shouldDirty: true });
+    setPhotoRemoved(true);
+  }, [form]);
+
+  const handleAddUser = useCallback(
+    async (formData: UserFormData) => {
+      const userEmail = formData.email;
+
+      try {
+        await createAccountUser.mutateAsync({
+          name: formData.name,
+          email: formData.email,
+          profile: formData.profile,
+          language: 'pt-br',
+          last_name: formData.lastName || '',
+          ddi: '55',
+          gender: formData.gender,
+          phone: formData.phone,
+          photo: formData.photo,
+          projects: getProjectsForSubmit(formData),
+          receive_sms: formData.receiveSms,
+          receive_email: formData.receiveEmail,
+        });
+      } catch (error) {
+        toast.custom(
+          (toastId) => (
+            <Toast
+              toastId={toastId}
+              variant="error"
+              message={error instanceof Error ? error.message : translateSheet('createError')}
+            />
+          ),
+          { duration: 5000 }
+        );
+        return;
+      }
+
+      handleClose();
+
+      toast.custom(
+        (toastId) => (
+          <Toast toastId={toastId}>
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <div
+                className={cn(
+                  'size-10 rounded-lg flex items-center justify-center shrink-0',
+                  isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+                )}
+              >
+                <IconMail size={20} className={isDefaultWhitelabel ? 'text-cyan-500' : 'text-zinc-500'} />
+              </div>
+              <p className="flex-1 text-zinc-600 paragraph-small-medium">
+                {translateSheet('inviteSent', { userEmail })}
+              </p>
+              <Button
+                variant="ghost"
+                className="size-8 rounded-full shrink-0"
+                onClick={() => toast.dismiss(toastId)}
+              >
+                <IconX size={18} />
+              </Button>
+            </div>
+          </Toast>
+        ),
+        { duration: 5000 }
+      );
+    },
+    [createAccountUser, getProjectsForSubmit, handleClose, isDefaultWhitelabel, translateSheet]
+  );
+
+  const handleSaveChanges = useCallback(
+    async (formData: UserFormData) => {
+      const userName = formData.name;
+      const dirtyFields = form.formState.dirtyFields;
+      const userFieldsChanged =
+        !!dirtyFields.name ||
+        !!dirtyFields.lastName ||
+        !!dirtyFields.email ||
+        !!dirtyFields.phone ||
+        !!dirtyFields.profile ||
+        !!dirtyFields.photo ||
+        !!dirtyFields.gender ||
+        !!dirtyFields.receiveSms ||
+        !!dirtyFields.receiveEmail ||
+        formData.photo instanceof File;
+
+      let updateError: unknown = null;
+      if (userFieldsChanged) {
+        try {
+          await updateAccountUser.mutateAsync({
+            userId: initialData!.id,
+            name: formData.name,
+            email: formData.email,
+            profile: formData.profile,
+            language: 'pt-br',
+            last_name: formData.lastName || '',
+            ddi: '55',
+            gender: formData.gender,
+            phone: formData.phone,
+            ...(formData.photo instanceof File ? { photo: formData.photo } : {}),
+            receive_sms: formData.receiveSms,
+            receive_email: formData.receiveEmail,
+          });
+        } catch (error) {
+          updateError = error;
+        }
+      }
+
+      const targetProjectIds = new Set(getProjectsForSubmit(formData));
+      const initialProjectIds = new Set(initialData?.projects?.map((project) => project.id) || []);
+      const allProjects = projectsData?.data || [];
+
+      const projectsToAdd = [...targetProjectIds].filter((id) => !initialProjectIds.has(id));
+      const projectsToRemove = [...initialProjectIds].filter((id) => !targetProjectIds.has(id));
+
+      let projectsError: unknown = null;
+      try {
+        await Promise.all([
+          addUserProjects.mutateAsync({
+            userId: initialData!.id,
+            projects: projectsToAdd.map((id) => ({
+              id,
+              title: allProjects.find((project) => project.id === id)?.title || '',
+            })),
+          }),
+          removeUserProjects.mutateAsync({ userId: initialData!.id, projectIds: projectsToRemove }),
+        ]);
+      } catch (error) {
+        projectsError = error;
+      }
+
+      const firstError = updateError ?? projectsError;
+      if (firstError) {
+        toast.custom(
+          (toastId) => (
+            <Toast
+              toastId={toastId}
+              variant="error"
+              message={firstError instanceof Error ? firstError.message : translateSheet('updateError')}
+            />
+          ),
+          { duration: 5000 }
+        );
+        return;
+      }
+
+      handleClose();
+
+      toast.custom(
+        (toastId) => (
+          <Toast toastId={toastId}>
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <div className="size-10 rounded-lg flex items-center justify-center shrink-0 bg-green-50">
+                <IconCheck size={20} className="text-green-500" />
+              </div>
+              <p className="flex-1 text-zinc-600 paragraph-small-medium">
+                {translateSheet('changesSaved', { userName })}
+              </p>
+              <Button
+                variant="ghost"
+                className="size-8 rounded-full shrink-0"
+                onClick={() => toast.dismiss(toastId)}
+              >
+                <IconX size={18} />
+              </Button>
+            </div>
+          </Toast>
+        ),
+        { duration: 5000 }
+      );
+    },
+    [
+      addUserProjects,
+      form,
+      getProjectsForSubmit,
+      handleClose,
+      initialData,
+      projectsData,
+      removeUserProjects,
+      translateSheet,
+      updateAccountUser,
+    ]
+  );
+
+  const onSubmit = useCallback(
+    async (data: UserFormData) => {
+      if (isEditMode) {
+        await handleSaveChanges(data);
+      } else if (currentStep === 1) {
+        if (isCheckingEmail || emailExistsError) return;
+        setCurrentStep(2);
+      } else {
+        await handleAddUser(data);
+      }
+    },
+    [currentStep, emailExistsError, handleAddUser, handleSaveChanges, isCheckingEmail, isEditMode]
+  );
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={handleClose}>
+        <SheetContent
+          side={isMobile ? 'bottom' : 'right'}
+          className={cn(
+            'gap-0 overflow-hidden',
+            isMobile
+              ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+              : 'h-screen max-w-[480px]! w-[480px]!',
+            'data-[state=open]:max-h-none data-[state=open]:h-dvh'
+          )}
+        >
+          <FormProvider {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 overflow-hidden">
+              <SheetHeader className={cn('border-b border-zinc-200', isEditMode && 'border-b-0')}>
+                <SheetTitle className="text-zinc-950 paragraph-medium-semibold">
+                  {isEditMode ? translateSheet('titleEdit') : translateSheet('titleAdd')}
+                </SheetTitle>
+              </SheetHeader>
+
+              {!isEditMode && (
+                <div className="h-1 bg-zinc-100 w-full">
+                  <div
+                    className="h-full transition-all duration-300 ease-in-out bg-primary"
+                    style={{ width: currentStep === 1 ? '50%' : '100%' }}
+                  />
+                </div>
+              )}
+
+              {isEditMode ? (
+                <Tabs defaultValue="information" className="flex flex-col flex-1 overflow-hidden">
+                  <TabsList className="flex gap-1.5 px-5 pt-3 border-b border-zinc-200 bg-transparent h-auto justify-start">
+                    <TabsTrigger value="information" className={tabTriggerClasses}>
+                      <IconUser size={16} />
+                      <span className="paragraph-small-semibold">{translateSheet('tabInformation')}</span>
+                    </TabsTrigger>
+                    <TabsTrigger value="projects" className={tabTriggerClasses}>
+                      <IconStack2 size={16} />
+                      <span className="paragraph-small-medium">{translateSheet('tabProjects')}</span>
+                    </TabsTrigger>
+                    <TabsTrigger value="notifications" className={tabTriggerClasses}>
+                      <IconBell size={16} />
+                      <span className="paragraph-small-medium">{translateSheet('tabNotifications')}</span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="information" className="flex-1 overflow-y-auto mt-0 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+                    <UserInformationStep
+                      mode={mode}
+                      photoPreview={photoPreview}
+                      onPhotoChange={handlePhotoChange}
+                      onRemovePhoto={handleRemovePhoto}
+                      isOwnProfile={isOwnProfile}
+                      canEditUser={canEditUser}
+                      canChangeProfile={canChangeProfile}
+                      targetUser={initialData}
+                      twoFactorEnabled={twoFactorEnabled}
+                      onTwoFactorChange={setTwoFactorEnabled}
+                      onOpenChangePhone={() => setShowChangePhone(true)}
+                      onOpenChangeEmail={() => setShowChangeEmail(true)}
+                      onOpenTwoFactor={() =>
+                        twoFactorEnabled ? setShowDisableTwoFactor(true) : setShowTwoFactor(true)
+                      }
+                      onOpenChangePassword={() => setShowChangePassword(true)}
+                      onProfileChange={handleProfileChange}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value="projects" className="flex-1 overflow-y-auto mt-0 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+                    <ProjectSelectionStep mode="edit" readOnly={!canEditUser || !canManageUsers} />
+                  </TabsContent>
+
+                  <TabsContent value="notifications" className="flex-1 overflow-y-auto mt-0 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+                    <NotificationsStep readOnly={!isOwnProfile && !canEditUser} />
+                  </TabsContent>
+                </Tabs>
+              ) : (
+                <div className="flex-1 overflow-y-auto">
+                  {currentStep === 1 && (
+                    <UserInformationStep
+                      mode={mode}
+                      photoPreview={photoPreview}
+                      onPhotoChange={handlePhotoChange}
+                      onRemovePhoto={handleRemovePhoto}
+                      emailExistsError={emailExistsError}
+                      isCheckingEmail={isCheckingEmail}
+                      onEmailExistsError={setEmailExistsError}
+                      onEmailChecking={setIsCheckingEmail}
+                      onProfileChange={handleProfileChange}
+                    />
+                  )}
+                  {currentStep === 2 && <ProjectSelectionStep mode="add" />}
+                </div>
+              )}
+
+              {isEditMode ? (
+                <SheetFooter className="flex-row items-center justify-between border-t border-zinc-200 gap-2">
+                  <Button
+                    variant="secondary"
+                    className="h-10!"
+                    type="button"
+                    onClick={handleClose}
+                    disabled={isSubmitting}
+                  >
+                    {translate('common.actions.cancel')}
+                  </Button>
+                  <Button
+                    className="h-10!"
+                    type="submit"
+                    disabled={!form.formState.isDirty || !canEditUser}
+                    loading={isSubmitting}
+                  >
+                    {isSubmitting ? translateSheet('saving') : translateSheet('saveChanges')}
+                  </Button>
+                </SheetFooter>
+              ) : (
+                <>
+                  {currentStep === 1 && (
+                    <SheetFooter className="flex-row items-center justify-between border-t border-zinc-200 gap-2">
+                      <Button
+                        variant="secondary"
+                        className="h-10!"
+                        type="button"
+                        onClick={handleClose}
+                        disabled={isSubmitting}
+                      >
+                        {translate('common.actions.cancel')}
+                      </Button>
+                      <Button className="h-10!" type="submit" loading={isSubmitting} disabled={!canContinue}>
+                        {translate('common.actions.continue')}
+                      </Button>
+                    </SheetFooter>
+                  )}
+
+                  {currentStep === 2 && (
+                    <SheetFooter className="flex-row items-center justify-between border-t border-zinc-200 gap-2">
+                      <Button
+                        variant="secondary"
+                        className="h-10!"
+                        type="button"
+                        onClick={() => setCurrentStep(1)}
+                        disabled={isSubmitting}
+                      >
+                        {translate('common.actions.back')}
+                      </Button>
+                      <div className="flex items-center gap-3">
+                        <span className="text-zinc-500 paragraph-small-regular">
+                          {selectedCount}{' '}
+                          {selectedCount === 1 ? translateSheet('selectedOne') : translateSheet('selectedMany')}
+                        </span>
+                        <Button
+                          className="h-10!"
+                          type="submit"
+                          disabled={selectedCount === 0}
+                          loading={isSubmitting}
+                        >
+                          {isSubmitting ? translateSheet('sending') : translateSheet('sendInvite')}
+                        </Button>
+                      </div>
+                    </SheetFooter>
+                  )}
+                </>
+              )}
+            </form>
+          </FormProvider>
+        </SheetContent>
+      </Sheet>
+
+      {/* Input escondido: só serve de gatilho do "Enviar outra" do ImageCropModal. */}
+      <input
+        ref={selectAnotherInputRef}
+        type="file"
+        accept={ACCEPTED_IMAGE_FORMATS_STRING}
+        className="hidden"
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) handleFileSelect(file);
+          event.target.value = '';
+        }}
+      />
+
+      {originalImage && (
+        <ImageCropModal
+          open={showCropModal}
+          onOpenChange={setShowCropModal}
+          imageSrc={originalImage}
+          aspectRatio={USER_AVATAR_CONFIG.aspectRatio}
+          onConfirm={handleCropConfirm}
+          minWidth={USER_AVATAR_CONFIG.width}
+          minHeight={USER_AVATAR_CONFIG.height}
+          fileName={fileName}
+          onSelectAnother={() => selectAnotherInputRef.current?.click()}
+        />
+      )}
+
+      <ChangePhoneModal open={showChangePhone} onClose={() => setShowChangePhone(false)} />
+      <ChangeEmailModal open={showChangeEmail} onClose={() => setShowChangeEmail(false)} />
+      <TwoFactorAuthModal
+        open={showTwoFactor}
+        onClose={() => setShowTwoFactor(false)}
+        onSuccess={() => {
+          setTwoFactorEnabled(true);
+          invalidateUser();
+          setShowTwoFactor(false);
+        }}
+      />
+      <DisableTwoFactorAuthModal
+        open={showDisableTwoFactor}
+        onClose={() => setShowDisableTwoFactor(false)}
+        onSuccess={() => {
+          setTwoFactorEnabled(false);
+          invalidateUser();
+          setShowDisableTwoFactor(false);
+        }}
+      />
+      <Dialog open={showChangePassword} onOpenChange={setShowChangePassword}>
+        <DialogContent
+          showCloseButton={false}
+          className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden"
+        >
+          <ChangePasswordSection onBack={() => setShowChangePassword(false)} />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+/**
+ * Sheet de cadastro e edição de usuário, aberto por cima do modal Minha conta.
+ * Mantém o último estado enquanto fecha para não perder o conteúdo durante a animação.
+ */
+export function UserSheet() {
+  const sheet = useTeamFlows((state) => state.sheet);
+  const closeUserSheet = useTeamFlows((state) => state.closeUserSheet);
+  const [lastSheet, setLastSheet] = useState<UserSheetState>(sheet);
+
+  useEffect(() => {
+    if (sheet) setLastSheet(sheet);
+  }, [sheet]);
+
+  if (!lastSheet) return null;
+
+  return (
+    <UserSheetContent
+      key={lastSheet.mode === 'edit' ? `edit-${lastSheet.user.id}` : 'add'}
+      open={!!sheet}
+      mode={lastSheet.mode}
+      initialData={lastSheet.mode === 'edit' ? lastSheet.user : undefined}
+      onClose={closeUserSheet}
+    />
+  );
+}