@greatapps/common 1.1.789 → 1.1.791

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { IconTrash, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Toast } from '../../../ui/feedback/Toast';
+import { FormField } from '../../../ui/form/FormField';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../../ui/overlay/Dialog';
+import { useDeleteConfirmation } from '../../../../modules/cards/hooks/delete-confirmation.hook';
+import { useDeleteAccountUser } from '../../../../modules/accounts/hooks/useAccountManagement';
+import { useTeamFlows } from '../../../../store/useTeamFlows';
+
+/** Exclusão de usuário da conta, confirmada digitando EXCLUIR. */
+export function DeleteUserModal() {
+  const translate = useTranslations();
+  const translateModal = useTranslations('common.account.workspace.team.deleteModal');
+  const userToDelete = useTeamFlows((state) => state.userToDelete);
+  const closeDeleteUser = useTeamFlows((state) => state.closeDeleteUser);
+  const deleteAccountUser = useDeleteAccountUser();
+
+  const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation({
+    confirmWord: translateModal('deleteWord'),
+  });
+
+  const handleClose = () => {
+    resetConfirmation();
+    closeDeleteUser();
+  };
+
+  const onSubmit = async () => {
+    if (!userToDelete) return;
+
+    try {
+      await deleteAccountUser.mutateAsync(userToDelete.id);
+    } catch (error) {
+      toast.custom(
+        (toastId) => (
+          <Toast
+            toastId={toastId}
+            variant="error"
+            message={error instanceof Error ? error.message : translateModal('deleteError')}
+          />
+        ),
+        { duration: 5000 }
+      );
+      return;
+    }
+
+    const userEmail = userToDelete.email;
+    resetConfirmation();
+    closeDeleteUser();
+
+    toast.custom(
+      (toastId) => (
+        <Toast toastId={toastId}>
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <p className="flex-1 text-zinc-600 paragraph-small-medium">
+              {translateModal('deleted', { userEmail })}
+            </p>
+            <Button
+              variant="ghost"
+              className="size-8 rounded-full shrink-0"
+              onClick={() => toast.dismiss(toastId)}
+            >
+              <IconX size={18} />
+            </Button>
+          </div>
+        </Toast>
+      ),
+      { duration: 5000 }
+    );
+  };
+
+  return (
+    <Dialog open={!!userToDelete} onOpenChange={handleClose}>
+      <DialogContent className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[410px]! rounded-lg border">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
+          <DialogHeader className="gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0">
+            <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+              <IconTrash size={20} className="text-red-500" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                {translateModal('title')}
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-zinc-600">
+                {translateModal('description', { userName: userToDelete?.name ?? '' })}
+              </DialogDescription>
+            </div>
+          </DialogHeader>
+
+          <div className="px-4 lg:px-5 py-5">
+            <FormField
+              label={translateModal('typeDelete')}
+              required
+              placeholder={translateModal('deleteWord')}
+              {...form.register('confirmText')}
+            />
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-5">
+            <Button
+              type="submit"
+              disabled={!isValidConfirmation}
+              loading={form.formState.isSubmitting}
+              className="h-10! flex-1"
+            >
+              {form.formState.isSubmitting ? translateModal('deletingUser') : translateModal('deleteUser')}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10! flex-1"
+              onClick={handleClose}
+              disabled={form.formState.isSubmitting}
+            >
+              {translate('common.actions.cancel')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { DeleteUserModal } from './DeleteUserModal';
+import { UserSheet } from './UserSheet';
+
+/** Fluxos da aba Minha equipe, abertos por cima do modal Minha conta. */
+export function TeamFlows() {
+  return (
+    <>
+      <UserSheet />
+      <DeleteUserModal />
+    </>
+  );
+}

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

@@ -0,0 +1,151 @@
+'use client';
+
+import type { MouseEvent } from 'react';
+import { IconPencil, IconShieldCheck, IconTrash } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';
+import { useAuth } from '../../../../providers/auth.provider';
+import { useManagementPermissions } from '../../../../modules/auth/hooks/useManagementPermissions';
+import { UserProfile, type User } from '../../../../modules/users/schema';
+import { EntityAvatar } from '../shared/EntityAvatar';
+import { RowActionsMenu, type RowActionsMenuItem } from '../shared/RowActionsMenu';
+import { StatusBadge } from '../shared/StatusBadge';
+
+type TeamMemberRowProps = {
+  member: User;
+  onEdit: (member: User) => void;
+  onDelete: (member: User) => void;
+};
+
+function useTeamMemberRow({ member, onEdit, onDelete }: TeamMemberRowProps) {
+  const translate = useTranslations();
+  const translateProfile = useTranslations('common.account.workspace.team.profiles');
+  const { user: currentUser } = useAuth();
+  const { profile: currentProfile, isOwnerOrAdmin: canManage } = useManagementPermissions();
+
+  const isAdmin = member.profile === UserProfile.admin || member.profile === UserProfile.owner;
+  const isSelf = currentUser?.id === member.id;
+  const canDelete =
+    !isSelf &&
+    (currentProfile === UserProfile.owner ||
+      (currentProfile === UserProfile.admin && member.profile !== UserProfile.owner));
+
+  const deleteItem: RowActionsMenuItem = {
+    icon: <IconTrash size={20} className="text-zinc-400" />,
+    label: translate('common.account.workspace.team.delete'),
+    onClick: () => onDelete(member),
+  };
+  const menuItems: RowActionsMenuItem[] = canManage
+    ? [
+        {
+          icon: <IconPencil size={20} className="text-zinc-400" />,
+          label: translate('common.account.workspace.team.edit'),
+          onClick: () => onEdit(member),
+        },
+        ...(canDelete ? [deleteItem] : []),
+      ]
+    : [];
+
+  // Collaborator/viewer abrem o usuário em modo leitura clicando na linha, sem o menu de ações.
+  const handleRowClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (!currentProfile) return;
+    if ((event.target as HTMLElement).closest('[data-row-actions]')) return;
+    onEdit(member);
+  };
+
+  const fullName = [member.name, member.last_name].filter(Boolean).join(' ');
+
+  const projectsLabel =
+    member.total_projects === 0
+      ? translate('common.account.workspace.team.noProjects')
+      : member.total_projects === 1
+        ? translate('common.account.workspace.team.inProject', { total: String(member.total_projects) })
+        : translate('common.account.workspace.team.inProjects', { total: String(member.total_projects) });
+
+  const projectsBadge = <StatusBadge>{projectsLabel}</StatusBadge>;
+
+  const projectsInfo =
+    member.projects?.length > 0 ? (
+      <Tooltip>
+        <TooltipTrigger asChild>{projectsBadge}</TooltipTrigger>
+        <TooltipContent>
+          <p className="paragraph-xsmall-medium max-w-65 whitespace-pre-line">
+            {member.projects
+              .slice(0, 5)
+              .map((project) => project.title)
+              .join('\n')}
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    ) : (
+      projectsBadge
+    );
+
+  const identity = (
+    <div className="flex items-center gap-3 min-w-0">
+      <EntityAvatar name={member.name} photo={member.photo} initials={member.initials} />
+      <span className="paragraph-small-semibold text-zinc-600 truncate" title={fullName}>
+        {fullName}
+      </span>
+      {isAdmin && <IconShieldCheck size={16} className="text-zinc-400 shrink-0" />}
+      <StatusBadge className="bg-white border-zinc-200 text-zinc-600 shrink-0">
+        {translateProfile(member.profile)}
+      </StatusBadge>
+    </div>
+  );
+
+  return { canManage, canDelete, deleteItem, menuItems, handleRowClick, identity, projectsInfo, translate };
+}
+
+export function TeamMemberRow(props: TeamMemberRowProps) {
+  const { member } = props;
+  const { menuItems, handleRowClick, identity, projectsInfo } = useTeamMemberRow(props);
+
+  return (
+    <div
+      onClick={handleRowClick}
+      className="flex items-center gap-4 px-5 py-4 cursor-pointer hover:bg-zinc-50 transition-colors"
+    >
+      <div className="flex-1 min-w-0">{identity}</div>
+      <span className="w-64 shrink-0 truncate paragraph-small-regular text-zinc-600" title={member.email}>
+        {member.email}
+      </span>
+      <div className="w-36 shrink-0 flex justify-center">{projectsInfo}</div>
+      <div className="w-10 shrink-0" data-row-actions>
+        <RowActionsMenu items={menuItems} />
+      </div>
+    </div>
+  );
+}
+
+export function TeamMemberCard(props: TeamMemberRowProps) {
+  const { member, onEdit } = props;
+  const { canManage, canDelete, deleteItem, handleRowClick, identity, projectsInfo, translate } =
+    useTeamMemberRow(props);
+
+  return (
+    <div
+      onClick={handleRowClick}
+      className="flex flex-col gap-4 cursor-pointer rounded-lg border border-zinc-200 bg-white px-3 py-4"
+    >
+      <div className="flex items-center justify-between gap-3">
+        {identity}
+        <div data-row-actions>
+          <RowActionsMenu items={canManage && canDelete ? [deleteItem] : []} />
+        </div>
+      </div>
+      <div className="flex items-end justify-between gap-3">
+        <div className="flex flex-col gap-2 min-w-0">
+          <span className="paragraph-small-regular text-zinc-600 truncate">{member.email}</span>
+          <div>{projectsInfo}</div>
+        </div>
+        {canManage && (
+          <Button className="h-10! shrink-0" variant="secondary" data-row-actions onClick={() => onEdit(member)}>
+            {translate('common.account.workspace.team.edit')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}