@hed-hog/billing 0.0.2

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

@@ -0,0 +1,424 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type BillingOrder = {
+  id: number;
+  status: string;
+  currency: string;
+  total_cents: number;
+  source: string | null;
+  created_at: string;
+};
+
+type ListResponse<T> = {
+  data?: T[];
+  total?: number;
+};
+
+const schema = z.object({
+  contact_id: z.coerce.number().optional(),
+  status: z.enum(['pending', 'paid', 'canceled', 'expired']),
+  currency: z.string().default('BRL'),
+  subtotal_cents: z.coerce.number().min(0),
+  total_cents: z.coerce.number().min(0),
+  source: z.string().optional(),
+  notes: z.string().optional(),
+});
+
+type OrderFormValues = z.infer<typeof schema>;
+
+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', 'expired'].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 BillingOrdersPage() {
+  const t = useTranslations('BillingOrdersPage');
+  const { request, currentLocaleCode, showToastHandler } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  const form = useForm<OrderFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      contact_id: undefined,
+      status: 'pending',
+      currency: 'BRL',
+      subtotal_cents: 0,
+      total_cents: 0,
+      source: '',
+      notes: '',
+    },
+  });
+
+  const { data, refetch } = useQuery<{ items: BillingOrder[]; total: number }>({
+    queryKey: ['billing-orders', currentLocaleCode, page, pageSize, search],
+    queryFn: async () => {
+      const response = await request<ListResponse<BillingOrder>>({
+        url: '/billing/orders',
+        method: 'GET',
+        params: {
+          page,
+          pageSize,
+          search: search.trim() || undefined,
+        },
+      });
+
+      const payload = response.data as
+        | ListResponse<BillingOrder>
+        | BillingOrder[];
+      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 onSubmit = async (values: OrderFormValues) => {
+    try {
+      await request({
+        url: '/billing/orders',
+        method: 'POST',
+        data: {
+          contact_id: values.contact_id,
+          status: values.status,
+          currency: values.currency,
+          subtotal_cents: values.subtotal_cents,
+          total_cents: values.total_cents,
+          source: values.source?.trim() || undefined,
+          notes: values.notes?.trim() || undefined,
+        },
+      });
+
+      showToastHandler?.('success', t('messages.createSuccess'));
+      setSheetOpen(false);
+      form.reset();
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.createError'));
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.orders') },
+        ]}
+        actions={[
+          {
+            label: t('actions.create'),
+            onClick: () => setSheetOpen(true),
+            icon: <Plus className="size-4" />,
+          },
+        ]}
+      />
+
+      <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.status')}</TableHead>
+              <TableHead>{t('table.columns.currency')}</TableHead>
+              <TableHead>{t('table.columns.total')}</TableHead>
+              <TableHead>{t('table.columns.source')}</TableHead>
+              <TableHead>{t('table.columns.createdAt')}</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.id}</TableCell>
+                <TableCell>
+                  <Badge className={badgeClass(item.status)}>
+                    {item.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>{item.currency}</TableCell>
+                <TableCell>
+                  {formatCurrency(item.total_cents, item.currency)}
+                </TableCell>
+                <TableCell>{item.source ?? '-'}</TableCell>
+                <TableCell>
+                  {new Intl.DateTimeFormat('pt-BR', {
+                    dateStyle: 'short',
+                  }).format(new Date(item.created_at))}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent className="w-full sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>{t('sheet.createTitle')}</SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              className="space-y-4 p-4"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="contact_id"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.contactId')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={1}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(
+                              event.target.value
+                                ? Number(event.target.value)
+                                : undefined
+                            )
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.status')}</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="pending">pending</SelectItem>
+                          <SelectItem value="paid">paid</SelectItem>
+                          <SelectItem value="canceled">canceled</SelectItem>
+                          <SelectItem value="expired">expired</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-3 gap-4">
+                <FormField
+                  control={form.control}
+                  name="currency"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.currency')}</FormLabel>
+                      <FormControl>
+                        <Input {...field} value={field.value ?? 'BRL'} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="subtotal_cents"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.subtotal')}</FormLabel>
+                      <FormControl>
+                        <InputMoney
+                          value={(field.value ?? 0) / 100}
+                          onValueChange={(value) =>
+                            field.onChange(Math.round((value ?? 0) * 100))
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="total_cents"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.total')}</FormLabel>
+                      <FormControl>
+                        <InputMoney
+                          value={(field.value ?? 0) / 100}
+                          onValueChange={(value) =>
+                            field.onChange(Math.round((value ?? 0) * 100))
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="source"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.source')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="notes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.notes')}</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={form.formState.isSubmitting}
+              >
+                {t('actions.save')}
+              </Button>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}

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

@@ -0,0 +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>
+  );
+}