@hed-hog/billing 0.0.2

package/hedhog/frontend/app/payments/page.tsx.ejs

@@ -0,0 +1,187 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+type BillingPayment = {
+  id: number;
+  provider: string;
+  method_type: string;
+  status: string;
+  amount_cents: number;
+  currency: string;
+  paid_at: string | null;
+};
+
+type ListResponse<T> = {
+  data?: T[];
+  total?: number;
+};
+
+const formatCurrency = (cents: number, currency = 'BRL') =>
+  new Intl.NumberFormat('pt-BR', { style: 'currency', currency }).format(
+    cents / 100
+  );
+
+const badgeClass = (value: string) => {
+  if (['active', 'paid', 'authorized', 'approved'].includes(value)) {
+    return 'bg-green-100 text-green-800';
+  }
+  if (['pending', 'open', 'draft'].includes(value)) {
+    return 'bg-yellow-100 text-yellow-800';
+  }
+  if (['failed', 'canceled', 'void', 'refunded'].includes(value)) {
+    return 'bg-red-100 text-red-800';
+  }
+  if (['paused', 'inactive'].includes(value)) {
+    return 'bg-gray-100 text-gray-800';
+  }
+  return 'bg-slate-100 text-slate-800';
+};
+
+const formatDate = (value: string | null) => {
+  if (!value) return '-';
+  return new Intl.DateTimeFormat('pt-BR', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(new Date(value));
+};
+
+export default function BillingPaymentsPage() {
+  const t = useTranslations('BillingPaymentsPage');
+  const { request, currentLocaleCode } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  const { data, refetch } = useQuery<{
+    items: BillingPayment[];
+    total: number;
+  }>({
+    queryKey: ['billing-payments', currentLocaleCode, page, pageSize, search],
+    queryFn: async () => {
+      const response = await request<ListResponse<BillingPayment>>({
+        url: '/billing/payments',
+        method: 'GET',
+        params: { page, pageSize, search: search.trim() || undefined },
+      });
+
+      const payload = response.data as
+        | ListResponse<BillingPayment>
+        | BillingPayment[];
+      if (Array.isArray(payload)) {
+        return { items: payload, total: payload.length };
+      }
+
+      return {
+        items: payload.data ?? [],
+        total: payload.total ?? payload.data?.length ?? 0,
+      };
+    },
+    placeholderData: (old) => old,
+  });
+
+  const items = data?.items ?? [];
+  const totalItems = data?.total ?? 0;
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.payments') },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => {
+          setPage(1);
+          void refetch();
+        }}
+        placeholder={t('filters.searchPlaceholder')}
+      />
+
+      <div className="overflow-x-auto rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('table.columns.provider')}</TableHead>
+              <TableHead>{t('table.columns.methodType')}</TableHead>
+              <TableHead>{t('table.columns.status')}</TableHead>
+              <TableHead>{t('table.columns.amount')}</TableHead>
+              <TableHead>{t('table.columns.currency')}</TableHead>
+              <TableHead>{t('table.columns.paidAt')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.length === 0 && (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="text-center text-muted-foreground"
+                >
+                  {t('table.empty')}
+                </TableCell>
+              </TableRow>
+            )}
+            {items.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell className="font-medium">{item.provider}</TableCell>
+                <TableCell>
+                  <Badge className={badgeClass(item.method_type)}>
+                    {item.method_type}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  <Badge className={badgeClass(item.status)}>
+                    {item.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  {formatCurrency(item.amount_cents, item.currency)}
+                </TableCell>
+                <TableCell>{item.currency}</TableCell>
+                <TableCell>{formatDate(item.paid_at)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
+    </Page>
+  );
+}