@hed-hog/finance 0.0.236 → 0.0.238

package/hedhog/frontend/app/accounts-receivable/installments/[id]/page.tsx.ejs

@@ -28,6 +28,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { TagSelectorSheet } from '@/components/ui/tag-selector-sheet';
+import { useApp } from '@hed-hog/next-app-provider';
 import {
   ArrowLeft,
   Download,
@@ -39,11 +41,13 @@ import {
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { formatarData } from '../../../_lib/formatters';
 import { useFinanceData } from '../../../_lib/use-finance-data';
 
 export default function TituloReceberDetalhePage() {
   const t = useTranslations('finance.ReceivableInstallmentDetailPage');
+  const { request, showToastHandler } = useApp();
   const params = useParams<{ id: string }>();
   const id = params?.id;
   const { data } = useFinanceData();
@@ -59,6 +63,22 @@ export default function TituloReceberDetalhePage() {
 
   const titulo = titulosReceber.find((t) => t.id === id);
 
+  const [availableTags, setAvailableTags] = useState<any[]>([]);
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+  const [isCreatingTag, setIsCreatingTag] = useState(false);
+
+  useEffect(() => {
+    setAvailableTags(tags || []);
+  }, [tags]);
+
+  useEffect(() => {
+    if (!titulo) {
+      return;
+    }
+
+    setSelectedTagIds(Array.isArray(titulo.tags) ? titulo.tags : []);
+  }, [titulo]);
+
   const canalBadge = {
     boleto: {
       label: t('channels.boleto'),
@@ -108,9 +128,21 @@ export default function TituloReceberDetalhePage() {
   const cliente = getPessoaById(titulo.clienteId);
   const categoria = getCategoriaById(titulo.categoriaId);
   const centroCusto = getCentroCustoById(titulo.centroCustoId);
-  const tituloTags = titulo.tags
-    .map((tagId: any) => tags.find((t: any) => t.id === tagId))
-    .filter(Boolean);
+
+  const tagOptions = availableTags.map((tag) => ({
+    id: String(tag.id),
+    name: String(tag.nome || ''),
+    color: tag.cor,
+    usageCount:
+      typeof tag.usageCount === 'number'
+        ? tag.usageCount
+        : typeof tag.usoCount === 'number'
+          ? tag.usoCount
+          : typeof tag.count === 'number'
+            ? tag.count
+            : undefined,
+  }));
+
   const canal =
     canalBadge[titulo.canal as keyof typeof canalBadge] ||
     canalBadge.transferencia;
@@ -129,6 +161,131 @@ export default function TituloReceberDetalhePage() {
       depois: log.depois,
     }));
 
+  const attachmentDetails = Array.isArray(titulo.anexosDetalhes)
+    ? titulo.anexosDetalhes
+    : (titulo.anexos || []).map((nome: string) => ({ nome }));
+
+  const handleOpenAttachment = async (fileId?: string) => {
+    if (!fileId) {
+      return;
+    }
+
+    const response = await request<{ url?: string }>({
+      url: `/file/open/${fileId}`,
+      method: 'PUT',
+    });
+
+    const url = response?.data?.url;
+    if (!url) {
+      return;
+    }
+
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  const tTagSelector = (key: string, fallback: string) => {
+    const fullKey = `tagSelector.${key}`;
+    return t.has(fullKey) ? t(fullKey) : fallback;
+  };
+
+  const toTagSlug = (value: string) => {
+    return value
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)+/g, '');
+  };
+
+  const handleCreateTag = async (name: string) => {
+    const slug = toTagSlug(name);
+
+    if (!slug) {
+      return null;
+    }
+
+    setIsCreatingTag(true);
+    try {
+      const response = await request<{
+        id?: string | number;
+        nome?: string;
+        cor?: string;
+      }>({
+        url: '/finance/tags',
+        method: 'POST',
+        data: {
+          name: slug,
+          color: '#000000',
+        },
+      });
+
+      const created = response?.data;
+      const newTag = {
+        id: String(created?.id || `temp-${Date.now()}`),
+        nome: created?.nome || slug,
+        cor: created?.cor || '#000000',
+      };
+
+      setAvailableTags((current) => {
+        if (current.some((tag) => String(tag.id) === newTag.id)) {
+          return current;
+        }
+
+        return [...current, newTag];
+      });
+
+      showToastHandler?.(
+        'success',
+        tTagSelector('messages.createSuccess', 'Tag criada com sucesso')
+      );
+
+      return {
+        id: newTag.id,
+        name: newTag.nome,
+        color: newTag.cor,
+      };
+    } catch {
+      showToastHandler?.(
+        'error',
+        tTagSelector('messages.createError', 'Não foi possível criar a tag')
+      );
+      return null;
+    } finally {
+      setIsCreatingTag(false);
+    }
+  };
+
+  const handleChangeTags = async (nextTagIds: string[]) => {
+    if (!titulo?.id) {
+      return;
+    }
+
+    try {
+      const response = await request<{ tags?: string[] }>({
+        url: `/finance/accounts-receivable/installments/${titulo.id}/tags`,
+        method: 'PATCH',
+        data: {
+          tag_ids: nextTagIds.map((tagId) => Number(tagId)),
+        },
+      });
+
+      if (Array.isArray(response?.data?.tags)) {
+        setSelectedTagIds(response.data.tags);
+      } else {
+        setSelectedTagIds(nextTagIds);
+      }
+    } catch {
+      showToastHandler?.(
+        'error',
+        tTagSelector(
+          'messages.updateError',
+          'Não foi possível atualizar as tags'
+        )
+      );
+    }
+  };
+
   return (
     <Page>
       <div className="flex items-center gap-4">
@@ -245,20 +402,44 @@ export default function TituloReceberDetalhePage() {
                 <dt className="text-sm font-medium text-muted-foreground">
                   {t('documentData.tags')}
                 </dt>
-                <dd className="mt-1 flex gap-1">
-                  {tituloTags.length > 0 ? (
-                    tituloTags.map((tag: any) => (
-                      <Badge
-                        key={tag?.id}
-                        variant="outline"
-                        style={{ borderColor: tag?.cor, color: tag?.cor }}
-                      >
-                        {tag?.nome}
-                      </Badge>
-                    ))
-                  ) : (
-                    <span className="text-muted-foreground">-</span>
-                  )}
+                <dd className="mt-1">
+                  <TagSelectorSheet
+                    selectedTagIds={selectedTagIds}
+                    tags={tagOptions}
+                    onChange={handleChangeTags}
+                    onCreateTag={handleCreateTag}
+                    disabled={isCreatingTag}
+                    emptyText={tTagSelector('noTags', 'Sem tags')}
+                    labels={{
+                      addTag: tTagSelector('addTag', 'Adicionar tag'),
+                      sheetTitle: tTagSelector('sheetTitle', 'Gerenciar tags'),
+                      sheetDescription: tTagSelector(
+                        'sheetDescription',
+                        'Selecione tags existentes ou crie uma nova.'
+                      ),
+                      createLabel: tTagSelector('createLabel', 'Nova tag'),
+                      createPlaceholder: tTagSelector(
+                        'createPlaceholder',
+                        'Digite o nome da tag'
+                      ),
+                      createAction: tTagSelector('createAction', 'Criar tag'),
+                      popularTitle: tTagSelector(
+                        'popularTitle',
+                        'Tags mais usadas'
+                      ),
+                      selectedTitle: tTagSelector(
+                        'selectedTitle',
+                        'Tags selecionadas'
+                      ),
+                      noTags: tTagSelector('noTags', 'Sem tags'),
+                      cancel: tTagSelector('cancel', 'Cancelar'),
+                      apply: tTagSelector('apply', 'Aplicar'),
+                      removeTagAria: (tagName: string) =>
+                        t.has('tagSelector.removeTagAria')
+                          ? t('tagSelector.removeTagAria', { tag: tagName })
+                          : `Remover tag ${tagName}`,
+                    }}
+                  />
                 </dd>
               </div>
             </dl>
@@ -271,16 +452,17 @@ export default function TituloReceberDetalhePage() {
             <CardDescription>{t('attachments.description')}</CardDescription>
           </CardHeader>
           <CardContent>
-            {titulo.anexos.length > 0 ? (
+            {attachmentDetails.length > 0 ? (
               <ul className="space-y-2">
-                {titulo.anexos.map((anexo: any, i: number) => (
+                {attachmentDetails.map((anexo: any, i: number) => (
                   <li key={i}>
                     <Button
                       variant="ghost"
                       className="h-auto w-full justify-start p-2"
+                      onClick={() => void handleOpenAttachment(anexo?.id)}
                     >
                       <FileText className="mr-2 h-4 w-4" />
-                      {anexo}
+                      {anexo?.nome}
                     </Button>
                   </li>
                 ))}