@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/projects/project-form.schema.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod';
+import { UserProfile } from '../../../../modules/users/schema';
+
+const projectUsersSchema = z.array(
+  z.object({
+    id: z.number(),
+    name: z.string(),
+    email: z.string(),
+    profile: z.enum([
+      UserProfile.owner,
+      UserProfile.admin,
+      UserProfile.collaborator,
+      UserProfile.viewer,
+    ]),
+    initials: z.string().optional(),
+    photo: z.string().nullable().optional(),
+  })
+);
+
+/** `nameRequired` já vem traduzido — o schema é montado dentro do componente com `useMemo`. */
+export function buildProjectFormSchema(nameRequired: string) {
+  return z.object({
+    name: z.string().min(1, nameRequired),
+    logo: z.string().nullable().optional(),
+    users: projectUsersSchema,
+  });
+}
+
+export type ProjectFormData = z.infer<ReturnType<typeof buildProjectFormSchema>>;
+export type ProjectFormUser = ProjectFormData['users'][number];

package/src/components/account/sections/shared/ConnectListRow.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { IconPlus } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Badge } from '../../../ui/data-display/Badge';
+import { Button } from '../../../ui/buttons/Button';
+import { cn } from '../../../../infra/utils/clsx';
+import { EntityAvatar } from './EntityAvatar';
+
+type ConnectListRowProps = {
+  name: string;
+  photo?: string | null;
+  /** Etiqueta à direita do nome (o perfil, nas listas de usuário). */
+  badge?: string;
+  hideBorder?: boolean;
+  /** `selected` é o que já está vinculado: fundo cinza e ação de remover. */
+  variant?: 'default' | 'selected';
+  onAction?: () => void;
+  showAction?: boolean;
+};
+
+/**
+ * Linha de vínculo dos sheets da conta: usuários no sheet de projeto e projetos no sheet de usuário.
+ * Mesmo formato das listas de conectar/remover das telas de projetos e equipe.
+ */
+export function ConnectListRow({
+  name,
+  photo,
+  badge,
+  hideBorder = false,
+  variant = 'default',
+  onAction,
+  showAction = true,
+}: ConnectListRowProps) {
+  const translate = useTranslations();
+  const isSelected = variant === 'selected';
+
+  return (
+    <div
+      className={cn(
+        'px-4 py-4 flex items-center justify-between w-full gap-4',
+        isSelected && 'bg-zinc-50',
+        !hideBorder && 'border-b border-zinc-200'
+      )}
+    >
+      <EntityAvatar name={name} photo={photo} />
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="text-zinc-950 paragraph-small-semibold truncate">{name}</span>
+        {badge && (
+          <Badge className="text-zinc-600 paragraph-xsmall-semibold rounded-lg border border-zinc-200 bg-white">
+            {badge}
+          </Badge>
+        )}
+      </div>
+      {showAction &&
+        (isSelected ? (
+          <Button variant="ghost" className="h-10! text-zinc-600" type="button" onClick={onAction}>
+            {translate('common.actions.remove')}
+          </Button>
+        ) : (
+          <Button variant="secondary" className="h-10! shrink-0" type="button" onClick={onAction}>
+            <IconPlus size={20} />
+            {translate('common.actions.connect')}
+          </Button>
+        ))}
+    </div>
+  );
+}

package/src/components/account/sections/shared/DateFilterPopover.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import { IconChevronDown } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/overlay/Popover';
+import { NavBarItem } from '../../../layouts/NavBarItem';
+import { cn } from '../../../../infra/utils/clsx';
+import { DATE_FILTER_PERIODS, DateFilterPeriod } from '../../../../enums/DateFilterPeriod';
+
+const PERIOD_KEYS = {
+  [DateFilterPeriod.TODAY]: 'today',
+  [DateFilterPeriod.YESTERDAY]: 'yesterday',
+  [DateFilterPeriod.LAST_7_DAYS]: 'last7Days',
+  [DateFilterPeriod.LAST_30_DAYS]: 'last30Days',
+  [DateFilterPeriod.LAST_MONTH]: 'lastMonth',
+  [DateFilterPeriod.ALL_TIME]: 'allTime',
+} as const satisfies Record<DateFilterPeriod, string>;
+
+type DateFilterPopoverProps = {
+  selectedPeriod: DateFilterPeriod;
+  onSelectPeriod: (period: DateFilterPeriod) => void;
+};
+
+export function DateFilterPopover({ selectedPeriod, onSelectPeriod }: DateFilterPopoverProps) {
+  const translatePeriod = useTranslations('common.account.workspace.dateFilter');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="paragraph-small-regular text-zinc-600 gap-2 h-10!">
+          {translatePeriod(PERIOD_KEYS[selectedPeriod])}
+          <IconChevronDown size={16} className={cn('transition-transform duration-200', open && 'rotate-180')} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className="w-[200px] p-0 bg-white rounded-2xl shadow-md border border-zinc-200"
+      >
+        <div className="flex flex-col p-1.5 rounded-2xl">
+          {DATE_FILTER_PERIODS.map((period) => (
+            <NavBarItem
+              key={period}
+              label={translatePeriod(PERIOD_KEYS[period])}
+              onClick={() => {
+                onSelectPeriod(period);
+                setOpen(false);
+              }}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/account/sections/shared/EntityAvatar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '../../../../infra/utils/clsx';
+import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { getInitials } from '../../../../utils/format/initials';
+
+const STORAGE_URL = process.env.NEXT_PUBLIC_STORAGE_URL || '';
+
+type EntityAvatarProps = {
+  name?: string | null;
+  photo?: string | null;
+  /** Iniciais vindas da API; sem elas, derivadas do nome. */
+  initials?: string | null;
+  /** `neutral` segue o UserAvatar (listas de projetos e equipe); `brand` usa a cor do whitelabel (pilha de membros). */
+  tone?: 'neutral' | 'brand';
+  className?: string;
+};
+
+/** Avatar redondo de 32px com foto ou iniciais. Foto que não carrega cai nas iniciais em vez da imagem quebrada. */
+export function EntityAvatar({ name, photo, initials, tone = 'neutral', className }: EntityAvatarProps) {
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+
+  const src = photo ? (STORAGE_URL && !photo.startsWith('http') ? `${STORAGE_URL}/${photo}` : photo) : null;
+
+  if (src && failedSrc !== src) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={src}
+        alt={name ?? ''}
+        className={cn('size-8 rounded-full object-cover shrink-0 bg-gray-100', className)}
+        onError={() => setFailedSrc(src)}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'size-8 rounded-full flex items-center justify-center shrink-0',
+        tone === 'brand'
+          ? isDefaultWhitelabel
+            ? 'bg-cyan-50 text-cyan-700'
+            : 'bg-zinc-50 text-zinc-700'
+          : 'bg-gray-100 text-gray-700',
+        className
+      )}
+    >
+      <span className="text-xs font-semibold">{initials || getInitials(name) || '?'}</span>
+    </div>
+  );
+}

package/src/components/account/sections/shared/FilterPopover.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useId } from 'react';
+import { IconFilter } from '@tabler/icons-react';
+import { Button } from '../../../ui/buttons/Button';
+import { Checkbox } from '../../../ui/form/Checkbox';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/overlay/Popover';
+import { cn } from '../../../../infra/utils/clsx';
+
+export type FilterOption<T extends string | number> = {
+  value: T;
+  label: string;
+  /** Ponto colorido à esquerda do rótulo (ex.: `bg-green-500`), usado nos filtros de status. */
+  color?: string;
+};
+
+type FilterPopoverProps<T extends string | number> = {
+  label: string;
+  options: FilterOption<T>[];
+  selected: T[];
+  onToggle: (value: T, checked: boolean) => void;
+  width?: number;
+};
+
+export function FilterPopover<T extends string | number>({
+  label,
+  options,
+  selected,
+  onToggle,
+  width = 220,
+}: FilterPopoverProps<T>) {
+  const baseId = useId();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="h-10! gap-2 shrink-0" aria-label={label}>
+          <IconFilter size={20} className="text-zinc-500" />
+          <span className="hidden lg:block">{label}</span>
+          {selected.length > 0 && (
+            <span className="flex justify-center items-center size-5 rounded-full border border-zinc-200 bg-white paragraph-xsmall-semibold text-zinc-950">
+              {selected.length}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="py-2 px-4 bg-white rounded-2xl shadow-none border border-zinc-200"
+        style={{ width }}
+        sideOffset={8}
+        align="end"
+      >
+        <div className="flex flex-col">
+          {options.map((option) => {
+            const id = `${baseId}-filter-${option.value}`;
+
+            return (
+              <label
+                key={option.value}
+                htmlFor={id}
+                className="flex justify-between py-2.5 cursor-pointer hover:bg-zinc-50 transition-colors rounded-lg px-2 -mx-2"
+              >
+                <span className="flex items-center gap-2 paragraph-small-medium text-zinc-950">
+                  {option.color && <span className={cn('size-2 rounded-full shrink-0', option.color)} />}
+                  {option.label}
+                </span>
+                <Checkbox
+                  id={id}
+                  checked={selected.includes(option.value)}
+                  onCheckedChange={(checked) => onToggle(option.value, checked === true)}
+                />
+              </label>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/account/sections/shared/FormSection.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+type FormSectionProps = {
+  title: string;
+  description: string;
+  children: ReactNode;
+};
+
+/**
+ * Seção de formulário do modal Minha conta: título e descrição à esquerda, conteúdo à direita.
+ * No mobile as duas colunas empilham.
+ */
+export function FormSection({ title, description, children }: FormSectionProps) {
+  return (
+    <section className="grid gap-4 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-12">
+      <div className="flex flex-col gap-1">
+        <span className="paragraph-medium-semibold text-gray-950">{title}</span>
+        <span className="paragraph-small-regular text-gray-500">{description}</span>
+      </div>
+      <div className="flex flex-col gap-6 min-w-0">{children}</div>
+    </section>
+  );
+}

package/src/components/account/sections/shared/IconBox.tsx

@@ -0,0 +1,21 @@
+import type { TablerIcon } from '@tabler/icons-react';
+import { cn } from '../../../../infra/utils/clsx';
+
+type IconBoxProps = {
+  icon: TablerIcon;
+  className?: string;
+  iconClassName?: string;
+};
+
+export function IconBox({ icon: Icon, className, iconClassName }: IconBoxProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center size-10 bg-white rounded-lg shrink-0 shadow-sm',
+        className
+      )}
+    >
+      <Icon size={20} className={cn('text-zinc-950', iconClassName)} strokeWidth={2} />
+    </div>
+  );
+}

package/src/components/account/sections/shared/InfiniteScrollList.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect, useRef, type HTMLAttributes, type UIEvent } from 'react';
+
+type InfiniteScrollListProps = Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> & {
+  hasMore: boolean;
+  isLoadingMore: boolean;
+  onLoadMore: () => void;
+  /** Distância do fim, em px, que dispara a próxima página. */
+  threshold?: number;
+  onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+};
+
+/**
+ * Lista que pede a próxima página quando o fim entra em cena.
+ *
+ * A checagem é por sentinela, e não pelo `scrollTop` da própria lista: assim ela funciona tanto
+ * com rolagem própria quanto quando quem rola é a coluna em volta — o que evita ter de encaixar
+ * uma ilha de rolagem dentro de outra só para a paginação continuar viva.
+ */
+export function InfiniteScrollList({
+  hasMore,
+  isLoadingMore,
+  onLoadMore,
+  threshold = 40,
+  onScroll,
+  children,
+  ...rest
+}: InfiniteScrollListProps) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  // Ref para o observer não ser recriado a cada render só porque o callback mudou de identidade.
+  const loadMoreRef = useRef(onLoadMore);
+  loadMoreRef.current = onLoadMore;
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !hasMore || isLoadingMore) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) loadMoreRef.current();
+      },
+      { rootMargin: `0px 0px ${threshold}px 0px` }
+    );
+
+    observer.observe(sentinel);
+
+    return () => observer.disconnect();
+  }, [hasMore, isLoadingMore, threshold]);
+
+  return (
+    <div {...rest} onScroll={onScroll}>
+      {children}
+      <div ref={sentinelRef} aria-hidden className="h-px w-full shrink-0" />
+    </div>
+  );
+}

package/src/components/account/sections/shared/ListPagination.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { cn } from '../../../../infra/utils/clsx';
+
+type ListPaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+};
+
+/** Páginas visíveis: primeira, vizinhas da atual e última, com reticências nos saltos. */
+function buildPages(currentPage: number, totalPages: number): (number | 'ellipsis')[] {
+  const pages: (number | 'ellipsis')[] = [1];
+
+  if (currentPage > 3) pages.push('ellipsis');
+
+  for (let page = Math.max(2, currentPage - 1); page <= Math.min(totalPages - 1, currentPage + 1); page++) {
+    if (!pages.includes(page)) pages.push(page);
+  }
+
+  if (currentPage < totalPages - 2) pages.push('ellipsis');
+  if (totalPages > 1 && !pages.includes(totalPages)) pages.push(totalPages);
+
+  return pages;
+}
+
+export function ListPagination({ currentPage, totalPages, onPageChange }: ListPaginationProps) {
+  const translate = useTranslations();
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        type="button"
+        aria-label={translate('common.account.workspace.pagination.previous')}
+        onClick={() => onPageChange(currentPage - 1)}
+        className="size-8 flex items-center justify-center rounded-lg text-zinc-600 hover:bg-zinc-100 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        disabled={currentPage === 1}
+      >
+        <IconChevronLeft size={24} />
+      </button>
+
+      <div className="flex items-center gap-1.5">
+        {buildPages(currentPage, totalPages).map((page, index) =>
+          page === 'ellipsis' ? (
+            <span
+              key={`ellipsis-${index}`}
+              className="h-8 min-w-8 px-1.5 flex items-center justify-center paragraph-small-semibold text-zinc-600"
+            >
+              ...
+            </span>
+          ) : (
+            <button
+              key={page}
+              type="button"
+              onClick={() => onPageChange(page)}
+              className={cn(
+                'h-8 min-w-8 px-1.5 flex items-center justify-center rounded-lg paragraph-small-semibold transition-colors cursor-pointer',
+                currentPage === page
+                  ? 'bg-white border border-zinc-200 text-zinc-950'
+                  : 'text-zinc-600 hover:bg-zinc-100'
+              )}
+            >
+              {page}
+            </button>
+          )
+        )}
+      </div>
+
+      <button
+        type="button"
+        aria-label={translate('common.account.workspace.pagination.next')}
+        onClick={() => onPageChange(currentPage + 1)}
+        className="size-8 flex items-center justify-center rounded-lg bg-white border border-zinc-200 text-zinc-600 hover:bg-zinc-100 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        disabled={currentPage === totalPages}
+      >
+        <IconChevronRight size={24} />
+      </button>
+    </div>
+  );
+}

package/src/components/account/sections/shared/RowActionsMenu.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { IconDotsVertical } from '@tabler/icons-react';
+import { Button } from '../../../ui/buttons/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/overlay/Popover';
+import { NavBarItem } from '../../../layouts/NavBarItem';
+import { cn } from '../../../../infra/utils/clsx';
+
+export type RowActionsMenuItem = {
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+  destructive?: boolean;
+};
+
+type RowActionsMenuProps = {
+  items: RowActionsMenuItem[];
+  width?: number;
+  className?: string;
+};
+
+/** Menu ⋮ das linhas e cards das abas do modal Minha conta. */
+export function RowActionsMenu({ items, width = 160, className }: RowActionsMenuProps) {
+  const [open, setOpen] = useState(false);
+
+  if (items.length === 0) return null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-lg"
+          className={cn('size-10 hover:bg-zinc-100 rounded-lg', className)}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <IconDotsVertical size={20} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className="p-0 bg-white rounded-2xl shadow-none border border-zinc-200"
+        style={{ width }}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex flex-col gap-0.5 p-1.5 rounded-xl">
+          {items.map((item) => (
+            <NavBarItem
+              key={item.label}
+              icon={item.icon}
+              label={item.label}
+              className={item.destructive ? 'hover:bg-red-50' : undefined}
+              labelClassName={item.destructive ? 'text-red-600' : undefined}
+              onClick={() => {
+                setOpen(false);
+                item.onClick();
+              }}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/account/sections/shared/SectionLoadError.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { IconBox } from './IconBox';
+
+type SectionLoadErrorProps = {
+  message: string;
+  onRetry: () => void;
+};
+
+export function SectionLoadError({ message, onRetry }: SectionLoadErrorProps) {
+  const translate = useTranslations();
+
+  return (
+    <div className="flex flex-col justify-between gap-6 p-5 lg:p-6 bg-zinc-50 rounded-lg">
+      <div className="flex items-center gap-4">
+        <IconBox icon={IconAlertTriangle} />
+        <span className="paragraph-medium-semibold text-zinc-950">{message}</span>
+      </div>
+      <Button variant="secondary" onClick={onRetry} className="w-fit h-10!">
+        {translate('common.account.workspace.loadFailedRetry')}
+      </Button>
+    </div>
+  );
+}

package/src/components/account/sections/shared/StatusBadge.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../../../infra/utils/clsx';
+
+export type StatusBadgeTone = 'neutral' | 'blue' | 'green' | 'yellow' | 'red';
+
+const TONE_CLASSES: Record<StatusBadgeTone, string> = {
+  neutral: 'bg-zinc-50 border-zinc-100 text-zinc-500',
+  blue: 'bg-blue-50 border-blue-100 text-blue-600',
+  green: 'bg-green-50 border-green-100 text-green-600',
+  yellow: 'bg-yellow-50 border-yellow-100 text-yellow-600',
+  red: 'bg-red-50 border-red-100 text-red-600',
+};
+
+type StatusBadgeProps = {
+  tone?: StatusBadgeTone;
+  className?: string;
+  children: ReactNode;
+};
+
+/** Badge de status no padrão dos apps: `rounded-md`, 12px semibold e par de cor 50/100. */
+export function StatusBadge({ tone = 'neutral', className, children }: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center gap-1 px-1.5 py-1 rounded-md border paragraph-xsmall-semibold whitespace-nowrap w-fit',
+        TONE_CLASSES[tone],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/account/sections/shared/WorkspaceSection.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { useSectionCount } from '../../AccountModalLayout';
+
+type WorkspaceSectionProps = {
+  /** Total de registros mostrado ao lado do título no topo do modal. */
+  count?: number;
+  children: ReactNode;
+};
+
+/**
+ * Área rolável de uma aba do modal Minha conta. Os filhos não encolhem: numa coluna flex de altura
+ * fixa, uma lista com overflow-hidden seria espremida e cortaria as últimas linhas.
+ */
+export function WorkspaceSection({ count, children }: WorkspaceSectionProps) {
+  useSectionCount(count);
+
+  return (
+    <div className="h-full overflow-y-auto overscroll-contain [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 px-4 py-5 pb-20 lg:px-8 lg:py-6 flex flex-col gap-5 lg:gap-8 *:shrink-0">
+      {children}
+    </div>
+  );
+}