@hed-hog/billing 0.0.2

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

@@ -0,0 +1,308 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Settings } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type Gateway = {
+  id: number;
+  name: string;
+  slug: string;
+  is_active: boolean;
+  config_json?: Record<string, unknown> | null;
+};
+
+const schema = z.object({
+  name: z.string().trim().min(1),
+  is_active: z.boolean(),
+  config_json: z.string().optional(),
+});
+
+type GatewayFormValues = z.infer<typeof schema>;
+
+const fallbackGateways: Gateway[] = [
+  { id: 1, name: 'Stripe', slug: 'stripe', is_active: false, config_json: {} },
+  {
+    id: 2,
+    name: 'Pagarme',
+    slug: 'pagarme',
+    is_active: false,
+    config_json: {},
+  },
+  {
+    id: 3,
+    name: 'MercadoPago',
+    slug: 'mercadopago',
+    is_active: false,
+    config_json: {},
+  },
+];
+
+export default function BillingGatewaysPage() {
+  const t = useTranslations('BillingGatewaysPage');
+  const { request, currentLocaleCode, showToastHandler } = useApp();
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingGateway, setEditingGateway] = useState<Gateway | null>(null);
+
+  const form = useForm<GatewayFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: '',
+      is_active: false,
+      config_json: '{}',
+    },
+  });
+
+  const { data, refetch } = useQuery<Gateway[]>({
+    queryKey: ['billing-gateways', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<Gateway[]>({
+        url: '/billing/gateways',
+        method: 'GET',
+      });
+
+      const payload = response.data;
+      if (!Array.isArray(payload)) {
+        return fallbackGateways;
+      }
+
+      return payload.length > 0 ? payload : fallbackGateways;
+    },
+    placeholderData: fallbackGateways,
+  });
+
+  const items = data ?? fallbackGateways;
+
+  useEffect(() => {
+    if (!sheetOpen || !editingGateway) {
+      return;
+    }
+
+    form.reset({
+      name: editingGateway.name,
+      is_active: Boolean(editingGateway.is_active),
+      config_json: JSON.stringify(editingGateway.config_json ?? {}, null, 2),
+    });
+  }, [editingGateway, form, sheetOpen]);
+
+  const onSubmit = async (values: GatewayFormValues) => {
+    if (!editingGateway) {
+      return;
+    }
+
+    try {
+      let parsedConfig: Record<string, unknown> = {};
+      if (values.config_json?.trim()) {
+        parsedConfig = JSON.parse(values.config_json);
+      }
+
+      await request({
+        url: `/billing/gateways/${editingGateway.slug}`,
+        method: 'PATCH',
+        data: {
+          name: values.name,
+          is_active: values.is_active,
+          config_json: parsedConfig,
+        },
+      });
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setSheetOpen(false);
+      setEditingGateway(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    }
+  };
+
+  const quickToggle = async (gateway: Gateway, checked: boolean) => {
+    try {
+      await request({
+        url: `/billing/gateways/${gateway.slug}`,
+        method: 'PATCH',
+        data: {
+          is_active: checked,
+        },
+      });
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.toggleError'));
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.gateways') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {items.map((gateway) => (
+          <Card key={gateway.slug} className="shadow-none">
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between text-lg">
+                {gateway.name}
+                <Badge
+                  className={
+                    gateway.is_active
+                      ? 'bg-green-100 text-green-800'
+                      : 'bg-gray-100 text-gray-800'
+                  }
+                >
+                  {gateway.is_active
+                    ? t('status.active')
+                    : t('status.inactive')}
+                </Badge>
+              </CardTitle>
+              <CardDescription>{gateway.slug}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">
+                  {t('fields.active')}
+                </span>
+                <Switch
+                  checked={gateway.is_active}
+                  onCheckedChange={(checked) =>
+                    void quickToggle(gateway, checked)
+                  }
+                />
+              </div>
+
+              <Button
+                className="w-full"
+                variant="outline"
+                onClick={() => {
+                  setEditingGateway(gateway);
+                  setSheetOpen(true);
+                }}
+              >
+                <Settings className="mr-2 size-4" />
+                {t('actions.configure')}
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Sheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open);
+          if (!open) {
+            setEditingGateway(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>{t('sheet.title')}</SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              className="space-y-4 p-4"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.name')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="is_active"
+                render={({ field }) => (
+                  <FormItem className="flex items-center justify-between">
+                    <FormLabel>{t('form.isActive')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="config_json"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.configJson')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        rows={12}
+                        {...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/invoices/page.tsx.ejs

@@ -0,0 +1,179 @@
+'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 Invoice = {
+  id: number;
+  invoice_number: string;
+  status: string;
+  currency: string;
+  total_cents: number;
+  due_date: string | null;
+  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', 'uncollectible'].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' }).format(
+    new Date(value)
+  );
+};
+
+export default function BillingInvoicesPage() {
+  const t = useTranslations('BillingInvoicesPage');
+  const { request, currentLocaleCode } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  const { data, refetch } = useQuery<{ items: Invoice[]; total: number }>({
+    queryKey: ['billing-invoices', currentLocaleCode, page, pageSize, search],
+    queryFn: async () => {
+      const response = await request<ListResponse<Invoice>>({
+        url: '/billing/invoices',
+        method: 'GET',
+        params: { page, pageSize, search: search.trim() || undefined },
+      });
+
+      const payload = response.data as ListResponse<Invoice> | Invoice[];
+      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.invoices') },
+        ]}
+      />
+
+      <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.invoiceNumber')}</TableHead>
+              <TableHead>{t('table.columns.status')}</TableHead>
+              <TableHead>{t('table.columns.currency')}</TableHead>
+              <TableHead>{t('table.columns.total')}</TableHead>
+              <TableHead>{t('table.columns.dueDate')}</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.invoice_number}
+                </TableCell>
+                <TableCell>
+                  <Badge className={badgeClass(item.status)}>
+                    {item.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>{item.currency}</TableCell>
+                <TableCell>
+                  {formatCurrency(item.total_cents, item.currency)}
+                </TableCell>
+                <TableCell>{formatDate(item.due_date)}</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>
+  );
+}