@hed-hog/finance 0.0.224 → 0.0.225

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -12,7 +13,6 @@ import { FilterBar } from '@/components/ui/filter-bar';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
-import { PageHeader } from '@/components/ui/page-header';
 import {
   Select,
   SelectContent,
@@ -49,6 +49,7 @@ import {
   Undo,
   XCircle,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useState } from 'react';
 import { formatarData } from '../../_lib/formatters';
@@ -58,37 +59,37 @@ function NovoTituloSheet({
   pessoas,
   categorias,
   centrosCusto,
+  t,
 }: {
   pessoas: any[];
   categorias: any[];
   centrosCusto: any[];
+  t: ReturnType<typeof useTranslations>;
 }) {
   return (
     <Sheet>
       <SheetTrigger asChild>
         <Button>
           <Plus className="mr-2 h-4 w-4" />
-          Novo Título
+          {t('newTitle.action')}
         </Button>
       </SheetTrigger>
       <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
         <SheetHeader>
-          <SheetTitle>Novo Título a Pagar</SheetTitle>
-          <SheetDescription>
-            Preencha os dados para criar um novo título a pagar.
-          </SheetDescription>
+          <SheetTitle>{t('newTitle.title')}</SheetTitle>
+          <SheetDescription>{t('newTitle.description')}</SheetDescription>
         </SheetHeader>
         <form className="mt-6 space-y-4">
           <div className="grid gap-4">
             <div className="space-y-2">
-              <Label htmlFor="documento">Documento</Label>
+              <Label htmlFor="documento">{t('fields.document')}</Label>
               <Input id="documento" placeholder="NF-00000" />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="fornecedor">Fornecedor</Label>
+              <Label htmlFor="fornecedor">{t('fields.supplier')}</Label>
               <Select>
                 <SelectTrigger>
-                  <SelectValue placeholder="Selecione..." />
+                  <SelectValue placeholder={t('common.select')} />
                 </SelectTrigger>
                 <SelectContent>
                   {pessoas
@@ -105,23 +106,23 @@ function NovoTituloSheet({
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
-                <Label htmlFor="competencia">Competência</Label>
+                <Label htmlFor="competencia">{t('fields.competency')}</Label>
                 <Input id="competencia" type="month" />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="vencimento">Vencimento</Label>
+                <Label htmlFor="vencimento">{t('fields.dueDate')}</Label>
                 <Input id="vencimento" type="date" />
               </div>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="valor">Valor Total</Label>
+              <Label htmlFor="valor">{t('fields.totalValue')}</Label>
               <Input id="valor" type="number" placeholder="0,00" step="0.01" />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="categoria">Categoria</Label>
+              <Label htmlFor="categoria">{t('fields.category')}</Label>
               <Select>
                 <SelectTrigger>
-                  <SelectValue placeholder="Selecione..." />
+                  <SelectValue placeholder={t('common.select')} />
                 </SelectTrigger>
                 <SelectContent>
                   {categorias
@@ -135,10 +136,10 @@ function NovoTituloSheet({
               </Select>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="centroCusto">Centro de Custo</Label>
+              <Label htmlFor="centroCusto">{t('fields.costCenter')}</Label>
               <Select>
                 <SelectTrigger>
-                  <SelectValue placeholder="Selecione..." />
+                  <SelectValue placeholder={t('common.select')} />
                 </SelectTrigger>
                 <SelectContent>
                   {centrosCusto.map((c) => (
@@ -150,31 +151,44 @@ function NovoTituloSheet({
               </Select>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="metodo">Forma de Pagamento</Label>
+              <Label htmlFor="metodo">{t('fields.paymentMethod')}</Label>
               <Select>
                 <SelectTrigger>
-                  <SelectValue placeholder="Selecione..." />
+                  <SelectValue placeholder={t('common.select')} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="boleto">Boleto</SelectItem>
+                  <SelectItem value="boleto">
+                    {t('paymentMethods.boleto')}
+                  </SelectItem>
                   <SelectItem value="pix">PIX</SelectItem>
-                  <SelectItem value="transferencia">Transferência</SelectItem>
-                  <SelectItem value="cartao">Cartão</SelectItem>
-                  <SelectItem value="dinheiro">Dinheiro</SelectItem>
-                  <SelectItem value="cheque">Cheque</SelectItem>
+                  <SelectItem value="transferencia">
+                    {t('paymentMethods.transfer')}
+                  </SelectItem>
+                  <SelectItem value="cartao">
+                    {t('paymentMethods.card')}
+                  </SelectItem>
+                  <SelectItem value="dinheiro">
+                    {t('paymentMethods.cash')}
+                  </SelectItem>
+                  <SelectItem value="cheque">
+                    {t('paymentMethods.check')}
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="descricao">Descrição</Label>
-              <Textarea id="descricao" placeholder="Descrição do título..." />
+              <Label htmlFor="descricao">{t('fields.description')}</Label>
+              <Textarea
+                id="descricao"
+                placeholder={t('newTitle.descriptionPlaceholder')}
+              />
             </div>
           </div>
           <div className="flex justify-end gap-2 pt-4">
             <Button type="button" variant="outline">
-              Cancelar
+              {t('common.cancel')}
             </Button>
-            <Button type="submit">Salvar</Button>
+            <Button type="submit">{t('common.save')}</Button>
           </div>
         </form>
       </SheetContent>
@@ -183,6 +197,7 @@ function NovoTituloSheet({
 }
 
 export default function TitulosPagarPage() {
+  const t = useTranslations('finance.PayableInstallmentsPage');
   const { data } = useFinanceData();
   const { titulosPagar, pessoas, categorias, centrosCusto } = data;
 
@@ -205,42 +220,44 @@ export default function TitulosPagarPage() {
   });
 
   return (
-    <div className="space-y-6">
+    <Page>
       <PageHeader
-        title="Títulos a Pagar"
-        description="Gerencie suas contas a pagar"
+        title={t('header.title')}
+        description={t('header.description')}
         breadcrumbs={[
-          { label: 'Contas a Pagar', href: '/finance/accounts-payable/installments' },
-          { label: 'Títulos e Parcelas' },
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
         ]}
         actions={
           <NovoTituloSheet
             pessoas={pessoas}
             categorias={categorias}
             centrosCusto={centrosCusto}
+            t={t}
           />
         }
       />
 
       <FilterBar
-        searchPlaceholder="Buscar por documento ou fornecedor..."
+        searchPlaceholder={t('filters.searchPlaceholder')}
         searchValue={search}
         onSearchChange={setSearch}
         filters={[
           {
             id: 'status',
-            label: 'Status',
+            label: t('filters.status'),
             value: statusFilter,
             onChange: setStatusFilter,
             options: [
-              { value: 'all', label: 'Todos' },
-              { value: 'rascunho', label: 'Rascunho' },
-              { value: 'aprovado', label: 'Aprovado' },
-              { value: 'aberto', label: 'Aberto' },
-              { value: 'parcial', label: 'Parcial' },
-              { value: 'liquidado', label: 'Liquidado' },
-              { value: 'vencido', label: 'Vencido' },
-              { value: 'cancelado', label: 'Cancelado' },
+              { value: 'all', label: t('statuses.all') },
+              { value: 'rascunho', label: t('statuses.rascunho') },
+              { value: 'aprovado', label: t('statuses.aprovado') },
+              { value: 'aberto', label: t('statuses.aberto') },
+              { value: 'parcial', label: t('statuses.parcial') },
+              { value: 'liquidado', label: t('statuses.liquidado') },
+              { value: 'vencido', label: t('statuses.vencido') },
+              { value: 'cancelado', label: t('statuses.cancelado') },
             ],
           },
         ]}
@@ -252,13 +269,15 @@ export default function TitulosPagarPage() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Documento</TableHead>
-              <TableHead>Fornecedor</TableHead>
-              <TableHead>Competência</TableHead>
-              <TableHead>Vencimento</TableHead>
-              <TableHead className="text-right">Valor</TableHead>
-              <TableHead>Categoria</TableHead>
-              <TableHead>Status</TableHead>
+              <TableHead>{t('table.headers.document')}</TableHead>
+              <TableHead>{t('table.headers.supplier')}</TableHead>
+              <TableHead>{t('table.headers.competency')}</TableHead>
+              <TableHead>{t('table.headers.dueDate')}</TableHead>
+              <TableHead className="text-right">
+                {t('table.headers.value')}
+              </TableHead>
+              <TableHead>{t('table.headers.category')}</TableHead>
+              <TableHead>{t('table.headers.status')}</TableHead>
               <TableHead className="w-[50px]" />
             </TableRow>
           </TableHeader>
@@ -302,37 +321,41 @@ export default function TitulosPagarPage() {
                       <DropdownMenuTrigger asChild>
                         <Button variant="ghost" size="icon">
                           <MoreHorizontal className="h-4 w-4" />
-                          <span className="sr-only">Ações</span>
+                          <span className="sr-only">
+                            {t('table.actions.srActions')}
+                          </span>
                         </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end">
                         <DropdownMenuItem asChild>
-                          <Link href={`/finance/accounts-payable/installments/${titulo.id}`}>
+                          <Link
+                            href={`/finance/accounts-payable/installments/${titulo.id}`}
+                          >
                             <Eye className="mr-2 h-4 w-4" />
-                            Ver Detalhes
+                            {t('table.actions.viewDetails')}
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem>
                           <Edit className="mr-2 h-4 w-4" />
-                          Editar
+                          {t('table.actions.edit')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem>
                           <CheckCircle className="mr-2 h-4 w-4" />
-                          Aprovar
+                          {t('table.actions.approve')}
                         </DropdownMenuItem>
                         <DropdownMenuItem>
                           <Download className="mr-2 h-4 w-4" />
-                          Baixar
+                          {t('table.actions.settle')}
                         </DropdownMenuItem>
                         <DropdownMenuItem>
                           <Undo className="mr-2 h-4 w-4" />
-                          Estornar
+                          {t('table.actions.reverse')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem className="text-destructive">
                           <XCircle className="mr-2 h-4 w-4" />
-                          Cancelar
+                          {t('table.actions.cancel')}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -346,19 +369,20 @@ export default function TitulosPagarPage() {
 
       <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
-          Mostrando {filteredTitulos.length} de {titulosPagar.length} registros
+          {t('footer.showing', {
+            filtered: filteredTitulos.length,
+            total: titulosPagar.length,
+          })}
         </p>
         <div className="flex items-center gap-2">
           <Button variant="outline" size="sm" disabled>
-            Anterior
+            {t('footer.previous')}
           </Button>
           <Button variant="outline" size="sm" disabled>
-            Próximo
+            {t('footer.next')}
           </Button>
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
-
-