@greatapps/common 1.1.790 → 1.1.792

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

@@ -0,0 +1,104 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { IconBarcode, IconCopy, IconExternalLink } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Toast } from '../../../ui/feedback/Toast';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import type { Charge } from '../../../../modules/charges/types/charge.type';
+import { copyToClipboard } from '../../../../utils/browser/clipboard';
+
+type BoletoDetailsDialogProps = {
+  open: boolean;
+  charge: Charge | null | undefined;
+  onOpenChange: (open: boolean) => void;
+};
+
+function InfoRow({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <div className="flex flex-col lg:flex-row gap-1 lg:gap-3 lg:items-center">
+      <span className="paragraph-small-medium text-zinc-950 lg:w-[160px] shrink-0">{label}</span>
+      <span className="paragraph-small-regular text-zinc-600">{value}</span>
+    </div>
+  );
+}
+
+/** Linha digitável e link do boleto de uma cobrança em aberto. */
+export function BoletoDetailsDialog({ open, charge, onOpenChange }: BoletoDetailsDialogProps) {
+  const translate = useTranslations('common.account.workspace.subscription.boletoDetails');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  const paymentDetails = charge?.payment_details as Record<string, unknown> | null | undefined;
+  const boletoDetails = paymentDetails?.type === 'boleto' ? paymentDetails : null;
+  const boletoBarcode = boletoDetails?.barcode as string | null | undefined;
+  const boletoUrl =
+    (boletoDetails?.hosted_voucher_url as string | null | undefined) ??
+    (boletoDetails?.pdf as string | null | undefined) ??
+    charge?.gateway_billet ??
+    charge?.invoice_url;
+
+  const handleCopyBarcode = async () => {
+    if (!boletoBarcode) return;
+    await copyToClipboard(boletoBarcode);
+    toast.custom((toastId) => (
+      <Toast variant="success" message={translate('copiedToast')} toastId={toastId} />
+    ));
+  };
+
+  if (!charge) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex flex-col p-0 gap-0 w-full md:w-115 lg:w-115">
+        <DialogHeader className="gap-3 text-left p-5">
+          <div className="flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg">
+            <IconBarcode size={24} className="text-zinc-950" />
+          </div>
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+            {translate('title')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 px-5 pb-5">
+          <div className="flex flex-col gap-3">
+            <InfoRow label={translate('valueLabel')} value={formatCurrencyNumber(charge.value)} />
+            {charge.date_due && (
+              <InfoRow
+                label={translate('dueDate')}
+                value={new Date(charge.date_due).toLocaleDateString('pt-BR', { timeZone: 'UTC' })}
+              />
+            )}
+          </div>
+
+          {boletoBarcode && (
+            <div className="flex flex-col gap-2 p-4 bg-zinc-50 rounded-lg">
+              <span className="paragraph-xsmall-medium text-zinc-500">{translate('digitableLine')}</span>
+              <span className="paragraph-small-medium text-zinc-950 break-all">{boletoBarcode}</span>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            {boletoBarcode && (
+              <Button variant="secondary" className="h-10 flex-1" onClick={handleCopyBarcode}>
+                <IconCopy size={20} />
+                {translate('copyCode')}
+              </Button>
+            )}
+            {boletoUrl && (
+              <Button
+                className="h-10 flex-1"
+                onClick={() => window.open(boletoUrl, '_blank', 'noopener,noreferrer')}
+              >
+                <IconExternalLink size={20} />
+                {translate('openBoleto')}
+              </Button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { useChargeById } from '../../../../modules/charges/hooks/charge-by-id.hook';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+import { BoletoDetailsDialog } from './BoletoDetailsDialog';
+
+/**
+ * Boleto da assinatura recém-contratada. A cobrança é buscada pelo id da assinatura criada —
+ * é o mesmo dado que o cliente veria depois na lista de cobranças, só que já aberto.
+ */
+export function BoletoGeneratedDialog() {
+  const boletoGenerated = useSubscriptionFlows((state) => state.boletoGenerated);
+  const close = useSubscriptionFlows((state) => state.closeBoletoGenerated);
+
+  const { data: chargeResult } = useChargeById(boletoGenerated?.subscriptionId);
+
+  return (
+    <BoletoDetailsDialog
+      open={!!boletoGenerated && !!chargeResult?.data}
+      charge={chargeResult?.data}
+      onOpenChange={(nextOpen) => !nextOpen && close()}
+    />
+  );
+}

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

@@ -0,0 +1,221 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { IconAlertTriangle, IconClockHour7 } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Toast } from '../../../ui/feedback/Toast';
+import { SelectField } from '../../../ui/form/SelectField';
+import { TextAreaField } from '../../../ui/form/TextAreaField';
+import { Dialog, DialogContent } from '../../../ui/overlay/Dialog';
+import { useCountPages } from '../../../../modules/pages/hooks/count-pages.hook';
+import { useProjects } from '../../../../modules/projects/hooks/list-projects.hook';
+import { useCancelSubscription } from '../../../../modules/subscriptions/hooks/cancel-subscription.hook';
+import { useCurrentSubscription } from '../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { resolveSubscriptionPlanName } from '../../../../modules/subscriptions/utils/resolve-subscription-plan-name';
+import { useWhitelabel } from '../../../../providers/whitelabel.provider';
+import { formatShortDate } from '../../../../infra/utils/date';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+import { IconBox } from '../shared/IconBox';
+
+/**
+ * Cancelamento do plano em dois passos: motivo e descrição, e depois a confirmação com o que a
+ * conta perde e quantos dias ainda restam.
+ */
+export function CancelPlanDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations('common.account.workspace.subscription.cancelPlan');
+  const translateConfirm = useTranslations('common.account.workspace.subscription.confirmCancel');
+  const { whitelabel } = useWhitelabel();
+
+  const isOpen = useSubscriptionFlows((state) => state.isCancelPlanOpen);
+  const close = useSubscriptionFlows((state) => state.closeCancelPlan);
+
+  const [reason, setReason] = useState('');
+  const [description, setDescription] = useState('');
+  const [isConfirming, setIsConfirming] = useState(false);
+
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const { mutateAsync: cancelSubscription, isPending } = useCancelSubscription();
+  const { data: projectsData, isLoading: isLoadingProjects } = useProjects();
+  const { data: totalPages, isLoading: isLoadingPages } = useCountPages();
+
+  const totalProjects = projectsData?.total ?? 0;
+
+  const daysUntilEnd = useMemo(() => {
+    if (!subscription?.date_due) return 0;
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const due = new Date(subscription.date_due);
+    due.setHours(0, 0, 0, 0);
+
+    return Math.max(0, Math.ceil((due.getTime() - today.getTime()) / 86_400_000));
+  }, [subscription]);
+
+  const cancelReasons = [
+    { value: 'too_expensive', label: translateDialog('reasons.tooExpensive') },
+    { value: 'missing_features', label: translateDialog('reasons.missingFeatures') },
+    { value: 'switched_service', label: translateDialog('reasons.switchedService') },
+    { value: 'unused', label: translateDialog('reasons.unused') },
+    { value: 'customer_service', label: translateDialog('reasons.customerService') },
+    { value: 'too_complex', label: translateDialog('reasons.tooComplex') },
+    { value: 'low_quality', label: translateDialog('reasons.lowQuality') },
+    { value: 'other', label: translateDialog('reasons.other') },
+  ];
+
+  const handleClose = () => {
+    setReason('');
+    setDescription('');
+    setIsConfirming(false);
+    close();
+  };
+
+  const handleContinue = () => {
+    if (!reason.trim() || !description.trim()) {
+      toast.custom((toastId) => (
+        <Toast variant="error" message={translateDialog('requiredFields')} toastId={toastId} />
+      ));
+      return;
+    }
+
+    setIsConfirming(true);
+  };
+
+  const handleConfirmCancel = async () => {
+    if (!subscription?.id) return;
+
+    try {
+      await cancelSubscription({
+        subscriptionId: subscription.id,
+        data: { cancellation_reason: reason, cancellation_description: description },
+      });
+      handleClose();
+      toast.custom((toastId) => (
+        <Toast variant="success" message={translateConfirm('successToast')} toastId={toastId} />
+      ));
+    } catch {
+      toast.custom((toastId) => (
+        <Toast variant="error" message={translateConfirm('errorToast')} toastId={toastId} />
+      ));
+    }
+  };
+
+  const planName = resolveSubscriptionPlanName(subscription, translate, 'Agência');
+  const dueDate = subscription?.date_due ? formatShortDate(subscription.date_due) : '—';
+
+  if (isConfirming) {
+    return (
+      <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+        <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">{translateConfirm('title')}</span>
+
+            <div className="flex flex-col gap-4 lg:gap-5 bg-red-50 rounded-lg p-4 lg:p-5">
+              <div className="flex items-center gap-4">
+                <IconAlertTriangle size={24} className="text-red-600 shrink-0" />
+                <p className="paragraph-small-regular text-zinc-500">
+                  {translateConfirm.rich('projectsAndPages', {
+                    totalProjects: () =>
+                      isLoadingProjects ? (
+                        <Skeleton className="inline-block w-4 h-4 align-middle" />
+                      ) : (
+                        <>{String(totalProjects)}</>
+                      ),
+                    totalPages: () =>
+                      isLoadingPages ? (
+                        <Skeleton className="inline-block w-4 h-4 align-middle" />
+                      ) : (
+                        <>{String(totalPages ?? 0)}</>
+                      ),
+                    b: (chunks) => <span className="font-semibold text-zinc-950">{chunks}</span>,
+                  })}
+                </p>
+              </div>
+              <div className="h-px bg-red-100" />
+              <div className="flex items-center gap-4">
+                <IconClockHour7 size={24} className="text-red-600 shrink-0" />
+                <p className="paragraph-small-semibold text-zinc-950">
+                  {translateConfirm('daysUntilEnd', {
+                    daysUntilEnd: String(daysUntilEnd),
+                    unit: daysUntilEnd === 1 ? translateConfirm('dayUnit') : translateConfirm('daysUnit'),
+                  })}
+                </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={handleConfirmCancel} loading={isPending}>
+              {translateConfirm('submit')}
+            </Button>
+            <Button variant="secondary" className="h-10 w-fit" onClick={handleClose}>
+              {translateConfirm('keep')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] 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">
+        <div className="flex flex-col gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
+          <IconBox className="bg-red-50 shadow-none" iconClassName="text-red-600" icon={IconAlertTriangle} />
+
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-zinc-950">
+              {translateDialog('title', { planName })}
+            </span>
+            <p className="paragraph-small-regular text-zinc-500">
+              {translateDialog.rich('description', {
+                whitelabelName: whitelabel?.name || '',
+                dueDate,
+                b: (chunks) => <span className="font-semibold text-zinc-950">{chunks}</span>,
+              })}
+            </p>
+          </div>
+
+          <SelectField
+            label={translateDialog('reasonLabel')}
+            required
+            placeholder={translateDialog('reasonPlaceholder')}
+            options={cancelReasons}
+            value={reason}
+            onChange={(value) => setReason(value as string)}
+          />
+
+          <div>
+            <TextAreaField
+              label={translateDialog('descriptionLabel')}
+              required
+              placeholder={translateDialog('descriptionPlaceholder')}
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              rows={4}
+              maxLength={400}
+            />
+            <span className="paragraph-xsmall-medium text-zinc-600 text-left mt-1 block">
+              {translateDialog('charactersCount', { count: String(description.length) })}
+            </span>
+          </div>
+        </div>
+
+        <div className="border-t border-zinc-200 flex flex-row items-center gap-2 px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
+          <Button className="h-10 w-fit" onClick={handleContinue}>
+            {translateDialog('submit')}
+          </Button>
+          <Button variant="secondary" className="h-10 w-fit" onClick={handleClose}>
+            {translate('common.actions.close')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,161 @@
+'use client';
+
+import { IconDownload } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { getChargeDownloadUrl } from '../../../../modules/charges/utils/get-charge-download-url';
+import type { Charge } from '../../../../modules/charges/types/charge.type';
+import { ChargeStatusBadge } from './ChargeStatusBadge';
+
+type ChargeRowProps = {
+  charge: Charge;
+  onPay: (charge: Charge) => void;
+  onDownload: (url: string) => void;
+  onViewDetails: (charge: Charge) => void;
+};
+
+function formatChargeDate(charge: Charge, withTime: boolean): string {
+  const date = charge.date_created ?? charge.datetime_add ?? charge.date_due ?? null;
+  if (!date) return '—';
+
+  return new Date(date).toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    ...(withTime && { hour: '2-digit', minute: '2-digit' }),
+  });
+}
+
+function useChargeRow(charge: Charge) {
+  const translate = useTranslations();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const downloadUrl = getChargeDownloadUrl(charge);
+
+  return {
+    title:
+      charge.line_descriptions?.[0] ||
+      charge.description ||
+      charge.title ||
+      translate('common.account.workspace.subscription.charges.defaultTitle'),
+    subtitle: charge.line_descriptions?.length ? charge.description : undefined,
+    value: formatCurrencyNumber(charge.value),
+    downloadUrl: charge.status === 1 ? downloadUrl : null,
+    canPay: charge.status === 0,
+  };
+}
+
+export function ChargeRow({ charge, onPay, onDownload, onViewDetails }: ChargeRowProps) {
+  const translate = useTranslations();
+  const { title, subtitle, value, downloadUrl, canPay } = useChargeRow(charge);
+
+  return (
+    <div
+      className="flex items-center gap-6 px-6 py-5 cursor-pointer hover:bg-zinc-50 transition-colors"
+      onClick={() => onViewDetails(charge)}
+    >
+      <span className="w-36 shrink-0 paragraph-small-regular text-zinc-600">{formatChargeDate(charge, true)}</span>
+
+      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className="paragraph-small-semibold text-zinc-600 truncate" title={title}>
+          {title}
+        </span>
+        {subtitle && <span className="paragraph-xsmall-medium text-zinc-500 truncate">{subtitle}</span>}
+      </div>
+
+      <span className="w-28 shrink-0 paragraph-small-semibold text-zinc-600 whitespace-nowrap">{value}</span>
+
+      <div className="w-32 shrink-0">
+        <ChargeStatusBadge status={charge.status} />
+      </div>
+
+      <div className="flex items-center justify-end gap-2 w-44 shrink-0">
+        {canPay && (
+          <Button
+            className="h-10! px-4.5"
+            onClick={(event) => {
+              event.stopPropagation();
+              onPay(charge);
+            }}
+          >
+            {translate('common.account.workspace.subscription.charges.pay')}
+          </Button>
+        )}
+        {downloadUrl && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                className="size-10! p-0"
+                aria-label={translate('common.account.workspace.subscription.charges.downloadReceipt')}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onDownload(downloadUrl);
+                }}
+              >
+                <IconDownload size={20} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {translate('common.account.workspace.subscription.charges.downloadReceipt')}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        <Button
+          variant="secondary"
+          className="h-10!"
+          onClick={(event) => {
+            event.stopPropagation();
+            onViewDetails(charge);
+          }}
+        >
+          {translate('common.account.workspace.subscription.charges.details')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function ChargeRowMobile({ charge, onPay, onDownload, onViewDetails }: ChargeRowProps) {
+  const translate = useTranslations();
+  const { title, value, downloadUrl, canPay } = useChargeRow(charge);
+
+  return (
+    <div className="flex flex-col gap-5 pl-4 pr-3 py-4 bg-white border border-zinc-200 rounded-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex flex-col gap-0.5 min-w-0 flex-1 mr-2">
+          <span className="paragraph-xsmall-medium text-zinc-500">{formatChargeDate(charge, false)}</span>
+          <span className="paragraph-small-semibold text-zinc-600 truncate">{title}</span>
+        </div>
+        <ChargeStatusBadge status={charge.status} />
+      </div>
+
+      <Separator className="bg-zinc-200" />
+
+      <span className="paragraph-medium-semibold text-zinc-950">{value}</span>
+
+      <div className="flex items-center gap-2">
+        {canPay && (
+          <Button className="h-10!" onClick={() => onPay(charge)}>
+            {translate('common.account.workspace.subscription.charges.pay')}
+          </Button>
+        )}
+        {downloadUrl && (
+          <Button
+            variant="secondary"
+            className="size-10! p-0"
+            aria-label={translate('common.account.workspace.subscription.charges.downloadReceipt')}
+            onClick={() => onDownload(downloadUrl)}
+          >
+            <IconDownload size={24} />
+          </Button>
+        )}
+        <Button variant="secondary" className="h-10!" onClick={() => onViewDetails(charge)}>
+          {translate('common.account.workspace.subscription.charges.details')}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { StatusBadge, type StatusBadgeTone } from '../shared/StatusBadge';
+
+const STATUS_TONES: Record<number, StatusBadgeTone> = {
+  0: 'yellow',
+  1: 'green',
+  2: 'red',
+  3: 'neutral',
+};
+
+const STATUS_KEYS = {
+  0: 'pending',
+  1: 'paid',
+  2: 'failed',
+  3: 'cancelled',
+} as const satisfies Record<number, string>;
+
+export function ChargeStatusBadge({ status }: { status: number }) {
+  const translateStatus = useTranslations('common.account.workspace.subscription.charges.status');
+
+  const tone = STATUS_TONES[status];
+  const key = STATUS_KEYS[status as keyof typeof STATUS_KEYS];
+
+  if (!tone || !key) return null;
+
+  return <StatusBadge tone={tone}>{translateStatus(key)}</StatusBadge>;
+}

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { useCharges } from '../../../../modules/charges/hooks/charges.hook';
+import useSubscriptionActions from '../../hooks/useSubscriptionActions';
+import { ChargeRow, ChargeRowMobile } from './ChargeRow';
+import { FilterPopover } from '../shared/FilterPopover';
+import { ListPagination } from '../shared/ListPagination';
+
+const CHARGES_PAGE_SIZE = 6;
+
+function ChargesSkeleton() {
+  return (
+    <>
+      <div className="hidden lg:block border border-zinc-200 rounded-lg overflow-hidden bg-white divide-y divide-zinc-200">
+        {Array.from({ length: CHARGES_PAGE_SIZE }).map((_, index) => (
+          <div key={index} className="flex items-center gap-6 px-6 py-5">
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-48 flex-1 max-w-60" />
+            <Skeleton className="h-4 w-20 ml-auto" />
+            <Skeleton className="h-6 w-16 rounded-lg" />
+            <Skeleton className="h-10 w-[88px] rounded-lg" />
+          </div>
+        ))}
+      </div>
+
+      <div className="lg:hidden flex flex-col gap-3">
+        {Array.from({ length: CHARGES_PAGE_SIZE }).map((_, index) => (
+          <div key={index} className="flex flex-col gap-5 pl-4 pr-3 py-4 bg-white border border-zinc-200 rounded-lg">
+            <div className="flex items-start justify-between">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-6 w-20 rounded-lg" />
+            </div>
+            <div className="h-px bg-zinc-200" />
+            <Skeleton className="h-5 w-32" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-10 w-20" />
+              <Skeleton className="h-10 w-20" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export function ChargesList() {
+  const translate = useTranslations();
+  const actions = useSubscriptionActions();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [statusFilters, setStatusFilters] = useState<number[]>([]);
+
+  const { data: chargesData, isLoading } = useCharges({
+    page: currentPage,
+    limit: CHARGES_PAGE_SIZE,
+    status: statusFilters,
+  });
+
+  const charges = chargesData?.data ?? [];
+  const totalPages = Math.ceil((chargesData?.total ?? 0) / CHARGES_PAGE_SIZE);
+
+  const handleToggleStatus = (status: number, checked: boolean) => {
+    setStatusFilters((previous) =>
+      checked ? [...previous, status] : previous.filter((item) => item !== status)
+    );
+    setCurrentPage(1);
+  };
+
+  const rowProps = {
+    onPay: actions.payCharge,
+    onDownload: actions.downloadCharge,
+    onViewDetails: actions.viewCharge,
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex items-center justify-between gap-4">
+        <span className="paragraph-medium-semibold text-zinc-950">
+          {translate('common.account.workspace.subscription.charges.title')}
+        </span>
+        <FilterPopover
+          label={translate('common.account.workspace.subscription.charges.filter')}
+          options={[
+            { value: 0, label: translate('common.account.workspace.subscription.charges.filterPending'), color: 'bg-yellow-500' },
+            { value: 1, label: translate('common.account.workspace.subscription.charges.filterPaid'), color: 'bg-green-500' },
+            { value: 2, label: translate('common.account.workspace.subscription.charges.filterFailed'), color: 'bg-red-500' },
+            { value: 3, label: translate('common.account.workspace.subscription.charges.filterCancelled'), color: 'bg-gray-500' },
+          ]}
+          selected={statusFilters}
+          onToggle={handleToggleStatus}
+        />
+      </div>
+
+      {isLoading && <ChargesSkeleton />}
+
+      {!isLoading && charges.length === 0 && (
+        <div className="flex items-center justify-center py-12 border border-zinc-200 rounded-lg bg-white">
+          <p className="paragraph-small-medium text-zinc-500">
+            {translate('common.account.workspace.subscription.charges.noReceipts')}
+          </p>
+        </div>
+      )}
+
+      {!isLoading && charges.length > 0 && (
+        <>
+          <div className="hidden lg:block border border-zinc-200 rounded-lg overflow-hidden bg-white divide-y divide-zinc-200">
+            {charges.map((charge) => (
+              <ChargeRow key={charge.id} charge={charge} {...rowProps} />
+            ))}
+          </div>
+
+          <div className="lg:hidden flex flex-col gap-3">
+            {charges.map((charge) => (
+              <ChargeRowMobile key={charge.id} charge={charge} {...rowProps} />
+            ))}
+          </div>
+        </>
+      )}
+
+      <ListPagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
+    </div>
+  );
+}