@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/subscription/SubscriptionPlanCard.tsx

@@ -0,0 +1,433 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { IconAlertTriangle, IconBolt, IconChevronRight, IconChevronsDown, IconPencil } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Progress } from '../../../ui/feedback/Progress';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { cn } from '../../../../infra/utils/clsx';
+import { daysBetween, formatShortDate, toCalendarDate } from '../../../../infra/utils/date';
+import { useWhitelabel } from '../../../../providers/whitelabel.provider';
+import { useManagementPermissions } from '../../../../modules/auth/hooks/useManagementPermissions';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { useCharges } from '../../../../modules/charges/hooks/charges.hook';
+import { useCurrentSubscription } from '../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { useAccountFreeze } from '../../../../modules/subscriptions/hooks/use-account-freeze.hook';
+import { ADDON_IDS } from '../../../../modules/subscriptions/constants/addons.constants';
+import { SUBSCRIPTION_GRACE_PERIOD_DAYS } from '../../../../modules/subscriptions/constants/subscription.constants';
+import { hasSubscriptionExpired } from '../../../../modules/subscriptions/utils/has-subscription-expired';
+import { getPeriodicityLabel } from '../../../../modules/subscriptions/utils/periodicity';
+import { isFreeSubscription } from '../../../../modules/subscriptions/utils/is-free-subscription';
+import { isApiSubscription } from '../../../../modules/subscriptions/utils/is-api-subscription';
+import { resolveSubscriptionPlanName } from '../../../../modules/subscriptions/utils/resolve-subscription-plan-name';
+import useSubscriptionActions from '../../hooks/useSubscriptionActions';
+import { AiCreditsPromo, AiCreditsUsage } from './AiCreditsUsage';
+import { IconBox } from '../shared/IconBox';
+import { RowActionsMenu } from '../shared/RowActionsMenu';
+import { StatusBadge } from '../shared/StatusBadge';
+
+const UPCOMING_CHARGE_DETAILS_WINDOW_DAYS = 7;
+
+function PlanCardShell({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex flex-col border border-zinc-200 rounded-lg min-w-0 bg-white', className)}>
+      {children}
+    </div>
+  );
+}
+
+function MoreDetailsButton({ onClick }: { onClick: () => void }) {
+  const translate = useTranslations();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-center gap-0.5 paragraph-small-semibold text-zinc-950 underline cursor-pointer hover:text-zinc-700 transition-colors w-fit"
+    >
+      {translate('common.account.workspace.subscription.planCard.moreDetails')}
+      <IconChevronRight size={14} strokeWidth={2.7} />
+    </button>
+  );
+}
+
+function PlanPrice({ value, muted = false }: { value: string; muted?: boolean }) {
+  const colorClasses = muted ? 'text-zinc-950 opacity-20' : 'text-zinc-950';
+
+  return (
+    <>
+      <span className={cn('md:hidden paragraph-xlarge-semibold', colorClasses)}>{value}</span>
+      <span className={cn('hidden md:inline title-large-semibold', colorClasses)}>{value}</span>
+    </>
+  );
+}
+
+export function SubscriptionPlanCard() {
+  const translate = useTranslations();
+  const {
+    data: { data: [subscription] = [] } = {},
+    isPending: isLoading,
+    isError,
+    refetch,
+  } = useCurrentSubscription();
+
+  const { isOwnerOrAdmin: canManage } = useManagementPermissions();
+  const { whitelabel } = useWhitelabel();
+  const isMainWhitelabel = whitelabel?.id === 1;
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const actions = useSubscriptionActions();
+  const { data: pendingChargesData } = useCharges({ page: 1, limit: 1, status: [0] });
+  const pendingCharge = pendingChargesData?.data?.[0] ?? null;
+  const { isFrozen } = useAccountFreeze();
+
+  const today = toCalendarDate(new Date());
+  const dueCalendarDate = toCalendarDate(subscription?.date_due);
+  const hiringCalendarDate = toCalendarDate(subscription?.date_hiring);
+  const trialDaysRemaining =
+    today && dueCalendarDate ? Math.max(0, daysBetween(today, dueCalendarDate)) : 0;
+  const trialTotalDays =
+    hiringCalendarDate && dueCalendarDate
+      ? Math.max(1, daysBetween(hiringCalendarDate, dueCalendarDate))
+      : trialDaysRemaining;
+  const trialProgressPercentage =
+    trialTotalDays > 0 ? ((trialTotalDays - trialDaysRemaining) / trialTotalDays) * 100 : 0;
+
+  const hasNoSubscription = !subscription;
+  const isFreePlan = !!subscription && isFreeSubscription(subscription) && subscription.active;
+  const isTrialPlan = subscription?.type === 'trial' && trialDaysRemaining > 0;
+  const isApiPlan = isApiSubscription(subscription);
+
+  if (!isLoading && isError) {
+    return (
+      <PlanCardShell>
+        <div className="p-2 flex-1">
+          <div className="flex flex-col justify-between gap-6 p-5 lg:p-6 bg-zinc-50 rounded-lg h-full">
+            <div className="flex items-center gap-4">
+              <IconBox icon={IconAlertTriangle} />
+              <span className="paragraph-medium-semibold text-zinc-950">
+                {translate('common.account.workspace.subscription.planCard.readFailed')}
+              </span>
+            </div>
+            <Button variant="secondary" onClick={() => refetch()} className="w-fit h-10!">
+              {translate('common.account.workspace.subscription.planCard.readFailedRetry')}
+            </Button>
+          </div>
+        </div>
+      </PlanCardShell>
+    );
+  }
+
+  if (!isLoading && !isTrialPlan && (hasNoSubscription || isFreePlan)) {
+    return (
+      <PlanCardShell>
+        <div className="p-2 flex-1">
+          <div className="flex flex-col justify-between gap-6 p-5 lg:p-6 bg-zinc-50 rounded-lg h-full">
+            <div className="flex items-center gap-4">
+              <IconBox icon={IconBolt} />
+              <span className="paragraph-medium-semibold text-zinc-950">
+                {hasNoSubscription
+                  ? translate('common.account.workspace.subscription.planCard.noSubscription')
+                  : translate('common.account.workspace.subscription.planCard.freePlan')}
+              </span>
+            </div>
+            {canManage && (
+              <Button onClick={actions.choosePlan} className="w-fit h-10!">
+                {translate('common.account.workspace.subscription.planCard.choosePlan')}
+              </Button>
+            )}
+          </div>
+        </div>
+        {isMainWhitelabel && <AiCreditsPromo isMainWhitelabel={isMainWhitelabel} />}
+      </PlanCardShell>
+    );
+  }
+
+  if (!isLoading && isTrialPlan) {
+    // Contas trial têm créditos de IA inclusos (id_addon=6): mostram o mesmo uso/relatório
+    // do plano pago quando a assinatura tem item de crédito de IA.
+    const trialHasAiCredits = subscription?.items?.some((item) => item.id_addon === ADDON_IDS.AI) ?? false;
+
+    return (
+      <PlanCardShell>
+        <div className="p-2">
+          <div className="flex flex-col gap-6 p-5 lg:p-6 bg-zinc-50 rounded-lg">
+            <div className="flex items-center gap-4">
+              <IconBox icon={IconBolt} />
+              <div className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="paragraph-medium-semibold text-zinc-950">
+                    {translate('common.account.workspace.subscription.planCard.planName', {
+                      name: resolveSubscriptionPlanName(subscription, translate),
+                    })}
+                  </span>
+                  <span className="paragraph-medium-regular text-zinc-400">
+                    {translate('common.account.workspace.subscription.planCard.trialBadge')}
+                  </span>
+                </div>
+                {isMainWhitelabel && <MoreDetailsButton onClick={actions.viewPlanDetails} />}
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <span className="paragraph-small-regular text-zinc-600">
+                {translate('common.account.workspace.subscription.planCard.trialDaysRemaining', {
+                  days: String(trialDaysRemaining),
+                })}
+              </span>
+              <Progress value={trialProgressPercentage} indicatorColor="bg-zinc-950" className="bg-zinc-200 h-2" />
+            </div>
+            {canManage && (
+              <Button onClick={actions.choosePlan} className="w-fit h-10!">
+                {translate('common.account.workspace.subscription.planCard.hirePlan')}
+              </Button>
+            )}
+          </div>
+        </div>
+        {isMainWhitelabel &&
+          (trialHasAiCredits ? (
+            <AiCreditsUsage
+              canManage={canManage}
+              isApiPlan={false}
+              cancelled={false}
+              onViewUsageReport={actions.viewUsageReport}
+            />
+          ) : (
+            <AiCreditsPromo isMainWhitelabel={isMainWhitelabel} />
+          ))}
+      </PlanCardShell>
+    );
+  }
+
+  const pendingChange = subscription?.pending_change ?? null;
+  const hasPendingDowngrade =
+    !!pendingChange?.takes_effect_at_iso &&
+    !!pendingChange.new_plan &&
+    new Date(pendingChange.takes_effect_at_iso) > new Date();
+
+  const planName = translate('common.account.workspace.subscription.planCard.planName', {
+    name: resolveSubscriptionPlanName(
+      subscription,
+      translate,
+      translate('common.account.workspace.subscription.planCard.noName')
+    ),
+  });
+  const cancelled = !!subscription?.date_cancellation;
+  const isPartnerPlan = subscription?.type === 'partner';
+  // Assinatura efetivamente cancelada (active === false, ex.: baixa por falha de pagamento):
+  // a linha de data não faz sentido, o badge "Cancelado" já cobre.
+  const isEffectivelyCancelled = !subscription?.active;
+
+  const planPrice = formatCurrencyNumber(subscription?.value ?? 0);
+  const periodicityLabel = getPeriodicityLabel(subscription?.periodicity, translate);
+  const cancellationDate = toCalendarDate(subscription?.date_cancellation);
+  const hasFutureCancellation =
+    !!subscription?.date_cancellation &&
+    !!cancellationDate &&
+    !!today &&
+    cancellationDate.getTime() > today.getTime();
+  const daysToDue = today && dueCalendarDate ? daysBetween(today, dueCalendarDate) : null;
+  const daysSinceDue = today && dueCalendarDate ? daysBetween(dueCalendarDate, today) : null;
+  const isWithinChargeDetailsWindow =
+    daysToDue != null &&
+    daysSinceDue != null &&
+    ((daysToDue >= 0 && daysToDue <= UPCOMING_CHARGE_DETAILS_WINDOW_DAYS) ||
+      (daysSinceDue > 0 && daysSinceDue <= SUBSCRIPTION_GRACE_PERIOD_DAYS));
+  const isOverdue = !!today && !!dueCalendarDate && today.getTime() > dueCalendarDate.getTime();
+  const isExpired = hasSubscriptionExpired(subscription?.date_due);
+
+  const canOpenChargeDetails = !!pendingCharge && !hasFutureCancellation && isWithinChargeDetailsWindow;
+
+  const handleOpenChargeDetails = () => {
+    if (!canOpenChargeDetails || !pendingCharge) return;
+    actions.viewCharge(pendingCharge);
+  };
+
+  const renewalDateLabel = isExpired
+    ? translate('common.account.workspace.subscription.planCard.expired')
+    : isOverdue
+      ? translate('common.account.workspace.subscription.planCard.overdueDate', {
+          date: formatShortDate(subscription?.date_due),
+        })
+      : translate('common.account.workspace.subscription.planCard.expiresOn', {
+          date: formatShortDate(subscription?.date_due),
+        });
+
+  const statusBadge = cancelled ? (
+    <StatusBadge tone="red">{translate('common.account.workspace.subscription.planCard.cancelled')}</StatusBadge>
+  ) : isFrozen ? (
+    <StatusBadge tone="red">{translate('common.account.workspace.subscription.planCard.frozen')}</StatusBadge>
+  ) : (
+    <StatusBadge tone="blue">{periodicityLabel}</StatusBadge>
+  );
+
+  const planActionsMenu = (
+    <RowActionsMenu
+      width={220}
+      items={[
+        {
+          icon: <IconPencil size={20} />,
+          label: translate('common.account.workspace.subscription.planCard.billingAddress'),
+          onClick: actions.editBillingAddress,
+        },
+        {
+          icon: <IconAlertTriangle size={20} className="text-red-600" />,
+          label: translate('common.account.workspace.subscription.planCard.cancelPlan'),
+          onClick: actions.cancelPlan,
+          destructive: true,
+        },
+      ]}
+    />
+  );
+
+  const payButton = canOpenChargeDetails && (
+    <Button variant="secondary" className="h-10! flex-1 md:flex-none min-w-0" onClick={handleOpenChargeDetails}>
+      {translate('common.account.workspace.subscription.planCard.paySubscription')}
+    </Button>
+  );
+
+  if (hasPendingDowngrade && pendingChange?.new_plan) {
+    const pendingPlanName = translate('common.account.workspace.subscription.planCard.planName', {
+      name: pendingChange.new_plan.name,
+    });
+    const pendingPlanPrice = formatCurrencyNumber(pendingChange.new_plan.value);
+    const pendingPeriodicityLabel = getPeriodicityLabel(pendingChange.new_plan.periodicity, translate);
+    const pendingDateLabel = translate('common.account.workspace.subscription.planCard.pendingDate', {
+      date: formatShortDate(pendingChange.takes_effect_at_iso),
+    });
+
+    return (
+      <PlanCardShell>
+        <div className="p-2">
+          <div className="flex flex-col p-5 lg:p-6 bg-zinc-50 rounded-lg justify-between gap-3">
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-1.5 flex-wrap">
+                <span className="paragraph-small-regular text-zinc-500">
+                  {translate('common.account.workspace.subscription.planCard.current')}
+                </span>
+                <span className="paragraph-small-regular text-zinc-500">•</span>
+                <span className="paragraph-small-semibold text-zinc-950">{planName}</span>
+                <StatusBadge tone="blue">{periodicityLabel}</StatusBadge>
+              </div>
+              {isMainWhitelabel && <MoreDetailsButton onClick={actions.viewPlanDetails} />}
+              <PlanPrice value={planPrice} />
+            </div>
+
+            <div className="flex items-center gap-2 py-1">
+              <div className="flex flex-col items-center">
+                <div className="w-px h-4 border-l border-dashed border-zinc-300" />
+                <div className="size-7 rounded-full border border-zinc-200 bg-white flex items-center justify-center">
+                  <IconChevronsDown size={16} className="text-zinc-400" />
+                </div>
+                <div className="w-px h-4 border-l border-dashed border-zinc-300" />
+              </div>
+            </div>
+
+            <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-1.5 flex-wrap">
+                  <span className="paragraph-small-regular text-zinc-500">{pendingDateLabel}</span>
+                  <span className="paragraph-small-regular text-zinc-500">•</span>
+                  <span className="paragraph-small-semibold text-zinc-950">{pendingPlanName}</span>
+                  <StatusBadge tone="blue">{pendingPeriodicityLabel}</StatusBadge>
+                </div>
+                <div className="flex items-center gap-2">
+                  <PlanPrice value={pendingPlanPrice} />
+                  <button
+                    type="button"
+                    onClick={() => actions.viewPendingChange(pendingChange)}
+                    className="paragraph-xsmall-medium text-zinc-500 underline cursor-pointer hover:text-zinc-700 transition-colors"
+                  >
+                    {translate('common.account.workspace.subscription.planCard.details')}
+                  </button>
+                </div>
+              </div>
+
+              {canManage && (
+                <div className="flex items-center gap-2 shrink-0">
+                  <Button className="h-10! flex-1 md:flex-none min-w-0" onClick={actions.changePlan}>
+                    {translate('common.account.workspace.subscription.planCard.changePlan')}
+                  </Button>
+                  {payButton}
+                  {planActionsMenu}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        {!isApiPlan && isMainWhitelabel && (
+          <AiCreditsUsage
+            canManage={canManage}
+            isApiPlan={isApiPlan}
+            cancelled={cancelled}
+            onViewUsageReport={actions.viewUsageReport}
+          />
+        )}
+      </PlanCardShell>
+    );
+  }
+
+  return (
+    <PlanCardShell>
+      <div className={cn('p-2', isApiPlan && 'flex-1 flex flex-col')}>
+        <div
+          className={cn(
+            'flex flex-col p-5 lg:p-6 bg-zinc-50 rounded-lg min-h-56.25 justify-between gap-8 md:gap-3',
+            isApiPlan && 'flex-1'
+          )}
+        >
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 md:gap-3">
+            <div className="flex items-center gap-4">
+              <IconBox icon={IconBolt} />
+              <div className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {isLoading ? (
+                    <Skeleton className="h-4 w-28 rounded" />
+                  ) : (
+                    <span className="paragraph-medium-semibold text-zinc-950">{planName}</span>
+                  )}
+                  {!isLoading && statusBadge}
+                </div>
+                {!isLoading && isMainWhitelabel && <MoreDetailsButton onClick={actions.viewPlanDetails} />}
+              </div>
+            </div>
+            {isLoading ? (
+              <Skeleton className="h-4 w-28 rounded" />
+            ) : !isPartnerPlan && !isEffectivelyCancelled ? (
+              <span className="text-zinc-500 paragraph-small-medium">{renewalDateLabel}</span>
+            ) : null}
+          </div>
+
+          {canManage && (
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+              {isLoading ? <Skeleton className="h-7 w-28 rounded" /> : <PlanPrice value={planPrice} muted={cancelled} />}
+              {cancelled ? (
+                <div className="flex flex-col md:flex-row md:items-center gap-2">
+                  <Button className="h-10!" onClick={actions.choosePlan}>
+                    {translate('common.account.workspace.subscription.planCard.choosePlan')}
+                  </Button>
+                  {payButton}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <Button className="h-10! flex-1 md:flex-none min-w-0" onClick={actions.changePlan}>
+                    {translate('common.account.workspace.subscription.planCard.changePlan')}
+                  </Button>
+                  {payButton}
+                  {planActionsMenu}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      {!isApiPlan && isMainWhitelabel && (
+        <AiCreditsUsage
+          canManage={canManage}
+          isApiPlan={isApiPlan}
+          cancelled={cancelled}
+          onViewUsageReport={actions.viewUsageReport}
+        />
+      )}
+    </PlanCardShell>
+  );
+}

package/src/components/account/sections/subscription/UsageReportSheet.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { IconCornerDownRight, IconExternalLink } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';
+import { useIaCreditOperations } from '../../../../modules/ia-credits/hooks/ia-credit-operations.hook';
+import { useWhitelabel } from '../../../../providers/whitelabel.provider';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+
+type UsageItem = {
+  description: string;
+  author: string;
+  credits: number;
+};
+
+type UsageGroup = {
+  date: string;
+  items: UsageItem[];
+};
+
+type CreditPurchase = {
+  id: string;
+  addedCredits: number;
+  consumedCredits: number;
+  purchaseDateLabel: string;
+  expiresInDays: number | null;
+  expired: boolean;
+  groups: UsageGroup[];
+};
+
+/** O consumo guarda a página em `operation_ref` ("… - Página ID: 123"). */
+function extractPageId(description: string): string | null {
+  const pageId = description.split('-')[1]?.replace('Página ID: ', ' ').trim();
+  return pageId || null;
+}
+
+function UsageItemRow({ item }: { item: UsageItem }) {
+  const translate = useTranslations('common.account.workspace.subscription.usageReport');
+  const { whitelabel } = useWhitelabel();
+  const pageId = extractPageId(item.description);
+  const pageUrl = pageId && whitelabel?.pages_url ? `${whitelabel.pages_url}/pages/${pageId}` : null;
+
+  return (
+    <div className="flex items-center gap-4">
+      <IconCornerDownRight size={18} className="text-zinc-400 shrink-0" />
+      <div className="flex flex-col gap-1 flex-1">
+        <span className="paragraph-small-semibold text-zinc-950">{item.description.split('-')[0]}</span>
+        <p className="paragraph-small-regular text-zinc-600">
+          {translate.rich('madeBy', {
+            author: item.author,
+            b: (chunks) => <span className="paragraph-small-medium">{chunks}</span>,
+          })}
+        </p>
+      </div>
+      <span className="paragraph-small-semibold text-zinc-950 text-right shrink-0">
+        {translate('creditsLabel', { credits: String(item.credits) })}
+      </span>
+      {pageUrl && (
+        <Tooltip delayDuration={300}>
+          <TooltipTrigger asChild>
+            <Button
+              variant="secondary"
+              size="icon-lg"
+              className="size-8 shrink-0"
+              onClick={() => window.open(pageUrl, '_blank', 'noopener,noreferrer')}
+            >
+              <IconExternalLink size={16} className="text-zinc-950" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{translate('viewPage')}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+function PurchaseSection({ purchase }: { purchase: CreditPurchase }) {
+  const translate = useTranslations('common.account.workspace.subscription.usageReport');
+
+  const expiresLabel = purchase.expired
+    ? translate('expired')
+    : purchase.expiresInDays != null
+      ? purchase.expiresInDays === 1
+        ? translate('expiresInOneDay')
+        : translate('expiresInDays', { days: String(purchase.expiresInDays) })
+      : '';
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <span className="paragraph-medium-semibold text-zinc-950">
+          {translate('creditsAdded', { count: String(purchase.addedCredits) })}
+        </span>
+        <span className="paragraph-small-regular text-zinc-600">{purchase.purchaseDateLabel}</span>
+      </div>
+
+      <div className="flex items-start justify-between">
+        <span className="paragraph-small-regular text-zinc-600">
+          {translate('creditsUsed', {
+            consumed: String(purchase.consumedCredits),
+            total: String(purchase.addedCredits),
+          })}
+        </span>
+        {expiresLabel && <span className="paragraph-small-medium text-zinc-950">{expiresLabel}</span>}
+      </div>
+
+      {purchase.groups.map((group) => (
+        <div key={group.date} className="flex flex-col gap-5 p-4 bg-zinc-50 rounded-lg">
+          <span className="paragraph-small-semibold text-zinc-600">{group.date}</span>
+          {group.items.map((item, index) => (
+            <div key={`${group.date}-${index}`}>
+              {index > 0 && <Separator className="mb-5" />}
+              <UsageItemRow item={item} />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** Consumo de créditos de IA lote a lote, com quem gastou e em qual página. */
+export function UsageReportSheet() {
+  const translate = useTranslations('common.account.workspace.subscription.usageReport');
+  const isMobile = useIsMobile();
+  const isOpen = useSubscriptionFlows((state) => state.isUsageReportOpen);
+  const close = useSubscriptionFlows((state) => state.closeUsageReport);
+
+  const { operations, isLoading } = useIaCreditOperations();
+
+  // Agrupa os consumos (subtract) sob o lote que os originou (add), via `consumed_from_add_id`.
+  const adds = operations.filter((operation) => operation.operation === 'add');
+  const subtracts = operations.filter((operation) => operation.operation === 'subtract');
+
+  const purchases: CreditPurchase[] = adds.map((add) => {
+    const purchaseDate = add.datetime_add ? new Date(add.datetime_add) : new Date();
+    const today = new Date();
+    const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+    const expiration = add.expiration_time ? new Date(add.expiration_time) : null;
+    const expirationDate =
+      expiration && new Date(expiration.getFullYear(), expiration.getMonth(), expiration.getDate());
+    const expired = add.has_expired || (expirationDate != null && expirationDate.getTime() < todayDate.getTime());
+
+    let expiresInDays: number | null = null;
+    if (!expired && expirationDate) {
+      const diffMs = expirationDate.getTime() - todayDate.getTime();
+      expiresInDays = Math.max(0, Math.ceil(diffMs / (1000 * 60 * 60 * 24)));
+    }
+
+    const relatedSubtracts = subtracts.filter(
+      (subtract) => String(subtract.consumed_from_add_id) === String(add.id)
+    );
+    const consumedCredits = relatedSubtracts.reduce(
+      (sum, subtract) => sum + subtract.operation_value,
+      0
+    );
+
+    const groupsMap = new Map<string, UsageGroup>();
+    for (const subtract of relatedSubtracts) {
+      const date = subtract.datetime_add ? new Date(subtract.datetime_add) : new Date();
+      const dateLabel = date.toLocaleDateString('pt-BR');
+      const item: UsageItem = {
+        description: subtract.operation_ref || translate('defaultRef'),
+        author: subtract.user_name || translate('defaultUser'),
+        credits: subtract.operation_value,
+      };
+
+      const existing = groupsMap.get(dateLabel);
+      if (existing) existing.items.push(item);
+      else groupsMap.set(dateLabel, { date: dateLabel, items: [item] });
+    }
+
+    return {
+      id: String(add.id),
+      addedCredits: add.operation_value,
+      consumedCredits,
+      purchaseDateLabel: purchaseDate.toLocaleDateString('pt-BR'),
+      expiresInDays,
+      expired,
+      groups: Array.from(groupsMap.values()),
+    };
+  });
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className={cn(
+          'flex flex-col gap-0 p-0',
+          isMobile
+            ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : 'w-[480px]! sm:max-w-[480px]!'
+        )}
+      >
+        <SheetHeader className="px-4 sm:px-5 py-3 border-b border-zinc-200">
+          <SheetTitle className="paragraph-medium-semibold text-zinc-950">{translate('title')}</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-5 sm:gap-6 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 px-4 sm:px-5 py-5 sm:py-6">
+          {isLoading && purchases.length === 0 && (
+            <div className="flex flex-col gap-6">
+              {[0, 1, 2].map((key) => (
+                <div key={key} className="flex flex-col gap-4">
+                  <div className="flex flex-col gap-2">
+                    <Skeleton className="h-4 w-40 rounded" />
+                    <Skeleton className="h-3 w-28 rounded" />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <Skeleton className="h-3 w-40 rounded" />
+                    <Skeleton className="h-3 w-24 rounded" />
+                  </div>
+                  <div className="flex flex-col gap-3 p-4 bg-zinc-50 rounded-lg">
+                    <Skeleton className="h-3 w-32 rounded" />
+                    <Skeleton className="h-3 w-full rounded" />
+                    <Skeleton className="h-3 w-2/3 rounded" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {!isLoading && purchases.length === 0 && (
+            <span className="paragraph-small-regular text-zinc-500">{translate('noHistory')}</span>
+          )}
+
+          {purchases.map((purchase, index) => (
+            <div key={purchase.id}>
+              {index > 0 && <Separator className="mb-6" />}
+              <PurchaseSection purchase={purchase} />
+            </div>
+          ))}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}