@hed-hog/billing 0.0.2 → 0.0.285

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

@@ -1,186 +1,186 @@
-'use client';
-
-import {
-  Page,
-  PageHeader,
-  StatsCards,
-  type StatCardConfig,
-} from '@/components/entity-list';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import {
-  AlertTriangle,
-  CreditCard,
-  FileWarning,
-  RefreshCw,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import {
-  CartesianGrid,
-  Legend,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import {
-  MOCK_DASHBOARD_STATS,
-  MOCK_PAYMENTS,
-  MOCK_REVENUE_CHART,
-} from './_lib/billing-mocks';
-
-const formatCurrency = (cents: number, currency = 'BRL') =>
-  new Intl.NumberFormat('pt-BR', { style: 'currency', currency }).format(
-    cents / 100
-  );
-
-const formatDate = (value: string | null | undefined) => {
-  if (!value) {
-    return '-';
-  }
-
-  return new Intl.DateTimeFormat('pt-BR', {
-    dateStyle: 'short',
-    timeStyle: 'short',
-  }).format(new Date(value));
-};
-
-export default function BillingDashboardPage() {
-  const t = useTranslations('BillingDashboardPage');
-
-  const stats: StatCardConfig[] = [
-    {
-      title: t('stats.mrr'),
-      value: formatCurrency(MOCK_DASHBOARD_STATS.mrr),
-      icon: <RefreshCw className="size-5" />,
-      iconBgColor: 'bg-blue-50',
-      iconColor: 'text-blue-600',
-    },
-    {
-      title: t('stats.activeSubscriptions'),
-      value: MOCK_DASHBOARD_STATS.activeSubscriptions,
-      icon: <CreditCard className="size-5" />,
-      iconBgColor: 'bg-green-50',
-      iconColor: 'text-green-600',
-    },
-    {
-      title: t('stats.failedPayments'),
-      value: MOCK_DASHBOARD_STATS.failedPayments,
-      icon: <AlertTriangle className="size-5" />,
-      iconBgColor: 'bg-yellow-50',
-      iconColor: 'text-yellow-600',
-    },
-    {
-      title: t('stats.overdueInvoices'),
-      value: MOCK_DASHBOARD_STATS.overdueInvoices,
-      icon: <FileWarning className="size-5" />,
-      iconBgColor: 'bg-red-50',
-      iconColor: 'text-red-600',
-    },
-  ];
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('title')}
-        description={t('description')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.billing'), href: '/billing' },
-          { label: t('breadcrumbs.dashboard') },
-        ]}
-      />
-
-      <StatsCards stats={stats} />
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('revenueTrend.title')}</CardTitle>
-          <CardDescription>{t('revenueTrend.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={320}>
-            <LineChart data={MOCK_REVENUE_CHART}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="month" tickLine={false} axisLine={false} />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                tickFormatter={(value) => `R$ ${(value / 100000).toFixed(0)}k`}
-              />
-              <Tooltip
-                formatter={(value: number) => formatCurrency(value)}
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '8px',
-                }}
-              />
-              <Legend />
-              <Line
-                type="monotone"
-                dataKey="revenue_cents"
-                name={t('revenueTrend.legend')}
-                stroke="#2563eb"
-                strokeWidth={3}
-                dot={{ r: 4, fill: '#2563eb' }}
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('recentPayments.title')}</CardTitle>
-          <CardDescription>{t('recentPayments.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('recentPayments.columns.provider')}</TableHead>
-                  <TableHead>{t('recentPayments.columns.method')}</TableHead>
-                  <TableHead>{t('recentPayments.columns.status')}</TableHead>
-                  <TableHead>{t('recentPayments.columns.amount')}</TableHead>
-                  <TableHead>{t('recentPayments.columns.paidAt')}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {MOCK_PAYMENTS.slice(0, 10).map((payment) => (
-                  <TableRow key={payment.id}>
-                    <TableCell className="font-medium">
-                      {payment.provider}
-                    </TableCell>
-                    <TableCell>{payment.method_type}</TableCell>
-                    <TableCell>{payment.status}</TableCell>
-                    <TableCell>
-                      {formatCurrency(payment.amount_cents, payment.currency)}
-                    </TableCell>
-                    <TableCell>{formatDate(payment.paid_at)}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
-    </Page>
-  );
-}
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  StatsCards,
+  type StatCardConfig,
+} from '@/components/entity-list';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  AlertTriangle,
+  CreditCard,
+  FileWarning,
+  RefreshCw,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  MOCK_DASHBOARD_STATS,
+  MOCK_PAYMENTS,
+  MOCK_REVENUE_CHART,
+} from './_lib/billing-mocks';
+
+const formatCurrency = (cents: number, currency = 'BRL') =>
+  new Intl.NumberFormat('pt-BR', { style: 'currency', currency }).format(
+    cents / 100
+  );
+
+const formatDate = (value: string | null | undefined) => {
+  if (!value) {
+    return '-';
+  }
+
+  return new Intl.DateTimeFormat('pt-BR', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(new Date(value));
+};
+
+export default function BillingDashboardPage() {
+  const t = useTranslations('billing.BillingDashboardPage');
+
+  const stats: StatCardConfig[] = [
+    {
+      title: t('stats.mrr'),
+      value: formatCurrency(MOCK_DASHBOARD_STATS.mrr),
+      icon: <RefreshCw className="size-5" />,
+      iconBgColor: 'bg-blue-50',
+      iconColor: 'text-blue-600',
+    },
+    {
+      title: t('stats.activeSubscriptions'),
+      value: MOCK_DASHBOARD_STATS.activeSubscriptions,
+      icon: <CreditCard className="size-5" />,
+      iconBgColor: 'bg-green-50',
+      iconColor: 'text-green-600',
+    },
+    {
+      title: t('stats.failedPayments'),
+      value: MOCK_DASHBOARD_STATS.failedPayments,
+      icon: <AlertTriangle className="size-5" />,
+      iconBgColor: 'bg-yellow-50',
+      iconColor: 'text-yellow-600',
+    },
+    {
+      title: t('stats.overdueInvoices'),
+      value: MOCK_DASHBOARD_STATS.overdueInvoices,
+      icon: <FileWarning className="size-5" />,
+      iconBgColor: 'bg-red-50',
+      iconColor: 'text-red-600',
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.dashboard') },
+        ]}
+      />
+
+      <StatsCards stats={stats} />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('revenueTrend.title')}</CardTitle>
+          <CardDescription>{t('revenueTrend.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={320}>
+            <LineChart data={MOCK_REVENUE_CHART}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={(value) => `R$ ${(value / 100000).toFixed(0)}k`}
+              />
+              <Tooltip
+                formatter={(value: number) => formatCurrency(value)}
+                contentStyle={{
+                  backgroundColor: 'hsl(var(--background))',
+                  border: '1px solid hsl(var(--border))',
+                  borderRadius: '8px',
+                }}
+              />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey="revenue_cents"
+                name={t('revenueTrend.legend')}
+                stroke="#2563eb"
+                strokeWidth={3}
+                dot={{ r: 4, fill: '#2563eb' }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('recentPayments.title')}</CardTitle>
+          <CardDescription>{t('recentPayments.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('recentPayments.columns.provider')}</TableHead>
+                  <TableHead>{t('recentPayments.columns.method')}</TableHead>
+                  <TableHead>{t('recentPayments.columns.status')}</TableHead>
+                  <TableHead>{t('recentPayments.columns.amount')}</TableHead>
+                  <TableHead>{t('recentPayments.columns.paidAt')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {MOCK_PAYMENTS.slice(0, 10).map((payment) => (
+                  <TableRow key={payment.id}>
+                    <TableCell className="font-medium">
+                      {payment.provider}
+                    </TableCell>
+                    <TableCell>{payment.method_type}</TableCell>
+                    <TableCell>{payment.status}</TableCell>
+                    <TableCell>
+                      {formatCurrency(payment.amount_cents, payment.currency)}
+                    </TableCell>
+                    <TableCell>{formatDate(payment.paid_at)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

package/hedhog/frontend/app/payments/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';
 
@@ -64,7 +66,7 @@ const formatDate = (value: string | null) => {
 };
 
 export default function BillingPaymentsPage() {
-  const t = useTranslations('BillingPaymentsPage');
+  const t = useTranslations('billing.BillingPaymentsPage');
   const { request, currentLocaleCode } = useApp();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
@@ -125,52 +127,56 @@ export default function BillingPaymentsPage() {
         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 && (
+      {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.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>
-            )}
-            {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>
+            </TableHeader>
+            <TableBody>
+              {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>
+      ) : (
+        <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}