@greatapps/common 1.1.790 → 1.1.791

package/src/components/account/hooks/useAffiliatesActions.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { useAccountModals } from '../../../store/useAccountModals';
+import { useAffiliateFlows } from '../../../store/useAffiliateFlows';
+import { useAuth } from '../../../providers/auth.provider';
+import { useEnsureAffiliate } from '../../../modules/affiliates/hooks/use-ensure-affiliate.hook';
+import {
+  AFFILIATE_PROGRAM_TERMS_URL,
+  AFFILIATE_TERMS_URL,
+} from '../../../modules/affiliates/constants/affiliate.constants';
+import type { Affiliate } from '../../../modules/affiliates/types/affiliate.type';
+import { Toast } from '../../ui/feedback/Toast';
+
+/**
+ * Ações da aba Afiliados. Por padrão os fluxos abrem por cima do modal (`AffiliateFlows`); o app
+ * pode substituir qualquer um deles pelos handlers de `<Modals workspaceActions>`.
+ */
+export default function useAffiliatesActions() {
+  const translate = useTranslations();
+  const actions = useAccountModals((state) => state.config.workspaceActions?.affiliates);
+  const { user } = useAuth();
+  const ensureAffiliate = useEnsureAffiliate();
+
+  const openWithdrawal = useAffiliateFlows((state) => state.openWithdrawal);
+  const openReceivingAccount = useAffiliateFlows((state) => state.openReceivingAccount);
+  const openMissingReceivingAccount = useAffiliateFlows((state) => state.openMissingReceivingAccount);
+  const openLeads = useAffiliateFlows((state) => state.openLeads);
+  const openAttachment = useAffiliateFlows((state) => state.openAttachment);
+
+  return {
+    joinProgram: async () => {
+      if (actions?.onJoinProgram) return actions.onJoinProgram();
+      if (!user) return;
+
+      try {
+        await ensureAffiliate.mutateAsync({ gestorName: user.name });
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : translate('common.account.workspace.affiliates.joinProgram.joinError');
+        toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+      }
+    },
+    isJoiningProgram: ensureAffiliate.isPending,
+    requestWithdrawal: (affiliate: Affiliate) => {
+      // Mesma regra da tela: sem PIX/titular, o saque vira o aviso de conta de recebimento.
+      const hasReceivingAccount = !!(affiliate.pix && affiliate.holder_name && affiliate.holder_document);
+      if (!hasReceivingAccount) {
+        if (actions?.onMissingReceivingAccount) return actions.onMissingReceivingAccount(affiliate);
+        return openMissingReceivingAccount();
+      }
+      if (actions?.onRequestWithdrawal) return actions.onRequestWithdrawal(affiliate);
+      openWithdrawal();
+    },
+    editReceivingAccount: (affiliate: Affiliate) => {
+      if (actions?.onEditReceivingAccount) return actions.onEditReceivingAccount(affiliate);
+      openReceivingAccount();
+    },
+    listLeads: (affiliate: Affiliate) => {
+      if (actions?.onListLeads) return actions.onListLeads(affiliate);
+      openLeads();
+    },
+    viewAttachment: (attachment: string) => {
+      if (actions?.onViewAttachment) return actions.onViewAttachment(attachment);
+      openAttachment(attachment);
+    },
+    openTerms: () => {
+      window.open(AFFILIATE_TERMS_URL, '_blank', 'noopener,noreferrer');
+    },
+    /** Termo de uso aceito ao entrar no programa (o do menu é a página de regras). */
+    openProgramTerms: () => {
+      window.open(AFFILIATE_PROGRAM_TERMS_URL, '_blank', 'noopener,noreferrer');
+    },
+  };
+}

package/src/components/account/hooks/useMyAccountModal.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { MyAccountSection } from '../../../store/useAccountModals';
+
+interface UseMyAccountModalProps {
+  isOpen: boolean;
+  initialSection?: MyAccountSection;
+  /** Seções que o usuário pode abrir, na ordem do menu (inclui sub-telas sem item de menu). */
+  availableSections: MyAccountSection[];
+  /** Enquanto o perfil não resolve, as permissões ainda não valem e nenhuma seção é escolhida. */
+  isReady: boolean;
+}
+
+export default function useMyAccountModal({
+  isOpen,
+  initialSection,
+  availableSections,
+  isReady,
+}: UseMyAccountModalProps) {
+  const [selectedSection, setSelectedSection] = useState<MyAccountSection | undefined>(initialSection);
+
+  useEffect(() => {
+    if (isOpen) setSelectedSection(initialSection);
+  }, [isOpen, initialSection]);
+
+  const resolvedSection =
+    selectedSection && availableSections.includes(selectedSection) ? selectedSection : availableSections[0];
+  const activeSection = isReady ? resolvedSection : undefined;
+
+  const setActiveSection = (section: string) => {
+    const available = availableSections.find((candidate) => candidate === section);
+    if (available) setSelectedSection(available);
+  };
+
+  return {
+    activeSection,
+    setActiveSection,
+  };
+}

package/src/components/account/hooks/useProjectsActions.ts

@@ -0,0 +1,44 @@
+'use client';
+
+import { useAccountModals } from '../../../store/useAccountModals';
+import { useProjectFlows } from '../../../store/useProjectFlows';
+import { useCancelledSubscriptionGuard } from '../../../modules/subscriptions/hooks/use-cancelled-subscription-guard';
+import { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';
+import { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';
+import type { Project } from '../../../modules/projects/types';
+
+/**
+ * Ações da aba Projetos. Por padrão os fluxos abrem por cima do modal (`ProjectFlows`); o app pode
+ * substituir qualquer um deles pelos handlers de `<Modals workspaceActions>`.
+ */
+export default function useProjectsActions() {
+  const actions = useAccountModals((state) => state.config.workspaceActions?.projects);
+  const openCreateProject = useProjectFlows((state) => state.openCreateProject);
+  const openProjectDetails = useProjectFlows((state) => state.openProjectDetails);
+  const openDeleteProject = useProjectFlows((state) => state.openDeleteProject);
+  const openProjectsDisabled = useProjectFlows((state) => state.openProjectsDisabled);
+  const { guardAction } = useCancelledSubscriptionGuard();
+  const { hasAddon: canCreateProject, isLoading: isLoadingAddon } = useHasPlanAddon(ADDON_IDS.PROJECTS);
+
+  return {
+    createProject: () => {
+      if (isLoadingAddon) return;
+      guardAction(() => {
+        if (!canCreateProject) {
+          return actions?.onProjectsDisabled ? actions.onProjectsDisabled() : openProjectsDisabled();
+        }
+        return actions?.onCreateProject ? actions.onCreateProject() : openCreateProject();
+      });
+    },
+    openProject: (project: Project) => {
+      if (actions?.onOpenProject) return actions.onOpenProject(project);
+      openProjectDetails(project);
+    },
+    deleteProject: (project: Project) => {
+      guardAction(() => {
+        if (actions?.onDeleteProject) return actions.onDeleteProject(project);
+        openDeleteProject(project);
+      });
+    },
+  };
+}

package/src/components/account/hooks/useSubscriptionActions.ts

@@ -0,0 +1,99 @@
+'use client';
+
+import { useAddCardWithPaymentSwitch } from './useAddCardWithPaymentSwitch';
+import { useCards } from '../../../modules/cards/hooks/cards.hook';
+import { useCurrentSubscription } from '../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { useAccountModals } from '../../../store/useAccountModals';
+import { useModalManager } from '../../../store/useModalManager';
+import { useSubscriptionFlows } from '../../../store/useSubscriptionFlows';
+import { useExternalContracting } from '../../../providers/whitelabel.provider';
+import { WorkspaceSectionType } from '../../../enums/WorkspaceSectionType';
+import type { Charge } from '../../../modules/charges/types/charge.type';
+import type { Subscription } from '../../../modules/subscriptions/types/subscription.type';
+
+type PendingChange = NonNullable<Subscription['pending_change']>;
+
+/**
+ * Ações da aba Assinatura. Cada ação usa o handler que o app registrou em
+ * `<Modals workspaceActions>`; sem handler, leva para a tela de assinatura em `accounts_url`
+ * (deep link quando a tela tem um). Contratação externa do whitelabel tem prioridade, igual à tela.
+ */
+export default function useSubscriptionActions() {
+  const actions = useAccountModals((state) => state.config.workspaceActions?.subscription);
+  const openWorkspace = useAccountModals((state) => state.openWorkspace);
+  const { redirectToExternal } = useExternalContracting();
+  const { openModal } = useModalManager();
+  const { openAddCard } = useAddCardWithPaymentSwitch();
+  const { data: cardsData } = useCards();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const openReceipt = useSubscriptionFlows((state) => state.openReceipt);
+  const openPayChargeFlow = useSubscriptionFlows((state) => state.openPayCharge);
+  const openBillingAddress = useSubscriptionFlows((state) => state.openBillingAddress);
+  const openPlanDetails = useSubscriptionFlows((state) => state.openPlanDetails);
+  const openUsageReport = useSubscriptionFlows((state) => state.openUsageReport);
+  const openCancelPlan = useSubscriptionFlows((state) => state.openCancelPlan);
+  const openChangePlan = useSubscriptionFlows((state) => state.openChangePlan);
+  const openPlansCatalog = useSubscriptionFlows((state) => state.openPlansCatalog);
+  const openPendingChange = useSubscriptionFlows((state) => state.openPendingChange);
+
+  return {
+    choosePlan: () => {
+      if (redirectToExternal('plans')) return;
+      if (actions?.onChoosePlan) return actions.onChoosePlan();
+      openWorkspace(WorkspaceSectionType.SUBSCRIPTION);
+      openPlansCatalog();
+    },
+    changePlan: () => {
+      if (redirectToExternal('contracting')) return;
+      if (actions?.onChangePlan) return actions.onChangePlan();
+      openChangePlan();
+    },
+    cancelPlan: () => {
+      if (redirectToExternal('contracting')) return;
+      if (actions?.onCancelPlan) return actions.onCancelPlan();
+      openCancelPlan();
+    },
+    editBillingAddress: () => {
+      if (redirectToExternal('contracting')) return;
+      if (actions?.onEditBillingAddress) return actions.onEditBillingAddress();
+      openBillingAddress();
+    },
+    viewPlanDetails: () => {
+      if (actions?.onViewPlanDetails) return actions.onViewPlanDetails();
+      openPlanDetails();
+    },
+    viewPendingChange: (pendingChange: PendingChange) => {
+      if (actions?.onViewPendingChange) return actions.onViewPendingChange(pendingChange);
+      openPendingChange(pendingChange);
+    },
+    viewUsageReport: () => {
+      if (actions?.onViewUsageReport) return actions.onViewUsageReport();
+      openUsageReport();
+    },
+    addCard: () => {
+      if (actions?.onAddCard) return actions.onAddCard();
+
+      // Primeiro cartão de quem já tem assinatura: avisa que ele vira a forma de pagamento antes
+      // de abrir o cadastro — o cartão passa a valer para a próxima fatura.
+      const hasCard = (cardsData?.data?.length ?? 0) > 0;
+      if (subscriptionData?.data?.[0] && !hasCard) {
+        openModal('addFirstCardWarningModal');
+        return;
+      }
+
+      openAddCard();
+    },
+    payCharge: (charge: Charge) => {
+      if (redirectToExternal('contracting')) return;
+      if (actions?.onPayCharge) return actions.onPayCharge(charge);
+      openPayChargeFlow(charge);
+    },
+    viewCharge: (charge: Charge) => {
+      if (actions?.onViewCharge) return actions.onViewCharge(charge);
+      openReceipt(charge);
+    },
+    downloadCharge: (url: string) => {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    },
+  };
+}

package/src/components/account/hooks/useTeamActions.ts

@@ -0,0 +1,35 @@
+'use client';
+
+import { useAccountModals } from '../../../store/useAccountModals';
+import { useTeamFlows } from '../../../store/useTeamFlows';
+import { useCancelledSubscriptionGuard } from '../../../modules/subscriptions/hooks/use-cancelled-subscription-guard';
+import type { User } from '../../../modules/users/schema';
+
+/**
+ * Ações da aba Minha equipe. Por padrão os fluxos abrem por cima do modal (`TeamFlows`); o app pode
+ * substituir qualquer um deles pelos handlers de `<Modals workspaceActions>`.
+ */
+export default function useTeamActions() {
+  const actions = useAccountModals((state) => state.config.workspaceActions?.team);
+  const openAddUser = useTeamFlows((state) => state.openAddUser);
+  const openEditUser = useTeamFlows((state) => state.openEditUser);
+  const openDeleteUser = useTeamFlows((state) => state.openDeleteUser);
+  const { guardAction } = useCancelledSubscriptionGuard();
+
+  return {
+    addUser: () => {
+      guardAction(() => {
+        if (actions?.onAddUser) return actions.onAddUser();
+        openAddUser();
+      });
+    },
+    editUser: (user: User) => {
+      if (actions?.onEditUser) return actions.onEditUser(user);
+      openEditUser(user);
+    },
+    deleteUser: (user: User) => {
+      if (actions?.onDeleteUser) return actions.onDeleteUser(user);
+      openDeleteUser(user);
+    },
+  };
+}

package/src/components/account/sections/AffiliatesSection.tsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  IconBookmark,
+  IconChartBar,
+  IconBuildingBank,
+  IconCoin,
+  IconCurrencyDollar,
+  IconFileText,
+  IconInfoCircle,
+  IconLink,
+  IconMail,
+  IconMenu2,
+  IconMessageCircle,
+  IconUserPlus,
+  IconUsers,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../ui/buttons/Button';
+import { Skeleton } from '../../ui/feedback/Skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/data-display/Tabs';
+import { useWhitelabel, useWhitelabelUrls } from '../../../providers/whitelabel.provider';
+import { formatCurrencyNumber } from '../../../utils/format/currency';
+import { getReportDateRangeFromPeriod } from '../../../utils/date-filter-period';
+import { DateFilterPeriod } from '../../../enums/DateFilterPeriod';
+import { useCurrentAffiliate } from '../../../modules/affiliates/hooks/use-current-affiliate.hook';
+import { useAffiliateReportAnalytics } from '../../../modules/affiliates/hooks/use-affiliate-report-analytics.hook';
+import { useAffiliateTransactions } from '../../../modules/affiliates/hooks/use-affiliate-transactions.hook';
+import { useAffiliateCoupons } from '../../../modules/affiliates/hooks/use-affiliate-coupons.hook';
+import { AFFILIATE_TOTAL_COMMISSION_PERCENT } from '../../../modules/affiliates/constants/affiliate.constants';
+import { getAffiliateShareLink } from '../../../modules/affiliates/utils/get-affiliate-share-link';
+import type { AffiliateTransaction } from '../../../modules/affiliates/types/affiliate.type';
+import useAffiliatesActions from '../hooks/useAffiliatesActions';
+import { DateFilterPopover } from './shared/DateFilterPopover';
+import { FilterPopover } from './shared/FilterPopover';
+import { IconBox } from './shared/IconBox';
+import { ListPagination } from './shared/ListPagination';
+import { RowActionsMenu } from './shared/RowActionsMenu';
+import { SectionLoadError } from './shared/SectionLoadError';
+import { WorkspaceSection } from './shared/WorkspaceSection';
+import { AffiliateCommissionCard } from './affiliates/AffiliateCommissionCard';
+import { AffiliateStatsCard } from './affiliates/AffiliateStatsCard';
+import { AffiliateStepCard } from './affiliates/AffiliateStepCard';
+import { AffiliateTransactionsList } from './affiliates/AffiliateTransactionsList';
+import { AffiliatesReportsTab } from './affiliates/reports/AffiliatesReportsTab';
+import { AffiliateFlows } from './affiliates/AffiliateFlows';
+
+const TRANSACTIONS_PAGE_SIZE = 100;
+
+type TransactionFilter = Extract<AffiliateTransaction['status'], 'consolidated' | 'pending'>;
+
+const tabTriggerClasses = 'cursor-pointer gap-2 px-3';
+
+function JoinProgramCard({
+  onJoin,
+  onOpenTerms,
+  isJoining,
+}: {
+  onJoin: () => void;
+  onOpenTerms: () => void;
+  isJoining: boolean;
+}) {
+  const translate = useTranslations();
+  const { whitelabel } = useWhitelabel();
+
+  return (
+    <div className="flex flex-col items-start gap-4 p-5 lg:p-6 bg-zinc-50 rounded-lg">
+      <IconBox icon={IconLink} />
+      <div className="flex flex-col gap-2">
+        <span className="paragraph-medium-semibold text-zinc-950">
+          {translate('common.account.workspace.affiliates.joinProgram.title')}
+        </span>
+        <p className="paragraph-small-regular text-zinc-600">
+          {translate('common.account.workspace.affiliates.joinProgram.description', {
+            whitelabelName: whitelabel?.name ?? '',
+          })}{' '}
+          <button type="button" onClick={onOpenTerms} className="underline text-zinc-950 cursor-pointer">
+            {translate('common.account.workspace.affiliates.joinProgram.termsLink')}
+          </button>
+        </p>
+      </div>
+      <Button className="h-10!" onClick={onJoin} loading={isJoining}>
+        {isJoining
+          ? translate('common.account.workspace.affiliates.joinProgram.joining')
+          : translate('common.account.workspace.affiliates.joinProgram.join')}
+      </Button>
+    </div>
+  );
+}
+
+export function AffiliatesSection() {
+  const translate = useTranslations();
+  const { pagesUrl } = useWhitelabelUrls();
+  const actions = useAffiliatesActions();
+
+  const [selectedPeriod, setSelectedPeriod] = useState<DateFilterPeriod>(DateFilterPeriod.ALL_TIME);
+  const [transactionsPage, setTransactionsPage] = useState(1);
+  const [transactionFilters, setTransactionFilters] = useState<TransactionFilter[]>([]);
+  const reportParams = useMemo(() => getReportDateRangeFromPeriod(selectedPeriod), [selectedPeriod]);
+
+  const {
+    data: affiliateData,
+    isPending: isAffiliatePending,
+    isError: isAffiliateError,
+    refetch: refetchAffiliate,
+  } = useCurrentAffiliate();
+  const affiliate = affiliateData?.data ?? null;
+  const isAffiliate = !!affiliate;
+
+  const { data: reportData, isPending: isReportPending } = useAffiliateReportAnalytics(reportParams, {
+    enabled: isAffiliate,
+  });
+  const { data: couponsData, isPending: isCouponsPending } = useAffiliateCoupons({ enabled: isAffiliate });
+  const { data: transactionsData, isPending: isTransactionsPending } = useAffiliateTransactions(
+    { page: transactionsPage, limit: TRANSACTIONS_PAGE_SIZE, sort: 'id:desc', ...reportParams },
+    { enabled: isAffiliate }
+  );
+
+  const report = reportData?.data;
+  const balance = affiliate?.balance != null ? Number(affiliate.balance) : 0;
+  const coupons = (couponsData?.data ?? []).filter((coupon) => coupon.discount <= AFFILIATE_TOTAL_COMMISSION_PERCENT);
+  const transactionsTotal = transactionsData?.total ?? 0;
+  const transactionsTotalPages = Math.ceil(transactionsTotal / TRANSACTIONS_PAGE_SIZE);
+
+  // Filtro da página atual, igual à tela de afiliados.
+  const transactions = (transactionsData?.data ?? []).filter(
+    (transaction) =>
+      transactionFilters.length === 0 || transactionFilters.includes(transaction.status as TransactionFilter)
+  );
+
+  const handleToggleTransactionFilter = (value: TransactionFilter, checked: boolean) => {
+    setTransactionFilters((previous) =>
+      checked ? [...previous, value] : previous.filter((item) => item !== value)
+    );
+  };
+
+
+  if (isAffiliatePending) {
+    return (
+      <WorkspaceSection>
+        <Skeleton className="h-10 w-40 rounded-lg" />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton key={index} className="h-[170px] rounded-lg" />
+          ))}
+        </div>
+        <Skeleton className="h-40 rounded-lg" />
+      </WorkspaceSection>
+    );
+  }
+
+  if (isAffiliateError) {
+    return (
+      <WorkspaceSection>
+        <SectionLoadError
+          message={translate('common.account.workspace.loadFailed')}
+          onRetry={() => refetchAffiliate()}
+        />
+      </WorkspaceSection>
+    );
+  }
+
+  if (affiliate === null) {
+    return (
+      <WorkspaceSection>
+        <JoinProgramCard
+          onJoin={actions.joinProgram}
+          onOpenTerms={actions.openProgramTerms}
+          isJoining={actions.isJoiningProgram}
+        />
+      </WorkspaceSection>
+    );
+  }
+
+  return (
+    <WorkspaceSection>
+
+      <div className="flex items-center gap-2">
+        <Button className="h-10! gap-2" onClick={() => actions.requestWithdrawal(affiliate)}>
+          <IconCoin size={20} />
+          {translate('common.account.workspace.affiliates.requestWithdrawal')}
+        </Button>
+        <RowActionsMenu
+          width={220}
+          className="border border-zinc-200 bg-white"
+          items={[
+            {
+              icon: <IconBuildingBank size={20} className="text-zinc-400" />,
+              label: translate('common.account.workspace.affiliates.receivingAccount'),
+              onClick: () => actions.editReceivingAccount(affiliate),
+            },
+            {
+              icon: <IconUsers size={20} className="text-zinc-400" />,
+              label: translate('common.account.workspace.affiliates.listLeads'),
+              onClick: () => actions.listLeads(affiliate),
+            },
+            {
+              icon: <IconFileText size={20} className="text-zinc-400" />,
+              label: translate('common.account.workspace.affiliates.terms'),
+              onClick: actions.openTerms,
+            },
+          ]}
+        />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between gap-3">
+          <span className="paragraph-medium-semibold text-zinc-950">
+            {translate('common.account.workspace.affiliates.stats.heading')}
+          </span>
+          <DateFilterPopover selectedPeriod={selectedPeriod} onSelectPeriod={setSelectedPeriod} />
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+          <AffiliateStatsCard
+            icon={IconMail}
+            stats={[
+              {
+                label: translate('common.account.workspace.affiliates.stats.totalAffiliates'),
+                value: String(report?.customers.period ?? 0),
+              },
+            ]}
+            footerText={translate('common.account.workspace.affiliates.stats.selectedPeriod')}
+            isLoading={isReportPending}
+          />
+          <AffiliateStatsCard
+            icon={IconUsers}
+            stats={[
+              { label: translate('common.account.workspace.affiliates.stats.clicks'), value: String(report?.views.period ?? 0) },
+              { label: translate('common.account.workspace.affiliates.stats.leads'), value: String(report?.leads.period ?? 0) },
+            ]}
+            footerText={translate('common.account.workspace.affiliates.stats.selectedPeriod')}
+            isLoading={isReportPending}
+          />
+          <AffiliateStatsCard
+            icon={IconCurrencyDollar}
+            stats={[
+              { label: translate('common.account.workspace.affiliates.stats.balance'), value: formatCurrencyNumber(balance) },
+            ]}
+            footerText={translate('common.account.workspace.affiliates.stats.minBalance')}
+            footerIcon={IconInfoCircle}
+          />
+        </div>
+      </div>
+
+      <Tabs defaultValue="link" className="w-full gap-5">
+        <TabsList className="h-auto bg-transparent overflow-x-auto scrollbar-hide">
+          <TabsTrigger className={tabTriggerClasses} value="link">
+            <IconLink size={16} />
+            {translate('common.account.workspace.affiliates.tabs.link')}
+          </TabsTrigger>
+          <TabsTrigger className={tabTriggerClasses} value="commissions">
+            <IconMenu2 size={16} />
+            {translate('common.account.workspace.affiliates.tabs.commissions')}
+          </TabsTrigger>
+          <TabsTrigger className={tabTriggerClasses} value="reports">
+            <IconChartBar size={16} />
+            {translate('common.account.workspace.affiliates.tabs.reports')}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="link" className="flex flex-col gap-4">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+            <AffiliateStepCard
+              icon={IconMessageCircle}
+              title={translate('common.account.workspace.affiliates.steps.inviteTitle')}
+              description={translate('common.account.workspace.affiliates.steps.inviteDescription')}
+            />
+            <AffiliateStepCard
+              icon={IconUserPlus}
+              title={translate('common.account.workspace.affiliates.steps.registerTitle')}
+              description={translate('common.account.workspace.affiliates.steps.registerDescription')}
+            />
+            <AffiliateStepCard
+              icon={IconBookmark}
+              title={translate('common.account.workspace.affiliates.steps.trialTitle')}
+              description={translate('common.account.workspace.affiliates.steps.trialDescription')}
+            />
+          </div>
+
+          {isCouponsPending
+            ? Array.from({ length: 3 }).map((_, index) => <Skeleton key={index} className="h-[140px] rounded-lg" />)
+            : coupons.map((coupon) => (
+                <AffiliateCommissionCard
+                  key={coupon.id}
+                  commissionPercent={AFFILIATE_TOTAL_COMMISSION_PERCENT - coupon.discount}
+                  discountPercent={coupon.discount}
+                  affiliateCode={coupon.code}
+                  shareLink={getAffiliateShareLink(pagesUrl, coupon)}
+                />
+              ))}
+        </TabsContent>
+
+        <TabsContent value="commissions" className="flex flex-col gap-4">
+          <div className="flex items-center justify-between gap-3">
+            <span className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.account.workspace.affiliates.transactions.total', {
+                total: String(transactionsTotal),
+              })}
+            </span>
+            <FilterPopover
+              label={translate('common.account.workspace.affiliates.transactions.filter')}
+              width={224}
+              options={[
+                {
+                  value: 'consolidated',
+                  label: translate('common.account.workspace.affiliates.transactions.status.consolidated'),
+                },
+                {
+                  value: 'pending',
+                  label: translate('common.account.workspace.affiliates.transactions.filterApproval'),
+                },
+              ]}
+              selected={transactionFilters}
+              onToggle={handleToggleTransactionFilter}
+            />
+          </div>
+
+          <AffiliateTransactionsList
+            transactions={transactions}
+            isLoading={isTransactionsPending}
+            onViewAttachment={actions.viewAttachment}
+          />
+
+          <div>
+            <ListPagination
+              currentPage={transactionsPage}
+              totalPages={transactionsTotalPages}
+              onPageChange={setTransactionsPage}
+            />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="reports">
+          <AffiliatesReportsTab report={report} isLoading={isReportPending} />
+        </TabsContent>
+      </Tabs>
+
+      <AffiliateFlows />
+    </WorkspaceSection>
+  );
+}

package/src/components/account/sections/ChangePasswordSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { IconLock, IconX } from '@tabler/icons-react';
+import { IconArrowLeft, IconLock } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { Button } from '../../ui/buttons/Button';
 import { FormField } from '../../ui/form/FormField';
@@ -22,16 +22,12 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6"
+      className="flex-1 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 overscroll-contain px-4 py-5 pb-20 lg:px-8 lg:py-6 flex flex-col h-full gap-5 lg:gap-8"
     >
-      <div className="flex items-center justify-between">
-        <span className="paragraph-medium-semibold text-gray-950">
-          {translate('common.account.changePassword.title')}
-        </span>
-        <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
-          <IconX size={18} />
-        </Button>
-      </div>
+      <Button type="button" variant="secondary" className="h-10! w-fit" onClick={onBack}>
+        <IconArrowLeft size={18} />
+        {translate('common.actions.back')}
+      </Button>
 
       <div className="flex flex-col gap-4">
         <FormField