@hed-hog/billing 0.0.2

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

@@ -0,0 +1,174 @@
+'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 Refund = {
+  id: number;
+  amount_cents: number;
+  currency?: string;
+  reason: string | null;
+  status: string;
+  completed_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', 'completed'].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'].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';
+};
+
+export default function BillingRefundsPage() {
+  const t = useTranslations('BillingRefundsPage');
+  const { request, currentLocaleCode } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  const { data, refetch } = useQuery<{ items: Refund[]; total: number }>({
+    queryKey: ['billing-refunds', currentLocaleCode, page, pageSize, search],
+    queryFn: async () => {
+      const response = await request<ListResponse<Refund>>({
+        url: '/billing/refunds',
+        method: 'GET',
+        params: { page, pageSize, search: search.trim() || undefined },
+      });
+
+      const payload = response.data as ListResponse<Refund> | Refund[];
+      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.refunds') },
+        ]}
+      />
+
+      <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.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 && (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="text-center text-muted-foreground"
+                >
+                  {t('table.empty')}
+                </TableCell>
+              </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>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
+    </Page>
+  );
+}

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  MOCK_PAYMENTS,
+  MOCK_REVENUE_CHART,
+  MOCK_SUBSCRIPTIONS,
+} from '../_lib/billing-mocks';
+
+const formatCurrency = (cents: number, currency = 'BRL') =>
+  new Intl.NumberFormat('pt-BR', { style: 'currency', currency }).format(
+    cents / 100
+  );
+
+const PIE_COLORS = ['#16a34a', '#f59e0b', '#ef4444', '#0ea5e9'];
+
+export default function BillingReportsPage() {
+  const t = useTranslations('BillingReportsPage');
+
+  const cohortByMonth = MOCK_SUBSCRIPTIONS.reduce<Record<string, number>>(
+    (acc, item) => {
+      const month = new Intl.DateTimeFormat('pt-BR', {
+        month: 'short',
+        year: '2-digit',
+      }).format(new Date(item.created_at));
+
+      acc[month] = (acc[month] ?? 0) + 1;
+      return acc;
+    },
+    {}
+  );
+
+  const cohortData = Object.entries(cohortByMonth).map(([month, count]) => ({
+    month,
+    subscriptions: count,
+  }));
+
+  const paymentSuccess = MOCK_PAYMENTS.reduce(
+    (acc, payment) => {
+      if (payment.status === 'paid') {
+        acc.success += 1;
+      } else {
+        acc.failed += 1;
+      }
+      return acc;
+    },
+    { success: 0, failed: 0 }
+  );
+
+  const pieData = [
+    { name: t('paymentSuccessRate.success'), value: paymentSuccess.success },
+    { name: t('paymentSuccessRate.failed'), value: paymentSuccess.failed },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.reports') },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('revenueSummary.title')}</CardTitle>
+          <CardDescription>{t('revenueSummary.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={320}>
+            <BarChart data={MOCK_REVENUE_CHART}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="month" />
+              <YAxis
+                tickFormatter={(value) => `R$ ${(value / 100000).toFixed(0)}k`}
+              />
+              <Tooltip formatter={(value: number) => formatCurrency(value)} />
+              <Legend />
+              <Bar dataKey="revenue_cents" name={t('revenueSummary.revenue')}>
+                {MOCK_REVENUE_CHART.map((entry, index) => (
+                  <Cell
+                    key={entry.month}
+                    fill={PIE_COLORS[index % PIE_COLORS.length]}
+                  />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('subscriptionCohort.title')}</CardTitle>
+          <CardDescription>
+            {t('subscriptionCohort.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={300}>
+            <LineChart data={cohortData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="month" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey="subscriptions"
+                stroke="#0ea5e9"
+                strokeWidth={3}
+                name={t('subscriptionCohort.subscriptions')}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('paymentSuccessRate.title')}</CardTitle>
+          <CardDescription>
+            {t('paymentSuccessRate.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={320}>
+            <PieChart>
+              <Pie
+                data={pieData}
+                dataKey="value"
+                nameKey="name"
+                outerRadius={110}
+                label
+              >
+                {pieData.map((entry, index) => (
+                  <Cell
+                    key={entry.name}
+                    fill={PIE_COLORS[index % PIE_COLORS.length]}
+                  />
+                ))}
+              </Pie>
+              <Tooltip />
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

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

@@ -0,0 +1,283 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Pause, Play, XCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+type Subscription = {
+  id: number;
+  product_name?: string;
+  price_name?: string;
+  product?: { name?: string };
+  price?: { name?: string };
+  status: string;
+  gateway: string;
+  current_period_end: string | null;
+  created_at: string;
+};
+
+type ListResponse<T> = {
+  data?: T[];
+  total?: number;
+};
+
+const badgeClass = (value: string) => {
+  if (['active', 'paid', 'authorized', 'approved'].includes(value)) {
+    return 'bg-green-100 text-green-800';
+  }
+  if (['pending', 'open', 'draft', 'trialing'].includes(value)) {
+    return 'bg-yellow-100 text-yellow-800';
+  }
+  if (['failed', 'canceled', 'void'].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';
+};
+
+export default function BillingSubscriptionsPage() {
+  const t = useTranslations('BillingSubscriptionsPage');
+  const { request, currentLocaleCode, showToastHandler } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [cancelId, setCancelId] = useState<number | null>(null);
+  const [processingId, setProcessingId] = useState<number | null>(null);
+
+  const { data, refetch } = useQuery<{ items: Subscription[]; total: number }>({
+    queryKey: [
+      'billing-subscriptions',
+      currentLocaleCode,
+      page,
+      pageSize,
+      search,
+    ],
+    queryFn: async () => {
+      const response = await request<ListResponse<Subscription>>({
+        url: '/billing/subscriptions',
+        method: 'GET',
+        params: { page, pageSize, search: search.trim() || undefined },
+      });
+
+      const payload = response.data as
+        | ListResponse<Subscription>
+        | Subscription[];
+      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;
+
+  const callAction = async (
+    id: number,
+    action: 'cancel' | 'pause' | 'resume'
+  ) => {
+    try {
+      setProcessingId(id);
+      await request({
+        url: `/billing/subscriptions/${id}/${action}`,
+        method: 'PATCH',
+      });
+      showToastHandler?.('success', t('messages.actionSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.actionError'));
+    } finally {
+      setProcessingId(null);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.subscriptions') },
+        ]}
+      />
+
+      <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.id')}</TableHead>
+              <TableHead>{t('table.columns.product')}</TableHead>
+              <TableHead>{t('table.columns.price')}</TableHead>
+              <TableHead>{t('table.columns.status')}</TableHead>
+              <TableHead>{t('table.columns.gateway')}</TableHead>
+              <TableHead>{t('table.columns.currentPeriodEnd')}</TableHead>
+              <TableHead>{t('table.columns.createdAt')}</TableHead>
+              <TableHead className="w-[200px] text-right">
+                {t('table.columns.actions')}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.length === 0 && (
+              <TableRow>
+                <TableCell
+                  colSpan={8}
+                  className="text-center text-muted-foreground"
+                >
+                  {t('table.empty')}
+                </TableCell>
+              </TableRow>
+            )}
+            {items.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell className="font-medium">#{item.id}</TableCell>
+                <TableCell>
+                  {item.product_name ?? item.product?.name ?? '-'}
+                </TableCell>
+                <TableCell>
+                  {item.price_name ?? item.price?.name ?? '-'}
+                </TableCell>
+                <TableCell>
+                  <Badge className={badgeClass(item.status)}>
+                    {item.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>{item.gateway}</TableCell>
+                <TableCell>
+                  {item.current_period_end
+                    ? new Intl.DateTimeFormat('pt-BR', {
+                        dateStyle: 'short',
+                      }).format(new Date(item.current_period_end))
+                    : '-'}
+                </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="sm"
+                      disabled={processingId === item.id}
+                      onClick={() => void callAction(item.id, 'pause')}
+                    >
+                      <Pause className="mr-2 size-4" />
+                      {t('actions.pause')}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={processingId === item.id}
+                      onClick={() => void callAction(item.id, 'resume')}
+                    >
+                      <Play className="mr-2 size-4" />
+                      {t('actions.resume')}
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      disabled={processingId === item.id}
+                      onClick={() => setCancelId(item.id)}
+                    >
+                      <XCircle className="mr-2 size-4" />
+                      {t('actions.cancel')}
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
+
+      <AlertDialog
+        open={cancelId !== null}
+        onOpenChange={(open) => !open && setCancelId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('cancelDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('cancelDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancelDialog.cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (cancelId) {
+                  void callAction(cancelId, 'cancel');
+                  setCancelId(null);
+                }
+              }}
+            >
+              {t('cancelDialog.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}