@hed-hog/finance 0.0.236 → 0.0.237

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

@@ -46,6 +46,7 @@ import {
 import {
   DndContext,
   DragEndEvent,
+  DragOverEvent,
   PointerSensor,
   closestCenter,
   useSensor,
@@ -53,7 +54,6 @@ import {
 } from '@dnd-kit/core';
 import {
   SortableContext,
-  arrayMove,
   useSortable,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
@@ -69,7 +69,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -157,11 +157,8 @@ function CategoriaSheet({
     },
   });
 
-  const handleOpenChange = (nextOpen: boolean) => {
-    onOpenChange(nextOpen);
-
-    if (!nextOpen) {
-      setEditing(null);
+  useEffect(() => {
+    if (!open) {
       form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
       return;
     }
@@ -172,6 +169,18 @@ function CategoriaSheet({
         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' });
     }
   };
 
@@ -254,7 +263,7 @@ function CategoriaSheet({
                   <FormLabel>{t('sheet.fields.kind')}</FormLabel>
                   <Select value={field.value} onValueChange={field.onChange}>
                     <FormControl>
-                      <SelectTrigger>
+                      <SelectTrigger className="w-full">
                         <SelectValue placeholder={t('common.select')} />
                       </SelectTrigger>
                     </FormControl>
@@ -292,7 +301,7 @@ function CategoriaSheet({
                     onValueChange={field.onChange}
                   >
                     <FormControl>
-                      <SelectTrigger>
+                      <SelectTrigger className="w-full">
                         <SelectValue placeholder={t('sheet.fields.noParent')} />
                       </SelectTrigger>
                     </FormControl>
@@ -339,6 +348,7 @@ function CategoryRow({
   setExpanded,
   onEdit,
   onDelete,
+  dropHint,
   t,
 }: {
   item: CategoryNode & { level: number };
@@ -346,6 +356,7 @@ function CategoryRow({
   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 });
@@ -363,7 +374,11 @@ function CategoryRow({
     <div
       ref={sortable.setNodeRef}
       style={style}
-      className="rounded-md border bg-background"
+      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"
@@ -439,6 +454,10 @@ export default function CategoriesPage() {
   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 } })
@@ -492,27 +511,42 @@ export default function CategoriesPage() {
     const activeId = String(active.id);
     const overId = String(over.id);
 
-    const activeIndex = flat.findIndex((item) => item.id === activeId);
-    const overIndex = flat.findIndex((item) => item.id === overId);
+    const overRect = over.rect;
+    const activeTop =
+      active.rect.current.translated?.top ?? active.rect.current.initial?.top;
 
-    if (activeIndex === -1 || overIndex === -1) {
-      return;
-    }
+    const isDropInsideTarget =
+      typeof activeTop === 'number' &&
+      activeTop > overRect.top + overRect.height * 0.25 &&
+      activeTop < overRect.top + overRect.height * 0.75;
 
-    const reordered = arrayMove(flat, activeIndex, overIndex);
-    const movedItem = reordered[overIndex];
-    if (!movedItem) {
-      return;
+    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 targetParentId = idToParent.get(overId) || null;
 
-    const siblings = reordered.filter(
+    const siblings = categories.filter(
       (item) =>
-        (idToParent.get(item.id) || null) === targetParentId &&
-        item.id !== movedItem.id
+        (item.parentId || null) === targetParentId && item.id !== activeId
     );
 
-    const position = siblings.findIndex((item) => item.id === overId);
+    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({
@@ -520,15 +554,57 @@ export default function CategoriesPage() {
         method: 'PATCH',
         data: {
           parent_id: targetParentId ? Number(targetParentId) : null,
-          position: position < 0 ? siblings.length : position,
+          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 (
@@ -576,7 +652,9 @@ export default function CategoriesPage() {
             <DndContext
               sensors={sensors}
               collisionDetection={closestCenter}
+              onDragOver={handleDragOver}
               onDragEnd={handleDragEnd}
+              onDragCancel={() => setDragOverHint(null)}
             >
               <SortableContext
                 items={flat.map((item) => item.id)}
@@ -589,6 +667,11 @@ export default function CategoriesPage() {
                       item={item}
                       expanded={expanded}
                       setExpanded={setExpanded}
+                      dropHint={
+                        dragOverHint?.overId === item.id
+                          ? dragOverHint.mode
+                          : undefined
+                      }
                       onEdit={(category) => {
                         setEditing(category);
                         setSheetOpen(true);

package/hedhog/frontend/app/administration/cost-centers/page.tsx.ejs

@@ -40,7 +40,7 @@ import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Building2, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -84,6 +84,20 @@ function CentroCustoSheet({
     },
   });
 
+  useEffect(() => {
+    if (!open) {
+      form.reset({ nome: '' });
+      return;
+    }
+
+    if (editingCostCenter) {
+      form.reset({ nome: editingCostCenter.nome });
+      return;
+    }
+
+    form.reset({ nome: '' });
+  }, [open, editingCostCenter, form]);
+
   const handleSubmit = async (values: CostCenterFormValues) => {
     try {
       if (editingCostCenter) {
@@ -130,13 +144,6 @@ function CentroCustoSheet({
     if (!nextOpen) {
       form.reset({ nome: '' });
       onEditingChange(null);
-      return;
-    }
-
-    if (editingCostCenter) {
-      form.reset({
-        nome: editingCostCenter.nome,
-      });
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/finance",
-  "version": "0.0.236",
+  "version": "0.0.237",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,14 +9,14 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/api-locale": "0.0.11",
     "@hed-hog/api-prisma": "0.0.4",
+    "@hed-hog/tag": "0.0.237",
     "@hed-hog/api-pagination": "0.0.5",
     "@hed-hog/api-types": "0.0.1",
-    "@hed-hog/tag": "0.0.236",
     "@hed-hog/api": "0.0.3",
-    "@hed-hog/contact": "0.0.236",
-    "@hed-hog/core": "0.0.236"
+    "@hed-hog/contact": "0.0.237",
+    "@hed-hog/core": "0.0.237",
+    "@hed-hog/api-locale": "0.0.11"
   },
   "exports": {
     ".": {