@hed-hog/finance 0.0.253 → 0.0.257

package/hedhog/frontend/app/_components/finance-title-actions-menu.tsx.ejs

@@ -0,0 +1,244 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  CheckCircle,
+  Download,
+  Edit,
+  Eye,
+  MoreHorizontal,
+  Undo,
+  XCircle,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useState } from 'react';
+
+type FinanceTitleActionsMenuLabels = {
+  menu: string;
+  srActions: string;
+  viewDetails?: string;
+  edit: string;
+  approve: string;
+  settle: string;
+  reverse: string;
+  cancel: string;
+};
+
+type FinanceTitleActionsMenuDialogLabels = {
+  cancelTitle: string;
+  cancelDescription: string;
+  cancelButton: string;
+  confirmCancelButton: string;
+  reverseTitle: string;
+  reverseDescription: string;
+  reverseReasonLabel: string;
+  reverseReasonPlaceholder: string;
+  reverseButton: string;
+  confirmReverseButton: string;
+};
+
+type FinanceTitleActionsMenuProps = {
+  detailHref?: string;
+  triggerVariant?: 'ghost' | 'outline';
+  canEdit: boolean;
+  canApprove: boolean;
+  canSettle: boolean;
+  canReverse: boolean;
+  canCancel: boolean;
+  isApproving?: boolean;
+  isReversing?: boolean;
+  isCanceling?: boolean;
+  labels: FinanceTitleActionsMenuLabels;
+  dialogs: FinanceTitleActionsMenuDialogLabels;
+  onEdit: () => void;
+  onApprove: () => void;
+  onSettle: () => void;
+  onReverse: (reason?: string) => Promise<void> | void;
+  onCancel: () => Promise<void> | void;
+};
+
+export function FinanceTitleActionsMenu({
+  detailHref,
+  triggerVariant = 'outline',
+  canEdit,
+  canApprove,
+  canSettle,
+  canReverse,
+  canCancel,
+  isApproving,
+  isReversing,
+  isCanceling,
+  labels,
+  dialogs,
+  onEdit,
+  onApprove,
+  onSettle,
+  onReverse,
+  onCancel,
+}: FinanceTitleActionsMenuProps) {
+  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
+  const [isReverseSheetOpen, setIsReverseSheetOpen] = useState(false);
+  const [reverseReason, setReverseReason] = useState('');
+
+  const confirmReverse = () => {
+    void Promise.resolve(onReverse(reverseReason.trim() || undefined)).finally(
+      () => {
+        setIsReverseSheetOpen(false);
+        setReverseReason('');
+      }
+    );
+  };
+
+  const confirmCancel = () => {
+    void Promise.resolve(onCancel()).finally(() => {
+      setIsCancelDialogOpen(false);
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant={triggerVariant}
+            size={triggerVariant === 'ghost' ? 'icon' : 'default'}
+          >
+            <MoreHorizontal className="h-4 w-4" />
+            {triggerVariant === 'ghost' ? (
+              <span className="sr-only">{labels.srActions}</span>
+            ) : (
+              <span>{labels.menu}</span>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {detailHref ? (
+            <DropdownMenuItem asChild>
+              <Link href={detailHref}>
+                <Eye className="mr-2 h-4 w-4" />
+                {labels.viewDetails}
+              </Link>
+            </DropdownMenuItem>
+          ) : null}
+          <DropdownMenuItem disabled={!canEdit} onClick={onEdit}>
+            <Edit className="mr-2 h-4 w-4" />
+            {labels.edit}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!canApprove || !!isApproving}
+            onClick={onApprove}
+          >
+            <CheckCircle className="mr-2 h-4 w-4" />
+            {labels.approve}
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled={!canSettle} onClick={onSettle}>
+            <Download className="mr-2 h-4 w-4" />
+            {labels.settle}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!canReverse || !!isReversing}
+            onClick={() => {
+              setReverseReason('');
+              setIsReverseSheetOpen(true);
+            }}
+          >
+            <Undo className="mr-2 h-4 w-4" />
+            {labels.reverse}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="text-destructive"
+            disabled={!canCancel || !!isCanceling}
+            onClick={() => setIsCancelDialogOpen(true)}
+          >
+            <XCircle className="mr-2 h-4 w-4" />
+            {labels.cancel}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Sheet open={isReverseSheetOpen} onOpenChange={setIsReverseSheetOpen}>
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{dialogs.reverseTitle}</SheetTitle>
+            <SheetDescription>{dialogs.reverseDescription}</SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-4 px-4">
+            <div className="space-y-2">
+              <p className="text-sm font-medium">
+                {dialogs.reverseReasonLabel}
+              </p>
+              <Input
+                value={reverseReason}
+                onChange={(event) => setReverseReason(event.target.value)}
+                placeholder={dialogs.reverseReasonPlaceholder}
+                maxLength={255}
+                disabled={!!isReversing}
+              />
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Button disabled={!!isReversing} onClick={confirmReverse}>
+                {dialogs.confirmReverseButton}
+              </Button>
+              <Button
+                variant="outline"
+                disabled={!!isReversing}
+                onClick={() => setIsReverseSheetOpen(false)}
+              >
+                {dialogs.reverseButton}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={isCancelDialogOpen}
+        onOpenChange={setIsCancelDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{dialogs.cancelTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {dialogs.cancelDescription}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={!!isCanceling}>
+              {dialogs.cancelButton}
+            </AlertDialogCancel>
+            <Button disabled={!!isCanceling} onClick={confirmCancel}>
+              {dialogs.confirmCancelButton}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/hedhog/frontend/app/_components/person-field-with-create.tsx.ejs

@@ -39,8 +39,9 @@ import {
 } from '@/components/ui/sheet';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ChevronsUpDown, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { ChevronsUpDown, Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
 import { FieldValues, Path, UseFormReturn, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -79,6 +80,7 @@ function CreatePersonSheet({
   entityLabel: string;
 }) {
   const { request, showToastHandler, currentLocaleCode } = useApp();
+  const t = useTranslations('finance.PersonFieldWithCreate');
 
   const form = useForm<CreatePersonValues>({
     resolver: zodResolver(createPersonSchema),
@@ -238,9 +240,12 @@ function CreatePersonSheet({
       onCreated({ id: personId, name: values.name });
       form.reset();
       onOpenChange(false);
-      showToastHandler?.('success', `${entityLabel} criado com sucesso`);
+      showToastHandler?.(
+        'success',
+        t('messages.createdSuccess', { entityLabel })
+      );
     } catch {
-      showToastHandler?.('error', `Não foi possível criar ${entityLabel}`);
+      showToastHandler?.('error', t('messages.createdError', { entityLabel }));
     }
   };
 
@@ -254,28 +259,28 @@ function CreatePersonSheet({
         }
       }}
     >
-      <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+      <SheetContent
+        className="w-full overflow-y-auto sm:max-w-xl"
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
         <SheetHeader>
-          <SheetTitle>Novo {entityLabel}</SheetTitle>
-          <SheetDescription>
-            Apenas nome e tipo são obrigatórios. Você pode completar os demais
-            dados agora ou depois.
-          </SheetDescription>
+          <SheetTitle>{t('sheet.title', { entityLabel })}</SheetTitle>
+          <SheetDescription>{t('sheet.description')}</SheetDescription>
         </SheetHeader>
 
         <Form {...form}>
-          <form
-            className="space-y-4 p-4"
-            onSubmit={form.handleSubmit(handleSubmit)}
-          >
+          <div className="space-y-4 p-4">
             <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Nome</FormLabel>
+                  <FormLabel>{t('fields.name')}</FormLabel>
                   <FormControl>
-                    <Input placeholder={`Nome do ${entityLabel}`} {...field} />
+                    <Input
+                      placeholder={t('placeholders.name', { entityLabel })}
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -287,16 +292,20 @@ function CreatePersonSheet({
               name="type"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Tipo</FormLabel>
+                  <FormLabel>{t('fields.type')}</FormLabel>
                   <Select value={field.value} onValueChange={field.onChange}>
                     <FormControl>
                       <SelectTrigger>
-                        <SelectValue placeholder="Selecione" />
+                        <SelectValue placeholder={t('common.select')} />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      <SelectItem value="individual">Pessoa Física</SelectItem>
-                      <SelectItem value="company">Pessoa Jurídica</SelectItem>
+                      <SelectItem value="individual">
+                        {t('types.individual')}
+                      </SelectItem>
+                      <SelectItem value="company">
+                        {t('types.company')}
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                   <FormMessage />
@@ -312,8 +321,8 @@ function CreatePersonSheet({
                   <FormItem>
                     <FormLabel>
                       {selectedType === 'individual'
-                        ? 'CPF (opcional)'
-                        : 'CNPJ (opcional)'}
+                        ? t('fields.documentIndividualOptional')
+                        : t('fields.documentCompanyOptional')}
                     </FormLabel>
                     <FormControl>
                       <Input
@@ -336,10 +345,10 @@ function CreatePersonSheet({
                 name="email"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>E-mail (opcional)</FormLabel>
+                    <FormLabel>{t('fields.emailOptional')}</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder={`${entityLabel}@empresa.com`}
+                        placeholder={t('placeholders.email', { entityLabel })}
                         {...field}
                         value={field.value || ''}
                       />
@@ -355,10 +364,10 @@ function CreatePersonSheet({
               name="phone"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Telefone (opcional)</FormLabel>
+                  <FormLabel>{t('fields.phoneOptional')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="(11) 99999-9999"
+                      placeholder={t('placeholders.phone')}
                       {...field}
                       value={field.value || ''}
                     />
@@ -369,7 +378,9 @@ function CreatePersonSheet({
             />
 
             <div className="rounded-md border p-3">
-              <p className="mb-3 text-sm font-medium">Endereço (opcional)</p>
+              <p className="mb-3 text-sm font-medium">
+                {t('fields.addressOptional')}
+              </p>
               <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <FormField
                   control={form.control}
@@ -378,7 +389,7 @@ function CreatePersonSheet({
                     <FormItem className="sm:col-span-2">
                       <FormControl>
                         <Input
-                          placeholder="Rua, número, complemento"
+                          placeholder={t('placeholders.addressLine1')}
                           {...field}
                           value={field.value || ''}
                         />
@@ -395,7 +406,7 @@ function CreatePersonSheet({
                     <FormItem>
                       <FormControl>
                         <Input
-                          placeholder="Cidade"
+                          placeholder={t('placeholders.city')}
                           {...field}
                           value={field.value || ''}
                         />
@@ -412,7 +423,7 @@ function CreatePersonSheet({
                     <FormItem>
                       <FormControl>
                         <Input
-                          placeholder="UF"
+                          placeholder={t('placeholders.state')}
                           {...field}
                           value={field.value || ''}
                         />
@@ -430,13 +441,19 @@ function CreatePersonSheet({
                 variant="outline"
                 onClick={() => onOpenChange(false)}
               >
-                Cancelar
+                {t('actions.cancel')}
               </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                Salvar {entityLabel}
+              <Button
+                type="button"
+                disabled={form.formState.isSubmitting}
+                onClick={() => {
+                  void form.handleSubmit(handleSubmit)();
+                }}
+              >
+                {t('actions.saveEntity', { entityLabel })}
               </Button>
             </div>
-          </form>
+          </div>
         </Form>
       </SheetContent>
     </Sheet>
@@ -457,11 +474,14 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
   selectPlaceholder: string;
 }) {
   const { request } = useApp();
+  const t = useTranslations('finance.PersonFieldWithCreate');
   const [personOpen, setPersonOpen] = useState(false);
   const [personSearch, setPersonSearch] = useState('');
   const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
   const [createPersonOpen, setCreatePersonOpen] = useState(false);
   const [selectedPersonLabel, setSelectedPersonLabel] = useState('');
+  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
+  const parentScrollTopRef = useRef(0);
 
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -471,6 +491,49 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
     return () => clearTimeout(timeout);
   }, [personSearch]);
 
+  const captureParentScrollPosition = (trigger: HTMLElement) => {
+    const parentSheetContent = trigger.closest(
+      '[data-radix-dialog-content]'
+    ) as HTMLElement | null;
+
+    if (!parentSheetContent) {
+      parentScrollContainerRef.current = null;
+      parentScrollTopRef.current = 0;
+      return;
+    }
+
+    parentScrollContainerRef.current = parentSheetContent;
+    parentScrollTopRef.current = parentSheetContent.scrollTop;
+  };
+
+  const restoreParentScrollPosition = () => {
+    const fallbackOpenDialog = (
+      Array.from(
+        document.querySelectorAll(
+          '[data-radix-dialog-content][data-state="open"]'
+        )
+      ) as HTMLElement[]
+    ).at(-1);
+
+    const container =
+      parentScrollContainerRef.current &&
+      document.body.contains(parentScrollContainerRef.current)
+        ? parentScrollContainerRef.current
+        : fallbackOpenDialog || null;
+
+    if (!container) {
+      return;
+    }
+
+    const restore = () => {
+      container.scrollTop = parentScrollTopRef.current;
+    };
+
+    requestAnimationFrame(restore);
+    setTimeout(restore, 0);
+    setTimeout(restore, 120);
+  };
+
   const { data: personOptionsData = [], isLoading: isLoadingPersons } =
     useQuery<PersonOption[]>({
       queryKey: [
@@ -513,7 +576,7 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
         render={({ field }) => (
           <FormItem>
             <FormLabel>{label}</FormLabel>
-            <div className="flex items-center gap-2">
+            <div className="flex w-full min-w-0 items-center gap-2">
               <Popover open={personOpen} onOpenChange={setPersonOpen}>
                 <PopoverTrigger asChild>
                   <FormControl>
@@ -521,16 +584,18 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
                       type="button"
                       variant="outline"
                       role="combobox"
-                      className="w-full justify-between"
+                      className="flex-1 min-w-0 justify-between overflow-hidden"
                     >
-                      {field.value
-                        ? (personOptionsData.find(
-                            (person) =>
-                              String(person.id) === String(field.value)
-                          )?.name ??
-                          selectedPersonLabel ??
-                          `ID #${String(field.value)}`)
-                        : selectPlaceholder}
+                      <span className="truncate text-left">
+                        {field.value
+                          ? (personOptionsData.find(
+                              (person) =>
+                                String(person.id) === String(field.value)
+                            )?.name ??
+                            selectedPersonLabel ??
+                            `ID #${String(field.value)}`)
+                          : selectPlaceholder}
+                      </span>
                       <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                     </Button>
                   </FormControl>
@@ -541,29 +606,32 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
                 >
                   <Command shouldFilter={false}>
                     <CommandInput
-                      placeholder="Digite para buscar pessoa..."
+                      placeholder={t('search.placeholder')}
                       value={personSearch}
                       onValueChange={setPersonSearch}
                     />
                     <CommandList>
                       <CommandEmpty>
                         {isLoadingPersons ? (
-                          'Buscando pessoas...'
+                          t('search.loading')
                         ) : (
                           <div className="space-y-2 p-2 text-center">
                             <p className="text-sm text-muted-foreground">
-                              Nenhuma pessoa encontrada
+                              {t('search.noResults')}
                             </p>
                             <Button
                               type="button"
                               variant="outline"
                               className="w-full"
-                              onClick={() => {
+                              onClick={(event) => {
+                                captureParentScrollPosition(
+                                  event.currentTarget
+                                );
                                 setPersonOpen(false);
                                 setCreatePersonOpen(true);
                               }}
                             >
-                              Criar novo cadastro
+                              {t('actions.createNew')}
                             </Button>
                           </div>
                         )}
@@ -593,16 +661,33 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
                   type="button"
                   variant="outline"
                   size="icon"
+                  className="shrink-0"
                   onClick={() => {
                     field.onChange('');
                     setPersonSearch('');
                     setSelectedPersonLabel('');
                     setPersonOpen(false);
                   }}
+                  aria-label={t('actions.clearSelection')}
                 >
                   <X className="h-4 w-4" />
                 </Button>
               ) : null}
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="shrink-0"
+                onClick={(event) => {
+                  captureParentScrollPosition(event.currentTarget);
+                  setPersonOpen(false);
+                  setCreatePersonOpen(true);
+                }}
+                aria-label={t('actions.createEntityAria', { entityLabel })}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
             </div>
             <FormMessage />
           </FormItem>
@@ -611,11 +696,18 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
 
       <CreatePersonSheet
         open={createPersonOpen}
-        onOpenChange={setCreatePersonOpen}
+        onOpenChange={(nextOpen) => {
+          setCreatePersonOpen(nextOpen);
+          if (!nextOpen) {
+            restoreParentScrollPosition();
+          }
+        }}
         entityLabel={entityLabel}
         onCreated={(person) => {
           form.setValue(name, String(person.id) as any, {
-            shouldValidate: true,
+            shouldValidate: false,
+            shouldDirty: true,
+            shouldTouch: true,
           });
           setSelectedPersonLabel(person.name);
           setPersonSearch(person.name);

package/hedhog/frontend/app/_lib/title-action-rules.ts.ejs

@@ -0,0 +1,36 @@
+export const canEditTitle = (status?: string | null) => status === 'rascunho';
+
+export const canApproveTitle = (status?: string | null) =>
+  status === 'rascunho';
+
+export const canSettleTitle = (status?: string | null) =>
+  ['aberto', 'parcial', 'vencido'].includes(String(status || ''));
+
+export const canCancelTitle = (status?: string | null) =>
+  !['cancelado', 'liquidado'].includes(String(status || ''));
+
+export const canReverseTitle = (status?: string | null) =>
+  String(status || '') === 'liquidado';
+
+export const getFirstActiveSettlementId = (title: any): string | null => {
+  const settlements = (title?.parcelas || []).flatMap(
+    (installment: any) => installment?.liquidacoes || []
+  );
+
+  const activeSettlement = [...settlements]
+    .reverse()
+    .find((settlement: any) => {
+      const settlementStatus = String(settlement?.status || '').toLowerCase();
+
+      return (
+        !!settlement?.settlementId &&
+        settlementStatus !== 'reversed' &&
+        settlementStatus !== 'estornado' &&
+        settlementStatus !== 'reversed_settlement'
+      );
+    });
+
+  return activeSettlement?.settlementId
+    ? String(activeSettlement.settlementId)
+    : null;
+};