@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/affiliates/RequestWithdrawalSheet.tsx

@@ -0,0 +1,586 @@
+'use client';
+
+import { useCallback, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IconAlertTriangle, IconInfoCircle, IconPencil, IconUpload, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import z from 'zod';
+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 } from '../../../ui/overlay/Dialog';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { useCurrentAffiliate } from '../../../../modules/affiliates/hooks/use-current-affiliate.hook';
+import { useRequestDeposit } from '../../../../modules/affiliates/hooks/use-request-deposit.hook';
+import { useWithdrawalLimits } from '../../../../modules/affiliates/hooks/use-withdrawal-limits.hook';
+import { AFFILIATE_FINANCE_EMAIL } from '../../../../modules/affiliates/constants/affiliate.constants';
+import {
+  formatCurrency,
+  formatCurrencyNumber,
+  parseCurrencyToNumber,
+} from '../../../../utils/format/currency';
+import { formatDocument, formatPixKey } from '../../../../utils/format/masks';
+import { formatFileSize, isPDFFile } from '../../../../utils/file/index';
+import { useUploadProgress } from '../../../../hooks/useUploadProgress';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { cn } from '../../../../infra/utils/clsx';
+import { useAffiliateFlows } from '../../../../store/useAffiliateFlows';
+
+const MIN_WITHDRAWAL = 25;
+
+/** Compara em centavos: o saldo vem do backend em reais e a comparação direta erra no arredondamento. */
+const toCents = (value: number) => Math.round(value * 100);
+
+function readFileAsBase64DataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error('read-file-failed'));
+    reader.readAsDataURL(file);
+  });
+}
+
+function buildWithdrawalSchema(maxAvailable: number, minWithdrawal: number, messages: {
+  required: string;
+  minValue: string;
+  maxBalance: string;
+}) {
+  return z.object({
+    value: z
+      .string()
+      .min(1, messages.required)
+      .refine((value) => parseCurrencyToNumber(value) >= minWithdrawal, { message: messages.minValue })
+      .refine((value) => toCents(parseCurrencyToNumber(value)) <= toCents(maxAvailable), {
+        message: messages.maxBalance,
+      }),
+  });
+}
+
+type WithdrawalFormData = { value: string };
+
+function PdfFileIcon() {
+  return (
+    <svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.5 1H4.5A2.5 2.5 0 0 0 2 3.5v20A2.5 2.5 0 0 0 4.5 26h15a2.5 2.5 0 0 0 2.5-2.5V8.5L14.5 1Z"
+        fill="#fff"
+        stroke="#D4D4D8"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path d="M14 1.5V8.5h7" stroke="#D4D4D8" strokeWidth="1.5" strokeLinejoin="round" />
+      <rect x="4" y="13" width="16" height="9" rx="2" fill="#E11D48" />
+      <text x="12" y="19.5" textAnchor="middle" fill="#fff" fontSize="6" fontWeight="700" fontFamily="sans-serif">
+        PDF
+      </text>
+    </svg>
+  );
+}
+
+function UploadedPdfFile({ file, onRemove }: { file: File; onRemove: () => void }) {
+  const translateSheet = useTranslations('common.account.workspace.affiliates.withdrawal');
+  const { progress } = useUploadProgress({ interval: 80, increment: 10 });
+  const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, '');
+  const fileExtension = file.name.split('.').pop()?.toUpperCase() || '';
+
+  return (
+    <div className="flex flex-col gap-3 bg-[#f8f8f7] rounded-lg">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center size-12.5 shrink-0 bg-white border border-zinc-200 rounded-lg">
+          <PdfFileIcon />
+        </div>
+        <div className="flex flex-col gap-0.5 min-w-0 flex-1">
+          <span className="paragraph-small-medium text-zinc-950 truncate">{fileNameWithoutExtension}</span>
+          <span className="paragraph-xsmall-medium text-zinc-500">
+            .{fileExtension} <span className="text-zinc-500/40">•</span> {formatFileSize(file.size)}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="flex items-center justify-center size-8 shrink-0 rounded-lg hover:bg-zinc-100 hover:cursor-pointer transition-colors"
+          aria-label={translateSheet('removeAttachmentAriaLabel')}
+        >
+          <IconX size={18} className="text-zinc-500" />
+        </button>
+      </div>
+      <div className="flex items-center gap-3">
+        <div className="flex-1 h-1.5 bg-white rounded-full overflow-hidden">
+          <div
+            className="bg-zinc-950 h-full rounded-full transition-all duration-100"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+        <span className="paragraph-xsmall-medium text-zinc-500 shrink-0">{progress}%</span>
+      </div>
+    </div>
+  );
+}
+
+/** Solicitação de saque do saldo de afiliado, com conta de recebimento, limites e nota fiscal. */
+export function RequestWithdrawalSheet() {
+  const translate = useTranslations();
+  const translateSheet = useTranslations('common.account.workspace.affiliates.withdrawal');
+  const isMobile = useIsMobile();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+
+  const isOpen = useAffiliateFlows((state) => state.isWithdrawalOpen);
+  const close = useAffiliateFlows((state) => state.closeWithdrawal);
+  const openReceivingAccount = useAffiliateFlows((state) => state.openReceivingAccount);
+
+  const { data: affiliateData } = useCurrentAffiliate();
+  const affiliate = affiliateData?.data;
+  const { data: limitsData } = useWithdrawalLimits({ enabled: isOpen && !!affiliate });
+  const limits = limitsData?.data;
+  const requestDeposit = useRequestDeposit();
+
+  const balance = Number(affiliate?.balance ?? 0);
+  const availableToWithdraw = limits?.availableToWithdraw ?? balance;
+  const minWithdrawal = limits?.minValue ?? MIN_WITHDRAWAL;
+  const requiresInvoice = limits?.requiresInvoice ?? false;
+  const hasReceivingAccount = !!(affiliate?.pix && affiliate?.holder_name && affiliate?.holder_document);
+
+  const minValueLabel = minWithdrawal.toFixed(2).replace('.', ',');
+
+  const withdrawalSchema = useMemo(
+    () =>
+      buildWithdrawalSchema(availableToWithdraw, minWithdrawal, {
+        required: translateSheet('validationRequired'),
+        minValue: translateSheet('validationMinValue', { minValue: minValueLabel }),
+        maxBalance: translateSheet('validationMaxBalance', {
+          balance: formatCurrencyNumber(availableToWithdraw),
+        }),
+      }),
+    [availableToWithdraw, minWithdrawal, minValueLabel, translateSheet]
+  );
+
+  const form = useForm<WithdrawalFormData>({
+    resolver: zodResolver(withdrawalSchema),
+    defaultValues: { value: '' },
+  });
+
+  const watchedValue = form.watch('value');
+  const withdrawalAmount = parseCurrencyToNumber(watchedValue || '') || 0;
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [showUploadArea, setShowUploadArea] = useState(false);
+  const [attachmentFile, setAttachmentFile] = useState<File | null>(null);
+  const [attachmentBase64, setAttachmentBase64] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [pendingWithdrawalValue, setPendingWithdrawalValue] = useState<string | null>(null);
+
+  const handlePdfFile = useCallback(
+    async (file: File) => {
+      if (!isPDFFile(file)) {
+        toast.custom((toastId) => (
+          <Toast variant="error" message={translateSheet('errorPdfOnly')} toastId={toastId} />
+        ));
+        return;
+      }
+      setAttachmentFile(file);
+      setAttachmentBase64(await readFileAsBase64DataUrl(file));
+    },
+    [translateSheet]
+  );
+
+  const handleFileInputChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) handlePdfFile(file);
+      event.target.value = '';
+    },
+    [handlePdfFile]
+  );
+
+  const handleDrop = useCallback(
+    (event: DragEvent) => {
+      event.preventDefault();
+      setIsDragging(false);
+      const file = event.dataTransfer.files?.[0];
+      if (file) handlePdfFile(file);
+    },
+    [handlePdfFile]
+  );
+
+  const handleRemoveAttachment = useCallback(() => {
+    setAttachmentFile(null);
+    setAttachmentBase64(null);
+  }, []);
+
+  const handleClose = () => {
+    form.reset({ value: '' });
+    setShowUploadArea(false);
+    handleRemoveAttachment();
+    setShowConfirmDialog(false);
+    setPendingWithdrawalValue(null);
+    close();
+  };
+
+  const executeWithdrawal = async (value: string, attachment: string | null) => {
+    if (!affiliate) return;
+
+    try {
+      const result = await requestDeposit.mutateAsync({
+        value: parseCurrencyToNumber(value),
+        ...(attachment ? { attachment } : {}),
+      });
+      toast.custom((toastId) => <Toast variant="success" message={result.message} toastId={toastId} />);
+      handleClose();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateSheet('errorRequestDeposit');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    }
+  };
+
+  const handleConfirmWithdrawal = async () => {
+    if (pendingWithdrawalValue === null) return;
+    setShowConfirmDialog(false);
+    await executeWithdrawal(pendingWithdrawalValue, attachmentBase64);
+    setPendingWithdrawalValue(null);
+  };
+
+  const infoBoxClasses = cn(
+    'flex items-center gap-3 text-zinc-950 rounded-lg p-4',
+    isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+  );
+
+  return (
+    <>
+      <Sheet open={isOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+        <SheetContent
+          side={isMobile ? 'bottom' : 'right'}
+          className={cn(
+            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'
+          )}
+        >
+          <SheetHeader className="border-b border-zinc-200">
+            <SheetTitle className="text-zinc-950 paragraph-medium-semibold">
+              {translateSheet('sheetTitle')}
+            </SheetTitle>
+          </SheetHeader>
+
+          <form
+            onSubmit={form.handleSubmit((data) => {
+              setPendingWithdrawalValue(data.value);
+              setShowConfirmDialog(true);
+            })}
+            className="flex flex-col flex-1 overflow-hidden"
+          >
+            <div className="flex flex-col gap-6 px-5 py-5 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 flex-1">
+              <div className="flex items-center justify-between">
+                <span className="text-zinc-500 paragraph-small-semibold">
+                  {translateSheet('availableBalance')}
+                </span>
+                <span className="text-green-600 paragraph-medium-semibold">
+                  {formatCurrencyNumber(balance)}
+                </span>
+              </div>
+
+              <Separator />
+
+              <div className="flex flex-col gap-3">
+                <div className="flex items-center justify-between">
+                  <span className="paragraph-small-regular text-zinc-600">
+                    {translateSheet('receivingAccount')}
+                  </span>
+                  <Button variant="secondary" className="h-8!" type="button" onClick={openReceivingAccount}>
+                    <IconPencil />
+                    {translate('common.actions.edit')}
+                  </Button>
+                </div>
+                <div className="flex flex-col rounded-lg bg-zinc-50 p-4 gap-4">
+                  <div className="flex items-center gap-3">
+                    <span className="w-40 text-zinc-950 paragraph-small-medium">
+                      {translateSheet('holderLabel')}
+                    </span>
+                    <span className="w-full text-zinc-600 paragraph-small-regular">
+                      {affiliate?.holder_name ?? '—'}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="w-40 text-zinc-950 paragraph-small-medium">
+                      {translateSheet('pixKeyLabel')}
+                    </span>
+                    <span className="w-full text-zinc-600 paragraph-small-regular truncate">
+                      {affiliate?.pix ? formatPixKey(affiliate.pix) : '—'}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="w-40 text-zinc-950 paragraph-small-medium">
+                      {translateSheet('holderDocumentLabel')}
+                    </span>
+                    <span className="w-full text-zinc-600 paragraph-small-regular truncate">
+                      {affiliate?.holder_document ? formatDocument(affiliate.holder_document) : '—'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {limits && !limits.canWithdraw ? (
+                <div className="flex flex-col gap-3 bg-zinc-50 rounded-lg p-4">
+                  <div className="size-8 bg-white rounded-lg shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)] flex items-center justify-center">
+                    <IconAlertTriangle size={18} className="text-amber-500" />
+                  </div>
+                  <p className="paragraph-small-medium text-zinc-950">{translateSheet('blockedTitle')}</p>
+                  <p className="paragraph-small-regular text-zinc-600">
+                    {translateSheet('blockedDescription')}
+                  </p>
+                  <Button
+                    variant="secondary"
+                    className="h-10! w-fit"
+                    type="button"
+                    onClick={openReceivingAccount}
+                  >
+                    {translateSheet('blockedEditAccountButton')}
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  <Controller
+                    name="value"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <FormField
+                        required
+                        label={translateSheet('withdrawalValueLabel')}
+                        placeholder={translateSheet('withdrawalValuePlaceholder')}
+                        inputMode="numeric"
+                        hintMessage={translateSheet('withdrawalValueHint', { minValue: minValueLabel })}
+                        value={field.value}
+                        onChange={(event) => {
+                          const raw = event.target.value.replace(/\D/g, '');
+                          if (!raw) return field.onChange('');
+                          field.onChange(formatCurrency(raw));
+                        }}
+                        error={!!fieldState.error}
+                        errorMessage={fieldState.error?.message}
+                      />
+                    )}
+                  />
+
+                  {limits?.personType === 'cpf' && (
+                    <div className={infoBoxClasses}>
+                      <IconInfoCircle size={16} className="shrink-0" />
+                      <span className="paragraph-small-semibold">
+                        {translateSheet('cpfMonthlyLimit', {
+                          value: formatCurrencyNumber(limits.maxValuePerMonth ?? 0),
+                        })}{' '}
+                        <span className="text-zinc-600 paragraph-small-regular">
+                          {translateSheet('cpfMonthlyRemaining', {
+                            value: formatCurrencyNumber(limits.monthlyRemaining ?? 0),
+                          })}
+                        </span>
+                      </span>
+                    </div>
+                  )}
+
+                  {limits?.personType === 'cnpj' && requiresInvoice && (
+                    <div className="flex flex-col gap-3 bg-zinc-50 rounded-lg p-4">
+                      <div className="size-8 bg-white rounded-lg shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)] flex items-center justify-center">
+                        <IconAlertTriangle size={18} className="text-amber-500" />
+                      </div>
+                      <p className="paragraph-small-medium text-zinc-950">
+                        {translateSheet('invoiceWarningCnpj')}
+                      </p>
+
+                      {!showUploadArea && !attachmentFile && (
+                        <Button
+                          variant="secondary"
+                          className="h-10! w-fit"
+                          type="button"
+                          onClick={() => setShowUploadArea(true)}
+                        >
+                          {translateSheet('attachInvoiceButton')}
+                          <IconUpload size={20} />
+                        </Button>
+                      )}
+
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept="application/pdf"
+                        className="hidden"
+                        onChange={handleFileInputChange}
+                      />
+
+                      {showUploadArea && !attachmentFile && (
+                        <div
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => fileInputRef.current?.click()}
+                          onKeyDown={(event) => event.key === 'Enter' && fileInputRef.current?.click()}
+                          onDragOver={(event) => {
+                            event.preventDefault();
+                            setIsDragging(true);
+                          }}
+                          onDragLeave={(event) => {
+                            event.preventDefault();
+                            setIsDragging(false);
+                          }}
+                          onDrop={handleDrop}
+                          className={cn(
+                            'flex flex-col items-center justify-center gap-3.5 p-14 border-2 border-dashed rounded-lg cursor-pointer transition-colors hover:border-zinc-400',
+                            isDragging ? 'border-zinc-400 bg-zinc-100' : 'border-zinc-200 bg-white'
+                          )}
+                        >
+                          <div className="flex items-center justify-center size-14 bg-zinc-100 rounded-lg">
+                            <IconUpload size={24} className="text-zinc-600" />
+                          </div>
+                          <p className="paragraph-small-regular text-zinc-500 text-center">
+                            {translateSheet('uploadAreaText')}{' '}
+                            <span className="paragraph-small-medium text-zinc-950">
+                              {translateSheet('uploadAreaExt')}
+                            </span>
+                          </p>
+                        </div>
+                      )}
+
+                      {attachmentFile && (
+                        <UploadedPdfFile file={attachmentFile} onRemove={handleRemoveAttachment} />
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+
+              <div className={infoBoxClasses}>
+                <IconInfoCircle size={16} className="shrink-0" />
+                <span className="paragraph-small-semibold">
+                  {translateSheet('processingInfo')}{' '}
+                  <span className="text-zinc-600 paragraph-small-regular">
+                    {translateSheet('processingInfoSub')}
+                  </span>
+                </span>
+              </div>
+
+              <div className={infoBoxClasses}>
+                <IconInfoCircle size={16} className="shrink-0" />
+                <span className="paragraph-small-semibold">
+                  {translateSheet('contactInfo')}{' '}
+                  <span className="text-zinc-600 paragraph-small-regular">{AFFILIATE_FINANCE_EMAIL}</span>
+                </span>
+              </div>
+            </div>
+
+            <SheetFooter className="flex-row items-center justify-between border-t border-zinc-200 shrink-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                {translate('common.actions.cancel')}
+              </Button>
+              <Button
+                className="h-10!"
+                type="submit"
+                disabled={
+                  !affiliate ||
+                  !limits ||
+                  !hasReceivingAccount ||
+                  !withdrawalAmount ||
+                  withdrawalAmount < minWithdrawal ||
+                  toCents(withdrawalAmount) > toCents(availableToWithdraw) ||
+                  (requiresInvoice && !attachmentFile) ||
+                  !limits.canWithdraw ||
+                  requestDeposit.isPending
+                }
+                loading={requestDeposit.isPending}
+              >
+                {translateSheet('submitButton')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {pendingWithdrawalValue && (
+        <Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+          <DialogContent className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[420px]! rounded-lg border">
+            <div className="flex flex-col gap-5 p-4 lg:p-5">
+              <span className="paragraph-medium-semibold text-zinc-950">{translateSheet('reviewTitle')}</span>
+
+              <div className="flex flex-col gap-3 bg-zinc-50 rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-zinc-600 paragraph-small-medium">
+                    {translateSheet('reviewValueLabel')}
+                  </span>
+                  <span className="text-zinc-950 paragraph-small-semibold">
+                    {formatCurrencyNumber(parseCurrencyToNumber(pendingWithdrawalValue))}
+                  </span>
+                </div>
+                <div className="h-px bg-zinc-200" />
+                <div className="flex items-center justify-between">
+                  <span className="text-zinc-600 paragraph-small-medium">
+                    {translateSheet('holderLabel')}
+                  </span>
+                  <span className="text-zinc-950 paragraph-small-regular">
+                    {affiliate?.holder_name ?? '—'}
+                  </span>
+                </div>
+                <div className="h-px bg-zinc-200" />
+                <div className="flex items-center justify-between">
+                  <span className="text-zinc-600 paragraph-small-medium">
+                    {translateSheet('reviewPixLabel')}
+                  </span>
+                  <span className="text-zinc-950 paragraph-small-regular truncate">
+                    {affiliate?.pix ? formatPixKey(affiliate.pix) : '—'}
+                  </span>
+                </div>
+                <div className="h-px bg-zinc-200" />
+                <div className="flex items-center justify-between">
+                  <span className="text-zinc-600 paragraph-small-medium">
+                    {translateSheet('reviewDeadlineLabel')}
+                  </span>
+                  <span className="text-zinc-950 paragraph-small-regular">
+                    {translateSheet('reviewDeadlineValue')}
+                  </span>
+                </div>
+                {limits?.personType === 'cnpj' && attachmentFile && (
+                  <>
+                    <div className="h-px bg-zinc-200" />
+                    <div className="flex items-center justify-between">
+                      <span className="text-zinc-600 paragraph-small-medium">
+                        {translateSheet('reviewInvoiceLabel')}
+                      </span>
+                      <span className="text-zinc-950 paragraph-small-regular">{attachmentFile.name}</span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-4 bg-amber-50 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <IconAlertTriangle size={20} className="text-amber-600 shrink-0 mt-0.5" />
+                  <p className="paragraph-small-regular text-zinc-950">{translateSheet('reviewWarning')}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="h-px bg-zinc-200" />
+
+            <div className="flex flex-row items-center gap-2 p-4 lg:p-5">
+              <Button
+                className="h-10 w-fit"
+                onClick={handleConfirmWithdrawal}
+                loading={requestDeposit.isPending}
+              >
+                {translateSheet('reviewConfirmButton')}
+              </Button>
+              <Button
+                variant="secondary"
+                className="h-10 w-fit"
+                onClick={() => setShowConfirmDialog(false)}
+              >
+                {translate('common.actions.back')}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}

package/src/components/account/sections/affiliates/ViewAttachmentModal.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useAffiliateFlows } from '../../../../store/useAffiliateFlows';
+
+const STORAGE_URL = process.env.NEXT_PUBLIC_STORAGE_URL || '';
+
+/** Visualizador da nota fiscal anexada à comissão. */
+export function ViewAttachmentModal() {
+  const translate = useTranslations();
+  const attachment = useAffiliateFlows((state) => state.attachment);
+  const close = useAffiliateFlows((state) => state.closeAttachment);
+
+  const pdfUrl = attachment ? `${STORAGE_URL}/${attachment}` : null;
+
+  return (
+    <Dialog open={!!attachment} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <DialogContent
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className="flex flex-col p-0 gap-0 w-[90vw]! max-w-[900px]! h-[85vh]! max-h-[85vh]! duration-0!"
+      >
+        <DialogHeader className="text-left p-5 pb-4">
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+            {translate('common.account.workspace.affiliates.viewAttachment.title')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 min-h-0 px-5 pb-5">
+          {pdfUrl ? (
+            <iframe
+              src={pdfUrl}
+              title={translate('common.account.workspace.affiliates.viewAttachment.iframeTitle')}
+              className="w-full h-full rounded-lg border border-zinc-200"
+            />
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <span className="paragraph-small-regular text-zinc-500">
+                {translate('common.account.workspace.affiliates.viewAttachment.noAttachment')}
+              </span>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { Line } from 'react-chartjs-2';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  type ChartData,
+  type ChartOptions,
+  type Plugin,
+} from 'chart.js';
+import type { ChartLegendItem } from './useAffiliatesIndicatorsChart';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+type AffiliatesIndicatorsChartProps = {
+  data: ChartData<'line'>;
+  options: ChartOptions<'line'>;
+  plugins: Plugin<'line'>[];
+  legend: ChartLegendItem[];
+};
+
+/** Carregado sob demanda pela aba Relatórios, para o chart.js só entrar no bundle quando a aba abre. */
+export default function AffiliatesIndicatorsChart({ data, options, plugins, legend }: AffiliatesIndicatorsChartProps) {
+  return (
+    <>
+      <div className="h-[350px] w-full">
+        <Line data={data} options={options} plugins={plugins} />
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        {legend.map(({ color, dataKey, label }) => (
+          <div key={dataKey} className="flex items-center gap-1.5">
+            <span className="size-2 rounded-full" style={{ backgroundColor: color }} />
+            <span className="paragraph-small-medium text-zinc-950">{label}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}