@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/affiliates/reports/AffiliatesReportsTab.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { lazy, Suspense, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { Skeleton } from '../../../../ui/feedback/Skeleton';
+import { hideChartTooltip } from '../../../../../utils/browser/chart-custom-tooltip';
+import type { ReportAnalyticsData } from '../../../../../modules/affiliates/types/affiliate.type';
+import { useAffiliatesIndicatorsChart } from './useAffiliatesIndicatorsChart';
+
+const AffiliatesIndicatorsChart = lazy(() => import('./AffiliatesIndicatorsChart'));
+
+type AffiliatesReportsTabProps = {
+  report?: ReportAnalyticsData | null;
+  isLoading: boolean;
+};
+
+export function AffiliatesReportsTab({ report, isLoading }: AffiliatesReportsTabProps) {
+  const translate = useTranslations();
+  const chart = useAffiliatesIndicatorsChart(report);
+
+  useEffect(() => hideChartTooltip, []);
+
+  const chartSkeleton = <Skeleton className="h-[350px] w-full rounded-lg" />;
+
+  return (
+    <div className="flex flex-col w-full p-5 gap-8 rounded-lg border border-zinc-200 bg-white">
+      <span className="paragraph-small-regular text-zinc-600">
+        {translate('common.account.workspace.affiliates.chart.title')}
+      </span>
+      {isLoading ? (
+        chartSkeleton
+      ) : (
+        <Suspense fallback={chartSkeleton}>
+          <AffiliatesIndicatorsChart
+            data={chart.data}
+            options={chart.options}
+            plugins={chart.plugins}
+            legend={chart.legend}
+          />
+        </Suspense>
+      )}
+    </div>
+  );
+}

package/src/components/account/sections/affiliates/reports/useAffiliatesIndicatorsChart.ts

@@ -0,0 +1,148 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import type { Chart, ChartData, ChartOptions, Plugin } from 'chart.js';
+import { getCSSVariable } from '../../../../../utils/browser/get-css-variable';
+import { chartCustomTooltip } from '../../../../../utils/browser/chart-custom-tooltip';
+import type { ReportAnalyticsData } from '../../../../../modules/affiliates/types/affiliate.type';
+
+export type ChartLegendItem = {
+  label: string;
+  color: string;
+  dataKey: string;
+};
+
+export type AffiliatesIndicatorsChartConfig = {
+  data: ChartData<'line'>;
+  options: ChartOptions<'line'>;
+  plugins: Plugin<'line'>[];
+  legend: ChartLegendItem[];
+};
+
+function formatChartDate(isoDate: string): string {
+  const [, month, day] = isoDate.split('-');
+  return `${day}/${month}`;
+}
+
+function createVerticalLinePlugin(): Plugin<'line'> {
+  return {
+    id: 'verticalLine',
+    beforeDatasetsDraw(chart: Chart<'line'>) {
+      if (!chart.tooltip?.opacity) return;
+      const { ctx } = chart;
+      const x = chart.tooltip.caretX;
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x, chart.scales.y.top);
+      ctx.lineTo(x, chart.scales.y.bottom);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = getCSSVariable('--color-zinc-600', '#52525b');
+      ctx.setLineDash([]);
+      ctx.stroke();
+      ctx.restore();
+    },
+  };
+}
+
+/** Dados, opções e legenda do gráfico de indicadores de afiliados (cliques, leads e clientes por dia). */
+export function useAffiliatesIndicatorsChart(report?: ReportAnalyticsData | null): AffiliatesIndicatorsChartConfig {
+  const translate = useTranslations();
+
+  return useMemo(() => {
+    const colors = {
+      clicks: getCSSVariable('--color-cyan-300', '#67e8f9'),
+      leads: getCSSVariable('--color-green-500', '#22c55e'),
+      customers: getCSSVariable('--color-zinc-300', '#d4d4d8'),
+    };
+
+    const baseDataset = {
+      tension: 0.18,
+      pointRadius: 0,
+      pointHoverRadius: 3,
+      pointBorderWidth: 2,
+      pointHoverBorderWidth: 2,
+      pointHoverBackgroundColor: getCSSVariable('--color-white', '#ffffff'),
+      pointHoverBorderColor: getCSSVariable('--color-zinc-600', '#52525b'),
+    };
+
+    const colored = (color: string) => ({
+      borderColor: color,
+      backgroundColor: color,
+      pointBackgroundColor: color,
+      pointBorderColor: color,
+    });
+
+    const graphicData = report?.graphicData ?? [];
+    const maxValue = graphicData.length
+      ? Math.max(...graphicData.flatMap((item) => [item.views, item.leads, item.customers ?? 0]))
+      : 0;
+    const yMax = maxValue > 0 ? Math.ceil(maxValue * 1.2) : 2;
+
+    const legend: ChartLegendItem[] = [
+      { label: translate('common.account.workspace.affiliates.chart.clicks'), color: colors.clicks, dataKey: 'views' },
+      { label: translate('common.account.workspace.affiliates.chart.leads'), color: colors.leads, dataKey: 'leads' },
+      {
+        label: translate('common.account.workspace.affiliates.chart.customers'),
+        color: colors.customers,
+        dataKey: 'customers',
+      },
+    ];
+
+    const data: ChartData<'line'> = {
+      labels: graphicData.map((item) => formatChartDate(item.date)),
+      datasets: [
+        {
+          label: legend[0].label,
+          data: graphicData.map((item) => item.views),
+          ...baseDataset,
+          ...colored(colors.clicks),
+        },
+        {
+          label: legend[1].label,
+          data: graphicData.map((item) => item.leads),
+          ...baseDataset,
+          ...colored(colors.leads),
+        },
+        {
+          label: legend[2].label,
+          data: graphicData.map((item) => item.customers ?? 0),
+          ...baseDataset,
+          ...colored(colors.customers),
+          borderDash: [8, 8],
+        },
+      ],
+    };
+
+    const options: ChartOptions<'line'> = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: 'index',
+          enabled: false,
+          intersect: false,
+          axis: 'x',
+          external: chartCustomTooltip() as unknown as NonNullable<
+            NonNullable<ChartOptions<'line'>['plugins']>['tooltip']
+          >['external'],
+        },
+      },
+      scales: {
+        x: { grid: { display: false }, border: { display: false } },
+        y: {
+          beginAtZero: true,
+          min: 0,
+          max: yMax,
+          border: { display: false },
+          ticks: { stepSize: yMax <= 5 ? 1 : undefined },
+        },
+      },
+    };
+
+    return { data, options, plugins: [createVerticalLinePlugin()], legend };
+  }, [report, translate]);
+}

package/src/components/account/sections/projects/DeleteProjectModal.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { IconCheck, IconSelector, IconTrash } 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 { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Toast } from '../../../ui/feedback/Toast';
+import { FormField } from '../../../ui/form/FormField';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../../../ui/overlay/Command';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../../../ui/overlay/Dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/overlay/Popover';
+import { useDeleteConfirmation } from '../../../../modules/cards/hooks/delete-confirmation.hook';
+import { useProjects } from '../../../../modules/projects/hooks/list-projects.hook';
+import { useDeleteProject } from '../../../../modules/projects/hooks/delete-project.hook';
+import { useDebounce } from '../../../../hooks/useDebounce';
+import { cn } from '../../../../infra/utils/clsx';
+import { useProjectFlows } from '../../../../store/useProjectFlows';
+
+/** Exclusão de projeto: escolhe para onde o conteúdo vai e confirma digitando EXCLUIR. */
+export function DeleteProjectModal() {
+  const translate = useTranslations();
+  const projectToDelete = useProjectFlows((state) => state.projectToDelete);
+  const closeDeleteProject = useProjectFlows((state) => state.closeDeleteProject);
+  const deleteProject = useDeleteProject();
+
+  const projectId = projectToDelete?.id;
+  const projectName = projectToDelete?.title ?? '';
+
+  const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation({
+    confirmWord: translate('common.account.workspace.projects.deleteModal.deleteWord'),
+  });
+  const [selectedProjectId, setSelectedProjectId] = useState('');
+  const [comboboxOpen, setComboboxOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 400);
+
+  const {
+    data = { data: [], total: 0, page: 1 },
+    isLoading: isLoadingProjects,
+    isFetching: isFetchingProjects,
+  } = useProjects({ sort: 'title', search: debouncedSearch || undefined, limit: 100 });
+
+  const availableProjects = useMemo(
+    () => data.data.filter((project) => project.id !== projectId),
+    [data.data, projectId]
+  );
+
+  // Só consideramos "único projeto" depois da primeira carga (sem busca), pra não piscar a UI.
+  const hasLoadedOnce = !isLoadingProjects;
+  const isOnlyProject = hasLoadedOnce && debouncedSearch === '' && data.total <= 1;
+
+  // Skeleton no popover enquanto o debounce está pendente ou o fetch está rolando.
+  const isListLoading = searchQuery !== debouncedSearch || isFetchingProjects;
+
+  const selectedProjectName = availableProjects.find(
+    (project) => String(project.id) === selectedProjectId
+  )?.title;
+
+  const resetState = () => {
+    resetConfirmation();
+    setSelectedProjectId('');
+    setComboboxOpen(false);
+    setSearchQuery('');
+  };
+
+  const handleClose = () => {
+    resetState();
+    closeDeleteProject();
+  };
+
+  const onSubmit = async () => {
+    if (isOnlyProject || !selectedProjectId || !projectId) return;
+
+    try {
+      await deleteProject.mutateAsync({
+        projectId,
+        moveToProjectId: Number.parseInt(selectedProjectId, 10),
+      });
+    } catch (error) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={
+            error instanceof Error
+              ? error.message
+              : translate('common.account.workspace.projects.deleteModal.deleteError')
+          }
+          toastId={toastId}
+        />
+      ));
+      return;
+    }
+
+    resetState();
+    closeDeleteProject();
+
+    toast.custom((toastId) => (
+      <Toast
+        variant="success"
+        message={translate('common.account.workspace.projects.deleteModal.deleted', { projectName })}
+        toastId={toastId}
+      />
+    ));
+  };
+
+  return (
+    <Dialog open={!!projectToDelete} onOpenChange={handleClose}>
+      <DialogContent className="flex flex-col p-0 gap-0 w-[410px]">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
+          <div className="flex flex-col gap-5 p-5">
+            <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2">
+              <IconTrash size={20} className="text-red-500" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                {translate('common.account.workspace.projects.deleteModal.title')}
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-zinc-600 wrap-break-word overflow-hidden">
+                {hasLoadedOnce && isOnlyProject
+                  ? translate.rich('common.account.workspace.projects.deleteModal.descriptionOnlyProject', {
+                      projectName,
+                      b: (chunks) => <span className="font-medium text-zinc-950">{chunks}</span>,
+                    })
+                  : translate.rich('common.account.workspace.projects.deleteModal.description', {
+                      projectName,
+                      b: (chunks) => <span className="font-medium text-zinc-950">{chunks}</span>,
+                    })}
+              </DialogDescription>
+            </div>
+
+            {!isOnlyProject && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <label className="paragraph-xsmall-semibold text-zinc-600">
+                    {translate('common.account.workspace.projects.deleteModal.moveContentTo')}
+                  </label>
+                  <Popover open={comboboxOpen} onOpenChange={setComboboxOpen} modal>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        role="combobox"
+                        aria-expanded={comboboxOpen}
+                        disabled={form.formState.isSubmitting}
+                        className="w-full justify-between h-10 paragraph-small-medium text-zinc-950"
+                      >
+                        {selectedProjectName ??
+                          (isLoadingProjects
+                            ? translate('common.actions.loading')
+                            : translate('common.account.workspace.projects.deleteModal.selectProject'))}
+                        <IconSelector className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                      <Command shouldFilter={false}>
+                        <CommandInput
+                          placeholder={translate('common.account.workspace.projects.deleteModal.searchProject')}
+                          value={searchQuery}
+                          onValueChange={setSearchQuery}
+                        />
+                        <CommandList className="overscroll-contain" onWheel={(event) => event.stopPropagation()}>
+                          {isListLoading ? (
+                            <div className="p-1 flex flex-col gap-1">
+                              {Array.from({ length: 4 }).map((_, index) => (
+                                <Skeleton key={index} className="h-8 w-full rounded-sm" />
+                              ))}
+                            </div>
+                          ) : (
+                            <>
+                              <CommandEmpty>
+                                {translate('common.account.workspace.projects.deleteModal.noProjectFound')}
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {availableProjects.map((project) => (
+                                  <CommandItem
+                                    key={project.id}
+                                    value={project.title}
+                                    onSelect={() => {
+                                      setSelectedProjectId(String(project.id));
+                                      setComboboxOpen(false);
+                                    }}
+                                  >
+                                    <IconCheck
+                                      className={cn(
+                                        'mr-2 h-4 w-4',
+                                        selectedProjectId === String(project.id) ? 'opacity-100' : 'opacity-0'
+                                      )}
+                                    />
+                                    {project.title}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </>
+                          )}
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <FormField
+                  label={translate('common.account.workspace.projects.deleteModal.typeDelete')}
+                  required
+                  placeholder={translate('common.account.workspace.projects.deleteModal.deleteWord')}
+                  {...form.register('confirmText')}
+                />
+              </>
+            )}
+          </div>
+          <Separator />
+          <div className="flex items-center gap-2 p-5">
+            <Button
+              type="submit"
+              disabled={
+                isOnlyProject || !isValidConfirmation || !selectedProjectId || form.formState.isSubmitting
+              }
+              className="h-10!"
+              loading={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting
+                ? translate('common.account.workspace.projects.deleteModal.deleting')
+                : translate('common.actions.delete')}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10!"
+              onClick={handleClose}
+              disabled={form.formState.isSubmitting}
+            >
+              {isOnlyProject ? translate('common.actions.close') : translate('common.actions.cancel')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/sections/projects/ProjectFlows.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { DeleteProjectModal } from './DeleteProjectModal';
+import { ProjectSheet } from './ProjectSheet';
+import { ProjectsDisabledModal } from './ProjectsDisabledModal';
+
+/** Fluxos da aba Projetos, abertos por cima do modal Minha conta. */
+export function ProjectFlows() {
+  return (
+    <>
+      <ProjectSheet />
+      <DeleteProjectModal />
+      <ProjectsDisabledModal />
+    </>
+  );
+}

package/src/components/account/sections/projects/ProjectMembersStack.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';
+import { useListProjectUsers } from '../../../../modules/projects/hooks/list-project-users.hook';
+import { cn } from '../../../../infra/utils/clsx';
+import { EntityAvatar } from '../shared/EntityAvatar';
+
+const VISIBLE_MEMBERS = 3;
+
+type ProjectMembersStackProps = {
+  projectId: number;
+  totalUsers: number;
+  onSeeMore: () => void;
+  className?: string;
+};
+
+export function ProjectMembersStack({ projectId, totalUsers, onSeeMore, className }: ProjectMembersStackProps) {
+  const translate = useTranslations();
+  const { data, isPending } = useListProjectUsers(projectId);
+
+  const firstPage = data?.pages[0];
+  const members = firstPage?.data.slice(0, VISIBLE_MEMBERS) ?? [];
+  const remainingCount = (firstPage?.total ?? totalUsers) - members.length;
+
+  if (isPending) {
+    return (
+      <div className={cn('flex items-center', className)}>
+        {Array.from({ length: Math.min(VISIBLE_MEMBERS, Math.max(totalUsers, 1)) }).map((_, index) => (
+          <Skeleton key={index} className={cn('size-8 rounded-full ring-2 ring-white', index > 0 && '-ml-2')} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex items-center', className)}>
+      {members.map((member, index) => {
+        const name = member.name || translate('common.account.workspace.projects.userAlt');
+
+        return (
+          <Tooltip key={member.id_user}>
+            <TooltipTrigger asChild>
+              <span className={cn('rounded-full ring-2 ring-white cursor-default', index > 0 && '-ml-2')}>
+                <EntityAvatar name={member.name} photo={member.photo} tone="brand" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{name}</TooltipContent>
+          </Tooltip>
+        );
+      })}
+      {remainingCount > 0 && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                'size-8 rounded-full bg-zinc-950 ring-2 ring-white flex items-center justify-center shrink-0 cursor-pointer hover:bg-zinc-800 transition-colors',
+                members.length > 0 && '-ml-2'
+              )}
+              onClick={(event) => {
+                event.stopPropagation();
+                onSeeMore();
+              }}
+            >
+              <span className="text-white paragraph-xsmall-semibold">+{remainingCount}</span>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{translate('common.account.workspace.projects.seeMoreUsers')}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}

package/src/components/account/sections/projects/ProjectRow.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { IconTrash } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import type { Project } from '../../../../modules/projects/types';
+import { EntityAvatar } from '../shared/EntityAvatar';
+import { RowActionsMenu, type RowActionsMenuItem } from '../shared/RowActionsMenu';
+import { ProjectMembersStack } from './ProjectMembersStack';
+
+type ProjectRowProps = {
+  project: Project;
+  canManage: boolean;
+  onOpen: (project: Project) => void;
+  onDelete: (project: Project) => void;
+};
+
+function useProjectRow({ project, canManage, onOpen, onDelete }: ProjectRowProps) {
+  const translate = useTranslations();
+
+  const menuItems: RowActionsMenuItem[] = canManage
+    ? [
+        {
+          icon: <IconTrash size={20} className="text-zinc-400" />,
+          label: translate('common.account.workspace.projects.delete'),
+          onClick: () => onDelete(project),
+        },
+      ]
+    : [];
+
+  const handleOpen = () => onOpen(project);
+
+  const detailsButton = (
+    <Button
+      variant="secondary"
+      className="h-10! shrink-0"
+      onClick={(event) => {
+        event.stopPropagation();
+        handleOpen();
+      }}
+    >
+      {translate('common.account.workspace.projects.details')}
+    </Button>
+  );
+
+  return { menuItems, handleOpen, detailsButton };
+}
+
+export function ProjectRow(props: ProjectRowProps) {
+  const { project } = props;
+  const { menuItems, handleOpen, detailsButton } = useProjectRow(props);
+
+  return (
+    <div
+      className="flex items-center gap-4 px-5 py-4 cursor-pointer hover:bg-zinc-50 transition-colors"
+      onClick={handleOpen}
+    >
+      <EntityAvatar name={project.title} photo={project.photo} />
+      <span className="flex-1 min-w-0 truncate paragraph-small-semibold text-zinc-600" title={project.title}>
+        {project.title}
+      </span>
+      <ProjectMembersStack
+        projectId={project.id}
+        totalUsers={project.total_users}
+        onSeeMore={handleOpen}
+        className="w-32 justify-end shrink-0"
+      />
+      {detailsButton}
+      <div className="w-10 shrink-0">
+        <RowActionsMenu items={menuItems} width={140} />
+      </div>
+    </div>
+  );
+}
+
+export function ProjectCard(props: ProjectRowProps) {
+  const { project } = props;
+  const { menuItems, handleOpen, detailsButton } = useProjectRow(props);
+
+  return (
+    <div
+      className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-white px-3 py-4 cursor-pointer"
+      onClick={handleOpen}
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        <EntityAvatar name={project.title} photo={project.photo} />
+        <span className="flex-1 min-w-0 truncate paragraph-small-semibold text-zinc-600">{project.title}</span>
+        <RowActionsMenu items={menuItems} width={140} />
+      </div>
+      <div className="flex items-center justify-between gap-3">
+        <ProjectMembersStack projectId={project.id} totalUsers={project.total_users} onSeeMore={handleOpen} />
+        {detailsButton}
+      </div>
+    </div>
+  );
+}