@hed-hog/billing 0.0.2

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

@@ -0,0 +1,704 @@
+'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 {
+  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 { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} 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 { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type Product = {
+  id: number;
+  name: string;
+};
+
+type Price = {
+  id: number;
+  name: string;
+  product_id: number;
+  product_name?: string;
+  product?: { name?: string };
+  billing_type: string;
+  currency: string;
+  amount_cents: number;
+  interval_unit?: string | null;
+  interval_count?: number | null;
+  trial_days?: number | null;
+  is_active: boolean;
+};
+
+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'].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 priceSchema = z.object({
+  name: z.string().trim().min(1),
+  product_id: z.coerce.number().min(1),
+  billing_type: z.enum(['one_time', 'recurring', 'usage']),
+  currency: z.string().trim().default('BRL'),
+  amount_cents: z.coerce.number().min(0),
+  interval_unit: z.enum(['day', 'week', 'month', 'year']).optional(),
+  interval_count: z.coerce.number().min(1).optional(),
+  trial_days: z.coerce.number().min(0).optional(),
+  is_active: z.boolean(),
+});
+
+type PriceFormValues = z.infer<typeof priceSchema>;
+
+const mapBillingTypeToApi = (value: PriceFormValues['billing_type']) => {
+  if (value === 'usage') {
+    return 'recurring';
+  }
+
+  return value;
+};
+
+export default function BillingPricesPage() {
+  const t = useTranslations('BillingPricesPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const [search, setSearch] = useState('');
+  const [billingFilter, setBillingFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingPrice, setEditingPrice] = useState<Price | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+
+  const form = useForm<PriceFormValues>({
+    resolver: zodResolver(priceSchema),
+    defaultValues: {
+      name: '',
+      product_id: 0,
+      billing_type: 'recurring',
+      currency: 'BRL',
+      amount_cents: 0,
+      interval_unit: 'month',
+      interval_count: 1,
+      trial_days: 0,
+      is_active: true,
+    },
+  });
+
+  const { data: products } = useQuery<Product[]>({
+    queryKey: ['billing-products-select', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<ListResponse<Product>>({
+        url: '/billing/products',
+        method: 'GET',
+        params: { page: 1, pageSize: 200 },
+      });
+
+      const payload = response.data as ListResponse<Product> | Product[];
+      if (Array.isArray(payload)) {
+        return payload;
+      }
+
+      return payload.data ?? [];
+    },
+    placeholderData: [],
+  });
+
+  useEffect(() => {
+    if (!sheetOpen) {
+      return;
+    }
+
+    if (editingPrice) {
+      form.reset({
+        name: editingPrice.name,
+        product_id: editingPrice.product_id,
+        billing_type:
+          editingPrice.billing_type as PriceFormValues['billing_type'],
+        currency: editingPrice.currency,
+        amount_cents: editingPrice.amount_cents,
+        interval_unit: (editingPrice.interval_unit ?? 'month') as
+          | 'day'
+          | 'week'
+          | 'month'
+          | 'year',
+        interval_count: editingPrice.interval_count ?? 1,
+        trial_days: editingPrice.trial_days ?? 0,
+        is_active: Boolean(editingPrice.is_active),
+      });
+      return;
+    }
+
+    form.reset({
+      name: '',
+      product_id: 0,
+      billing_type: 'recurring',
+      currency: 'BRL',
+      amount_cents: 0,
+      interval_unit: 'month',
+      interval_count: 1,
+      trial_days: 0,
+      is_active: true,
+    });
+  }, [editingPrice, form, sheetOpen]);
+
+  const { data, refetch } = useQuery<{ items: Price[]; total: number }>({
+    queryKey: [
+      'billing-prices',
+      currentLocaleCode,
+      search,
+      billingFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: async () => {
+      const response = await request<ListResponse<Price>>({
+        url: '/billing/prices',
+        method: 'GET',
+        params: {
+          page,
+          pageSize,
+          search: search.trim() || undefined,
+          billing_type: billingFilter !== 'all' ? billingFilter : undefined,
+        },
+      });
+
+      const payload = response.data as ListResponse<Price> | Price[];
+      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 handleSubmit = async (values: PriceFormValues) => {
+    try {
+      const payload = {
+        ...values,
+        billing_type: mapBillingTypeToApi(values.billing_type),
+        interval_unit:
+          values.billing_type === 'recurring'
+            ? values.interval_unit
+            : undefined,
+        interval_count:
+          values.billing_type === 'recurring'
+            ? values.interval_count
+            : undefined,
+        trial_days:
+          values.billing_type === 'recurring' ? values.trial_days : undefined,
+      };
+
+      if (editingPrice) {
+        await request({
+          url: `/billing/prices/${editingPrice.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+      } else {
+        await request({
+          url: '/billing/prices',
+          method: 'POST',
+          data: payload,
+        });
+      }
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setSheetOpen(false);
+      setEditingPrice(null);
+      form.reset();
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) {
+      return;
+    }
+
+    try {
+      await request({
+        url: `/billing/prices/${deleteId}`,
+        method: 'DELETE',
+      });
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setDeleteId(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.prices') },
+        ]}
+        actions={[
+          {
+            label: t('actions.create'),
+            onClick: () => {
+              setEditingPrice(null);
+              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')}
+        filters={{
+          value: billingFilter,
+          options: [
+            { label: t('filters.all'), value: 'all' },
+            { label: 'one_time', value: 'one_time' },
+            { label: 'recurring', value: 'recurring' },
+            { label: 'usage', value: 'usage' },
+          ],
+          onChange: (value) => {
+            setBillingFilter(value);
+            setPage(1);
+          },
+          placeholder: t('filters.billingType'),
+        }}
+      />
+
+      <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 && (
+              <TableRow>
+                <TableCell
+                  colSpan={7}
+                  className="text-center text-muted-foreground"
+                >
+                  {t('table.empty')}
+                </TableCell>
+              </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);
+                      }}
+                    >
+                      <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>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
+
+      <Sheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open);
+          if (!open) {
+            setEditingPrice(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingPrice ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-4 p-4"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.name')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('form.namePlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="product_id"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.product')}</FormLabel>
+                    <Select
+                      value={field.value ? String(field.value) : undefined}
+                      onValueChange={(value) => field.onChange(Number(value))}
+                    >
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t('form.productPlaceholder')}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {(products ?? []).map((product) => (
+                          <SelectItem
+                            key={product.id}
+                            value={String(product.id)}
+                          >
+                            {product.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="billing_type"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.billingType')}</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="one_time">one_time</SelectItem>
+                          <SelectItem value="recurring">recurring</SelectItem>
+                          <SelectItem value="usage">usage</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="currency"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.currency')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="BRL"
+                          {...field}
+                          value={field.value ?? 'BRL'}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="amount_cents"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.amount')}</FormLabel>
+                    <FormControl>
+                      <InputMoney
+                        value={(field.value ?? 0) / 100}
+                        onValueChange={(value) =>
+                          field.onChange(Math.round((value ?? 0) * 100))
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-3 gap-4">
+                <FormField
+                  control={form.control}
+                  name="interval_unit"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.intervalUnit')}</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="day">day</SelectItem>
+                          <SelectItem value="week">week</SelectItem>
+                          <SelectItem value="month">month</SelectItem>
+                          <SelectItem value="year">year</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="interval_count"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.intervalCount')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={1}
+                          {...field}
+                          value={field.value ?? 1}
+                          onChange={(event) =>
+                            field.onChange(Number(event.target.value))
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="trial_days"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.trialDays')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={0}
+                          {...field}
+                          value={field.value ?? 0}
+                          onChange={(event) =>
+                            field.onChange(Number(event.target.value))
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <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>
+                )}
+              />
+
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={form.formState.isSubmitting}
+              >
+                {t('actions.save')}
+              </Button>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={deleteId !== null}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('deleteDialog.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>
+              {t('deleteDialog.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}