@hed-hog/finance 0.0.236 → 0.0.238

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

@@ -2,7 +2,6 @@
 
 import { Page, PageHeader } from '@/components/entity-list';
 import { AuditTimeline } from '@/components/ui/audit-timeline';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -29,8 +28,9 @@ 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,
   CheckCircle,
   Download,
   Edit,
@@ -42,11 +42,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 TituloDetalhePage() {
   const t = useTranslations('finance.PayableInstallmentDetailPage');
+  const { request, showToastHandler } = useApp();
   const params = useParams<{ id: string }>();
   const id = params?.id;
   const { data } = useFinanceData();
@@ -62,6 +64,22 @@ export default function TituloDetalhePage() {
 
   const titulo = titulosPagar.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]);
+
   if (!titulo) {
     return (
       <div className="space-y-6">
@@ -95,9 +113,20 @@ export default function TituloDetalhePage() {
   const fornecedor = getPessoaById(titulo.fornecedorId);
   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 auditEvents = logsAuditoria
     .filter(
@@ -113,64 +142,181 @@ export default function TituloDetalhePage() {
       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-payable/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">
-        <Button variant="ghost" size="icon" asChild>
-          <Link href="/finance/accounts-payable/installments">
-            <ArrowLeft className="h-4 w-4" />
-          </Link>
-        </Button>
-        <PageHeader
-          title={titulo.documento}
-          description={titulo.descricao}
-          breadcrumbs={[
-            { label: t('breadcrumbs.home'), href: '/' },
-            { label: t('breadcrumbs.finance'), href: '/finance' },
-            {
-              label: t('breadcrumbs.payables'),
-              href: '/finance/accounts-payable/installments',
-            },
-            { label: titulo.documento },
-          ]}
-          actions={
-            <div className="flex items-center gap-2">
-              <StatusBadge status={titulo.status} />
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline">
-                    <MoreHorizontal className="mr-2 h-4 w-4" />
-                    {t('actions.title')}
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem>
-                    <Edit className="mr-2 h-4 w-4" />
-                    {t('actions.edit')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CheckCircle className="mr-2 h-4 w-4" />
-                    {t('actions.approve')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Download className="mr-2 h-4 w-4" />
-                    {t('actions.settle')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Undo className="mr-2 h-4 w-4" />
-                    {t('actions.reverse')}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-destructive">
-                    <XCircle className="mr-2 h-4 w-4" />
-                    {t('actions.cancel')}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          }
-        />
-      </div>
+      <PageHeader
+        title={titulo.documento}
+        description={titulo.descricao}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.payables'),
+            href: '/finance/accounts-payable/installments',
+          },
+          { label: titulo.documento },
+        ]}
+        actions={
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline">
+                  <MoreHorizontal className="mr-2 h-4 w-4" />
+                  {t('actions.title')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Edit className="mr-2 h-4 w-4" />
+                  {t('actions.edit')}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CheckCircle className="mr-2 h-4 w-4" />
+                  {t('actions.approve')}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Download className="mr-2 h-4 w-4" />
+                  {t('actions.settle')}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Undo className="mr-2 h-4 w-4" />
+                  {t('actions.reverse')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive">
+                  <XCircle className="mr-2 h-4 w-4" />
+                  {t('actions.cancel')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        }
+      />
 
       <div className="grid gap-6 lg:grid-cols-3">
         <Card className="lg:col-span-2">
@@ -234,20 +380,44 @@ export default function TituloDetalhePage() {
                 <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>
@@ -260,16 +430,17 @@ export default function TituloDetalhePage() {
             <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>
                 ))}