@hed-hog/finance 0.0.235 → 0.0.237

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

@@ -0,0 +1,725 @@
+'use client';
+
+import { 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 {
+  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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ChevronDown,
+  ChevronRight,
+  FolderTree,
+  GripVertical,
+  Pencil,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type CategoryFormValues = {
+  nome: string;
+  natureza: string;
+  parentId?: string;
+};
+
+type FinanceCategory = {
+  id: string;
+  codigo: string;
+  nome: string;
+  parentId: string | null;
+  natureza: 'receita' | 'despesa' | 'transferencia' | 'ajuste' | 'outro';
+  status: 'active' | 'inactive';
+  ativo: boolean;
+};
+
+type CategoryNode = FinanceCategory & { children: CategoryNode[] };
+
+function buildTree(categories: FinanceCategory[]): CategoryNode[] {
+  const byId = new Map<string, CategoryNode>();
+  const roots: CategoryNode[] = [];
+
+  categories.forEach((item) => {
+    byId.set(item.id, { ...item, children: [] });
+  });
+
+  categories.forEach((item) => {
+    const node = byId.get(item.id)!;
+
+    if (item.parentId && byId.has(item.parentId)) {
+      byId.get(item.parentId)!.children.push(node);
+      return;
+    }
+
+    roots.push(node);
+  });
+
+  return roots;
+}
+
+function flattenTree(
+  nodes: CategoryNode[],
+  level = 0
+): Array<CategoryNode & { level: number }> {
+  return nodes.flatMap((node) => [
+    { ...node, level },
+    ...flattenTree(node.children, level + 1),
+  ]);
+}
+
+function CategoriaSheet({
+  open,
+  onOpenChange,
+  onSaved,
+  editing,
+  setEditing,
+  categories,
+  t,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSaved: () => Promise<any> | void;
+  editing: FinanceCategory | null;
+  setEditing: (item: FinanceCategory | null) => void;
+  categories: FinanceCategory[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const { request, showToastHandler } = useApp();
+
+  const categorySchema = z.object({
+    nome: z.string().trim().min(1, t('sheet.validation.nameRequired')),
+    natureza: z.string().min(1, t('sheet.validation.kindRequired')),
+    parentId: z.string().optional(),
+  });
+
+  const form = useForm<CategoryFormValues>({
+    resolver: zodResolver(categorySchema),
+    defaultValues: {
+      nome: '',
+      natureza: 'despesa',
+      parentId: 'root',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
+      return;
+    }
+
+    if (editing) {
+      form.reset({
+        nome: editing.nome,
+        natureza: editing.natureza,
+        parentId: editing.parentId || 'root',
+      });
+      return;
+    }
+
+    form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
+  }, [open, editing, form]);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange(nextOpen);
+
+    if (!nextOpen) {
+      setEditing(null);
+      form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
+    }
+  };
+
+  const onSubmit = async (values: CategoryFormValues) => {
+    try {
+      if (editing) {
+        await request({
+          url: `/finance/categories/${editing.id}`,
+          method: 'PATCH',
+          data: {
+            name: values.nome,
+            kind: values.natureza,
+            parent_id:
+              values.parentId === 'root' ? null : Number(values.parentId),
+          },
+        });
+      } else {
+        await request({
+          url: '/finance/categories',
+          method: 'POST',
+          data: {
+            name: values.nome,
+            kind: values.natureza,
+            parent_id:
+              values.parentId === 'root' ? null : Number(values.parentId),
+          },
+        });
+      }
+
+      await onSaved();
+      onOpenChange(false);
+      setEditing(null);
+      form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
+      showToastHandler?.(
+        'success',
+        editing ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>
+            {editing ? t('sheet.editTitle') : t('sheet.newTitle')}
+          </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="nome"
+              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="natureza"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.kind')}</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder={t('common.select')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="receita">
+                        {t('natureOptions.receita')}
+                      </SelectItem>
+                      <SelectItem value="despesa">
+                        {t('natureOptions.despesa')}
+                      </SelectItem>
+                      <SelectItem value="transferencia">
+                        {t('natureOptions.transferencia')}
+                      </SelectItem>
+                      <SelectItem value="ajuste">
+                        {t('natureOptions.ajuste')}
+                      </SelectItem>
+                      <SelectItem value="outro">
+                        {t('natureOptions.outro')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="parentId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.parent')}</FormLabel>
+                  <Select
+                    value={field.value || 'root'}
+                    onValueChange={field.onChange}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder={t('sheet.fields.noParent')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="root">
+                        {t('sheet.fields.noneRoot')}
+                      </SelectItem>
+                      {categories
+                        .filter((item) => item.id !== editing?.id)
+                        .map((item) => (
+                          <SelectItem key={item.id} value={item.id}>
+                            {item.nome}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <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>
+  );
+}
+
+function CategoryRow({
+  item,
+  expanded,
+  setExpanded,
+  onEdit,
+  onDelete,
+  dropHint,
+  t,
+}: {
+  item: CategoryNode & { level: number };
+  expanded: Set<string>;
+  setExpanded: (value: Set<string>) => void;
+  onEdit: (item: FinanceCategory) => void;
+  onDelete: (id: string) => void;
+  dropHint?: 'inside' | 'before' | 'after';
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const sortable = useSortable({ id: item.id });
+  const style = {
+    transform: sortable.transform
+      ? `translate3d(${sortable.transform.x}px, ${sortable.transform.y}px, 0)`
+      : undefined,
+    transition: sortable.transition,
+  };
+
+  const hasChildren = item.children.length > 0;
+  const isExpanded = expanded.has(item.id);
+
+  return (
+    <div
+      ref={sortable.setNodeRef}
+      style={style}
+      className={`rounded-md border bg-background ${
+        dropHint === 'inside' ? 'ring-1 ring-primary/50 bg-muted/40' : ''
+      } ${dropHint === 'before' ? 'border-t-2 border-t-primary' : ''} ${
+        dropHint === 'after' ? 'border-b-2 border-b-primary' : ''
+      }`}
+    >
+      <div
+        className="flex items-center justify-between gap-2 p-3"
+        style={{ paddingLeft: `${12 + item.level * 24}px` }}
+      >
+        <div className="flex min-w-0 items-center gap-2">
+          <button
+            type="button"
+            className="inline-flex h-5 w-5 items-center justify-center rounded"
+            onClick={() => {
+              if (!hasChildren) return;
+              const next = new Set(expanded);
+              if (next.has(item.id)) {
+                next.delete(item.id);
+              } else {
+                next.add(item.id);
+              }
+              setExpanded(next);
+            }}
+          >
+            {hasChildren ? (
+              isExpanded ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )
+            ) : null}
+          </button>
+
+          <button
+            type="button"
+            ref={sortable.setActivatorNodeRef}
+            {...sortable.listeners}
+            {...sortable.attributes}
+            className="inline-flex h-7 w-7 items-center justify-center rounded border"
+          >
+            <GripVertical className="h-4 w-4" />
+          </button>
+
+          <div className="min-w-0">
+            <p className="truncate text-sm font-medium">{item.nome}</p>
+            <p className="text-xs text-muted-foreground">{item.codigo}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Badge variant={item.ativo ? 'default' : 'secondary'}>
+            {item.ativo ? t('table.status.active') : t('table.status.inactive')}
+          </Badge>
+          <Badge variant="outline">{t(`natureOptions.${item.natureza}`)}</Badge>
+          <Button variant="outline" size="icon" onClick={() => onEdit(item)}>
+            <Pencil className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            disabled={!item.ativo}
+            onClick={() => onDelete(item.id)}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function CategoriesPage() {
+  const t = useTranslations('finance.AdminCategoriesPage');
+  const { request, showToastHandler } = useApp();
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editing, setEditing] = useState<FinanceCategory | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [dragOverHint, setDragOverHint] = useState<{
+    overId: string;
+    mode: 'inside' | 'before' | 'after';
+  } | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+  );
+
+  const { data, refetch } = useQuery<FinanceCategory[]>({
+    queryKey: ['finance-categories'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/categories',
+        method: 'GET',
+      });
+      return (response.data || []) as FinanceCategory[];
+    },
+    placeholderData: [],
+  });
+
+  const categories = data || [];
+  const tree = useMemo(() => buildTree(categories), [categories]);
+  const flat = useMemo(() => flattenTree(tree), [tree]);
+
+  const idToParent = useMemo(() => {
+    const map = new Map<string, string | null>();
+    categories.forEach((item) => map.set(item.id, item.parentId || null));
+    return map;
+  }, [categories]);
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+
+    try {
+      await request({
+        url: `/finance/categories/${deleteId}`,
+        method: 'DELETE',
+      });
+      await refetch();
+      setDeleteId(null);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    }
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+
+    const overRect = over.rect;
+    const activeTop =
+      active.rect.current.translated?.top ?? active.rect.current.initial?.top;
+
+    const isDropInsideTarget =
+      typeof activeTop === 'number' &&
+      activeTop > overRect.top + overRect.height * 0.25 &&
+      activeTop < overRect.top + overRect.height * 0.75;
+
+    const overParentId = idToParent.get(overId) || null;
+    const targetParentId = isDropInsideTarget ? overId : overParentId;
+
+    let cursor: string | null = targetParentId;
+    while (cursor) {
+      if (cursor === activeId) {
+        return;
+      }
+      cursor = idToParent.get(cursor) || null;
+    }
+
+    const siblings = categories.filter(
+      (item) =>
+        (item.parentId || null) === targetParentId && item.id !== activeId
+    );
+
+    let position = siblings.length;
+
+    if (!isDropInsideTarget) {
+      const overIndex = siblings.findIndex((item) => item.id === overId);
+      if (overIndex !== -1) {
+        const isDropAfter =
+          typeof activeTop === 'number' &&
+          activeTop > overRect.top + overRect.height / 2;
+        position = isDropAfter ? overIndex + 1 : overIndex;
+      }
+    }
+
+    try {
+      await request({
+        url: `/finance/categories/${activeId}/move`,
+        method: 'PATCH',
+        data: {
+          parent_id: targetParentId ? Number(targetParentId) : null,
+          position,
+        },
+      });
+
+      await refetch();
+      if (targetParentId) {
+        setExpanded((prev) => {
+          const next = new Set(prev);
+          next.add(targetParentId);
+          return next;
+        });
+      }
+      showToastHandler?.('success', t('messages.moveSuccess'));
+    } catch {
+      showToastHandler?.('error', t('messages.moveError'));
+    } finally {
+      setDragOverHint(null);
+    }
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) {
+      setDragOverHint(null);
+      return;
+    }
+
+    const overRect = over.rect;
+    const activeTop =
+      active.rect.current.translated?.top ?? active.rect.current.initial?.top;
+
+    if (typeof activeTop !== 'number') {
+      setDragOverHint(null);
+      return;
+    }
+
+    const overId = String(over.id);
+    const inside =
+      activeTop > overRect.top + overRect.height * 0.25 &&
+      activeTop < overRect.top + overRect.height * 0.75;
+
+    if (inside) {
+      setDragOverHint({ overId, mode: 'inside' });
+      return;
+    }
+
+    setDragOverHint({
+      overId,
+      mode: activeTop > overRect.top + overRect.height / 2 ? 'after' : 'before',
+    });
+  };
+
+  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') },
+        ]}
+      />
+
+      <Card>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <FolderTree className="h-5 w-5" />
+              {t('card.title')}
+            </CardTitle>
+            <CardDescription>{t('card.description')}</CardDescription>
+          </div>
+          <Button
+            className="gap-2"
+            onClick={() => {
+              setEditing(null);
+              setSheetOpen(true);
+            }}
+          >
+            <Plus className="h-4 w-4" />
+            {t('actions.newCategory')}
+          </Button>
+        </CardHeader>
+
+        <CardContent>
+          {flat.length === 0 ? (
+            <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
+              {t('table.empty')}
+            </div>
+          ) : (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragOver={handleDragOver}
+              onDragEnd={handleDragEnd}
+              onDragCancel={() => setDragOverHint(null)}
+            >
+              <SortableContext
+                items={flat.map((item) => item.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <div className="space-y-2">
+                  {flat.map((item) => (
+                    <CategoryRow
+                      key={item.id}
+                      item={item}
+                      expanded={expanded}
+                      setExpanded={setExpanded}
+                      dropHint={
+                        dragOverHint?.overId === item.id
+                          ? dragOverHint.mode
+                          : undefined
+                      }
+                      onEdit={(category) => {
+                        setEditing(category);
+                        setSheetOpen(true);
+                      }}
+                      onDelete={(id) => setDeleteId(id)}
+                      t={t}
+                    />
+                  ))}
+                </div>
+              </SortableContext>
+            </DndContext>
+          )}
+        </CardContent>
+      </Card>
+
+      <CategoriaSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        onSaved={refetch}
+        editing={editing}
+        setEditing={setEditing}
+        categories={categories}
+        t={t}
+      />
+
+      <AlertDialog
+        open={!!deleteId}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeleteId(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>
+  );
+}