@hed-hog/billing 0.0.2 → 0.0.286

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

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -53,7 +54,7 @@ import {
 } from '@/components/ui/table';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Pencil, Plus, Trash2 } from 'lucide-react';
+import { FileText, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -128,7 +129,7 @@ const mapBillingTypeToApi = (value: PriceFormValues['billing_type']) => {
 };
 
 export default function BillingPricesPage() {
-  const t = useTranslations('BillingPricesPage');
+  const t = useTranslations('billing.BillingPricesPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const [search, setSearch] = useState('');
   const [billingFilter, setBillingFilter] = useState('all');
@@ -355,82 +356,87 @@ export default function BillingPricesPage() {
         }}
       />
 
-      <div className="overflow-x-auto rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.columns.name')}</TableHead>
-              <TableHead>{t('table.columns.product')}</TableHead>
-              <TableHead>{t('table.columns.billingType')}</TableHead>
-              <TableHead>{t('table.columns.amount')}</TableHead>
-              <TableHead>{t('table.columns.intervalUnit')}</TableHead>
-              <TableHead>{t('table.columns.isActive')}</TableHead>
-              <TableHead className="w-[120px] text-right">
-                {t('table.columns.actions')}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.length === 0 && (
+      {items.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell
-                  colSpan={7}
-                  className="text-center text-muted-foreground"
-                >
-                  {t('table.empty')}
-                </TableCell>
+                <TableHead>{t('table.columns.name')}</TableHead>
+                <TableHead>{t('table.columns.product')}</TableHead>
+                <TableHead>{t('table.columns.billingType')}</TableHead>
+                <TableHead>{t('table.columns.amount')}</TableHead>
+                <TableHead>{t('table.columns.intervalUnit')}</TableHead>
+                <TableHead>{t('table.columns.isActive')}</TableHead>
+                <TableHead className="w-[120px] text-right">
+                  {t('table.columns.actions')}
+                </TableHead>
               </TableRow>
-            )}
-            {items.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell className="font-medium">{item.name}</TableCell>
-                <TableCell>
-                  {item.product_name ?? item.product?.name ?? '-'}
-                </TableCell>
-                <TableCell>
-                  <Badge className={badgeClass(item.billing_type)}>
-                    {item.billing_type}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  {formatCurrency(item.amount_cents, item.currency)}
-                </TableCell>
-                <TableCell>{item.interval_unit ?? '-'}</TableCell>
-                <TableCell>
-                  <Badge
-                    className={badgeClass(
-                      item.is_active ? 'active' : 'inactive'
-                    )}
-                  >
-                    {item.is_active ? t('status.active') : t('status.inactive')}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => {
-                        setEditingPrice(item);
-                        setSheetOpen(true);
-                      }}
+            </TableHeader>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell className="font-medium">{item.name}</TableCell>
+                  <TableCell>
+                    {item.product_name ?? item.product?.name ?? '-'}
+                  </TableCell>
+                  <TableCell>
+                    <Badge className={badgeClass(item.billing_type)}>
+                      {item.billing_type}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {formatCurrency(item.amount_cents, item.currency)}
+                  </TableCell>
+                  <TableCell>{item.interval_unit ?? '-'}</TableCell>
+                  <TableCell>
+                    <Badge
+                      className={badgeClass(
+                        item.is_active ? 'active' : 'inactive'
+                      )}
                     >
-                      <Pencil className="size-4" />
-                    </Button>
-                    <Button
-                      variant="destructive"
-                      size="icon"
-                      onClick={() => setDeleteId(item.id)}
-                    >
-                      <Trash2 className="size-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+                      {item.is_active
+                        ? t('status.active')
+                        : t('status.inactive')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => {
+                          setEditingPrice(item);
+                          setSheetOpen(true);
+                        }}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="icon"
+                        onClick={() => setDeleteId(item.id)}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('description')}
+          actionLabel={t('actions.create')}
+          onAction={() => {
+            setEditingPrice(null);
+            setSheetOpen(true);
+          }}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}

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

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -53,7 +54,7 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Pencil, Plus, Trash2 } from 'lucide-react';
+import { FileText, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -135,7 +136,7 @@ const statusBadgeClass = (value: string) => {
 };
 
 export default function BillingProductsPage() {
-  const t = useTranslations('BillingProductsPage');
+  const t = useTranslations('billing.BillingProductsPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
@@ -328,80 +329,85 @@ export default function BillingProductsPage() {
         }}
       />
 
-      <div className="overflow-x-auto rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.columns.name')}</TableHead>
-              <TableHead>{t('table.columns.code')}</TableHead>
-              <TableHead>{t('table.columns.productType')}</TableHead>
-              <TableHead>{t('table.columns.isActive')}</TableHead>
-              <TableHead>{t('table.columns.createdAt')}</TableHead>
-              <TableHead className="w-[120px] text-right">
-                {t('table.columns.actions')}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.length === 0 && (
+      {items.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell
-                  colSpan={6}
-                  className="text-center text-muted-foreground"
-                >
-                  {t('table.empty')}
-                </TableCell>
+                <TableHead>{t('table.columns.name')}</TableHead>
+                <TableHead>{t('table.columns.code')}</TableHead>
+                <TableHead>{t('table.columns.productType')}</TableHead>
+                <TableHead>{t('table.columns.isActive')}</TableHead>
+                <TableHead>{t('table.columns.createdAt')}</TableHead>
+                <TableHead className="w-[120px] text-right">
+                  {t('table.columns.actions')}
+                </TableHead>
               </TableRow>
-            )}
-            {items.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell className="font-medium">{item.name}</TableCell>
-                <TableCell>{item.code ?? '-'}</TableCell>
-                <TableCell>
-                  <Badge className={statusBadgeClass('draft')}>
-                    {mapProductTypeFromApi(item.product_type)}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  <Badge
-                    className={statusBadgeClass(
-                      item.is_active ? 'active' : 'inactive'
-                    )}
-                  >
-                    {item.is_active ? t('status.active') : t('status.inactive')}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  {new Intl.DateTimeFormat('pt-BR', {
-                    dateStyle: 'short',
-                  }).format(new Date(item.created_at))}
-                </TableCell>
-                <TableCell>
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => {
-                        setEditingProduct(item);
-                        setSheetOpen(true);
-                      }}
+            </TableHeader>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell className="font-medium">{item.name}</TableCell>
+                  <TableCell>{item.code ?? '-'}</TableCell>
+                  <TableCell>
+                    <Badge className={statusBadgeClass('draft')}>
+                      {mapProductTypeFromApi(item.product_type)}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      className={statusBadgeClass(
+                        item.is_active ? 'active' : 'inactive'
+                      )}
                     >
-                      <Pencil className="size-4" />
-                    </Button>
-                    <Button
-                      variant="destructive"
-                      size="icon"
-                      onClick={() => setDeleteId(item.id)}
-                    >
-                      <Trash2 className="size-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+                      {item.is_active
+                        ? t('status.active')
+                        : t('status.inactive')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {new Intl.DateTimeFormat('pt-BR', {
+                      dateStyle: 'short',
+                    }).format(new Date(item.created_at))}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => {
+                          setEditingProduct(item);
+                          setSheetOpen(true);
+                        }}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="icon"
+                        onClick={() => setDeleteId(item.id)}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('description')}
+          actionLabel={t('actions.create')}
+          onAction={() => {
+            setEditingProduct(null);
+            setSheetOpen(true);
+          }}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}

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

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -16,6 +17,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { FileText } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
@@ -57,7 +59,7 @@ const badgeClass = (value: string) => {
 };
 
 export default function BillingRefundsPage() {
-  const t = useTranslations('BillingRefundsPage');
+  const t = useTranslations('billing.BillingRefundsPage');
   const { request, currentLocaleCode } = useApp();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
@@ -113,51 +115,55 @@ export default function BillingRefundsPage() {
         placeholder={t('filters.searchPlaceholder')}
       />
 
-      <div className="overflow-x-auto rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.columns.amount')}</TableHead>
-              <TableHead>{t('table.columns.reason')}</TableHead>
-              <TableHead>{t('table.columns.status')}</TableHead>
-              <TableHead>{t('table.columns.completedAt')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.length === 0 && (
+      {items.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell
-                  colSpan={4}
-                  className="text-center text-muted-foreground"
-                >
-                  {t('table.empty')}
-                </TableCell>
+                <TableHead>{t('table.columns.amount')}</TableHead>
+                <TableHead>{t('table.columns.reason')}</TableHead>
+                <TableHead>{t('table.columns.status')}</TableHead>
+                <TableHead>{t('table.columns.completedAt')}</TableHead>
               </TableRow>
-            )}
-            {items.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell>
-                  {formatCurrency(item.amount_cents, item.currency ?? 'BRL')}
-                </TableCell>
-                <TableCell>{item.reason ?? '-'}</TableCell>
-                <TableCell>
-                  <Badge className={badgeClass(item.status)}>
-                    {item.status}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  {item.completed_at
-                    ? new Intl.DateTimeFormat('pt-BR', {
-                        dateStyle: 'short',
-                        timeStyle: 'short',
-                      }).format(new Date(item.completed_at))
-                    : '-'}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+            </TableHeader>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>
+                    {formatCurrency(item.amount_cents, item.currency ?? 'BRL')}
+                  </TableCell>
+                  <TableCell>{item.reason ?? '-'}</TableCell>
+                  <TableCell>
+                    <Badge className={badgeClass(item.status)}>
+                      {item.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {item.completed_at
+                      ? new Intl.DateTimeFormat('pt-BR', {
+                          dateStyle: 'short',
+                          timeStyle: 'short',
+                        }).format(new Date(item.completed_at))
+                      : '-'}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('description')}
+          actionLabel={t('emptyAction')}
+          onAction={() => {
+            setSearch('');
+            setPage(1);
+            void refetch();
+          }}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}

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

@@ -38,7 +38,7 @@ const formatCurrency = (cents: number, currency = 'BRL') =>
 const PIE_COLORS = ['#16a34a', '#f59e0b', '#ef4444', '#0ea5e9'];
 
 export default function BillingReportsPage() {
-  const t = useTranslations('BillingReportsPage');
+  const t = useTranslations('billing.BillingReportsPage');
 
   const cohortByMonth = MOCK_SUBSCRIPTIONS.reduce<Record<string, number>>(
     (acc, item) => {