@hed-hog/finance 0.0.319 → 0.0.322

package/hedhog/data/currency.yaml

@@ -0,0 +1,14 @@
+- code: BRL
+  name: Real Brasileiro
+  symbol: "R$"
+  status: active
+
+- code: USD
+  name: Dólar Americano
+  symbol: "$"
+  status: active
+
+- code: EUR
+  name: Euro
+  symbol: "€"
+  status: active

package/hedhog/data/menu.yaml

@@ -427,3 +427,19 @@
           slug: admin
       - where:
           slug: admin-finance
+
+- menu_id:
+    where:
+      slug: /finance/administration
+  icon: coins
+  url: /finance/administration/currencies
+  name:
+    en: Currencies
+    pt: Moedas
+  slug: /finance/administration/currencies
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance

package/hedhog/data/route.yaml

@@ -546,6 +546,42 @@
 
 - url: /finance/transfers
   method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/currencies
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/currencies
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/currencies/:id
+  method: PATCH
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/currencies/:id
+  method: DELETE
   relations:
     role:
       - where:

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

@@ -0,0 +1,490 @@
+'use client';
+
+import { EmptyState, Page, PageHeader } 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 {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import { Coins, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+type CurrencyFormValues = {
+  code: string;
+  name: string;
+  symbol: string;
+};
+
+type Currency = {
+  id: string;
+  code: string;
+  name: string;
+  symbol: string;
+  status: 'active' | 'inactive';
+  ativo: boolean;
+};
+
+type CurrencyDraftPayload = {
+  mode: 'create' | 'edit';
+  currencyId: string | null;
+  values: CurrencyFormValues;
+};
+
+const CURRENCY_FORM_DRAFT_STORAGE_KEY = 'finance-currencies-form-draft';
+
+function CurrencySheet({
+  open,
+  onOpenChange,
+  onSaved,
+  editingCurrency,
+  onEditingChange,
+  t,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSaved: () => Promise<unknown> | void;
+  editingCurrency: Currency | null;
+  onEditingChange: (currency: Currency | null) => void;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
+
+  const currencyFormSchema = z.object({
+    code: z
+      .string()
+      .trim()
+      .min(1, t('sheet.validation.codeRequired'))
+      .max(3, t('sheet.validation.codeMaxLength')),
+    name: z.string().trim().min(1, t('sheet.validation.nameRequired')),
+    symbol: z.string().trim().min(1, t('sheet.validation.symbolRequired')),
+  });
+
+  const form = useForm<CurrencyFormValues>({
+    resolver: zodResolver(currencyFormSchema),
+    defaultValues: {
+      code: '',
+      name: '',
+      symbol: '',
+    },
+  });
+
+  const watchedValues = useWatch({ control: form.control });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<CurrencyDraftPayload>({
+    storageKey: CURRENCY_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      mode: editingCurrency ? 'edit' : 'create',
+      currencyId: editingCurrency?.id ?? null,
+      values: {
+        code: watchedValues.code ?? '',
+        name: watchedValues.name ?? '',
+        symbol: watchedValues.symbol ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.code ?? '').trim() ||
+      (watchedValues.name ?? '').trim() ||
+      (watchedValues.symbol ?? '').trim()
+    ),
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) return null;
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) return null;
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const storedDraft = loadDraft();
+    const shouldRestoreEditDraft =
+      Boolean(editingCurrency) &&
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.currencyId === editingCurrency?.id;
+
+    if (editingCurrency) {
+      form.reset(
+        shouldRestoreEditDraft
+          ? storedDraft.payload.values
+          : {
+              code: editingCurrency.code,
+              name: editingCurrency.name,
+              symbol: editingCurrency.symbol,
+            }
+      );
+      return;
+    }
+
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : { code: '', name: '', symbol: '' }
+    );
+  }, [open, editingCurrency, form, loadDraft]);
+
+  const handleSubmit = async (values: CurrencyFormValues) => {
+    try {
+      if (editingCurrency) {
+        await request({
+          url: `/finance/currencies/${editingCurrency.id}`,
+          method: 'PATCH',
+          data: {
+            code: values.code,
+            name: values.name,
+            symbol: values.symbol,
+          },
+        });
+      } else {
+        await request({
+          url: '/finance/currencies',
+          method: 'POST',
+          data: {
+            code: values.code,
+            name: values.name,
+            symbol: values.symbol,
+          },
+        });
+      }
+
+      clearDraft();
+      await onSaved();
+      form.reset({ code: '', name: '', symbol: '' });
+      onEditingChange(null);
+      onOpenChange(false);
+      showToastHandler?.(
+        'success',
+        editingCurrency
+          ? t('messages.updateSuccess')
+          : t('messages.createSuccess')
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        editingCurrency ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange(nextOpen);
+    if (!nextOpen) onEditingChange(null);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>
+            {editingCurrency ? t('sheet.editTitle') : t('sheet.newTitle')}
+          </SheetTitle>
+          <SheetDescription>
+            {editingCurrency
+              ? t('sheet.editDescription')
+              : t('sheet.newDescription')}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 p-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.code')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('sheet.fields.codePlaceholder')}
+                      maxLength={3}
+                      {...field}
+                      onChange={(e) =>
+                        field.onChange(e.target.value.toUpperCase())
+                      }
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.name')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('sheet.fields.namePlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="symbol"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.symbol')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('sheet.fields.symbolPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function CurrenciesPage() {
+  const t = useTranslations('finance.AdminCurrenciesPage');
+  const { request, showToastHandler } = useApp();
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingCurrency, setEditingCurrency] = useState<Currency | null>(null);
+  const [currencyIdToDelete, setCurrencyIdToDelete] = useState<string | null>(
+    null
+  );
+
+  const { data: currencies, refetch } = useQuery<Currency[]>({
+    queryKey: ['finance-currencies'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/currencies',
+        method: 'GET',
+      });
+      return (response.data || []) as Currency[];
+    },
+    placeholderData: [],
+  });
+
+  const handleDelete = async () => {
+    if (!currencyIdToDelete) return;
+
+    try {
+      await request({
+        url: `/finance/currencies/${currencyIdToDelete}`,
+        method: 'DELETE',
+      });
+
+      await refetch();
+      setCurrencyIdToDelete(null);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    }
+  };
+
+  const items = currencies || [];
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.administration'),
+            href: '/finance/administration',
+          },
+          { label: t('breadcrumbs.current') },
+        ]}
+        actions={
+          <Button
+            onClick={() => {
+              setEditingCurrency(null);
+              setSheetOpen(true);
+            }}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            {t('actions.newCurrency')}
+          </Button>
+        }
+      />
+
+      <div className="space-y-4">
+        {items.length === 0 ? (
+          <EmptyState
+            icon={<Coins className="h-12 w-12" />}
+            title={t('table.empty')}
+            description={t('header.description')}
+            actionLabel={t('actions.newCurrency')}
+            actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            onAction={() => {
+              setEditingCurrency(null);
+              setSheetOpen(true);
+            }}
+          />
+        ) : (
+          <div className="grid gap-3">
+            {items.map((currency) => (
+              <div
+                key={currency.id}
+                className="flex flex-col gap-3 rounded-md border p-4 sm:flex-row sm:items-center sm:justify-between"
+              >
+                <div className="flex items-start gap-3">
+                  <div className="rounded-md bg-muted p-2">
+                    <Coins className="h-4 w-4" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">
+                      {currency.symbol}{' '}
+                      <span className="font-bold">{currency.code}</span>
+                      {' — '}
+                      {currency.name}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Badge variant={currency.ativo ? 'default' : 'secondary'}>
+                    {currency.ativo
+                      ? t('table.status.active')
+                      : t('table.status.inactive')}
+                  </Badge>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => {
+                      setEditingCurrency(currency);
+                      setSheetOpen(true);
+                    }}
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => setCurrencyIdToDelete(currency.id)}
+                    disabled={!currency.ativo}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <CurrencySheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        onSaved={refetch}
+        editingCurrency={editingCurrency}
+        onEditingChange={setEditingCurrency}
+        t={t}
+      />
+
+      <AlertDialog
+        open={!!currencyIdToDelete}
+        onOpenChange={(open) => {
+          if (!open) setCurrencyIdToDelete(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>
+              {t('deleteDialog.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}