saas_app/src/packages/servicos/components/TServicoItemPedido/TServicoItemPedidoFormTable.tsx

'use client';

import { Minus, Plus } from 'lucide-react';
import React, { memo } from 'react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@/components/ui/table';
import TPessoaTableFormSubview from '@/packages/administrativo/components/TPessoa/TPessoaTableFormSubview';
import TServicoItemPedidoFormTableInterface from '@/packages/servicos/interfaces/TServicoItemPedido/TServicoItemPedidoFormTableInterface';
import GetCapitalize from '@/shared/actions/text/GetCapitalize';

function TServicoItemPedidoFormTableComponent({
  data,
  form,
  params
}: TServicoItemPedidoFormTableInterface) {
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>
              Serviço / Tabela
            </TableHead>
            <TableHead>
              Emolumento
            </TableHead>
            <TableHead>
              Tx. Judiciária
            </TableHead>
            <TableHead>
              Fundesp 21%
            </TableHead>
            <TableHead>
              ISS 5%
            </TableHead>
            <TableHead>
              Total
            </TableHead>
            <TableHead className="text-center">Qtd.</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data?.length ? (
            data.map((item, index) => {
              return (
                <React.Fragment key={`fragment-${index}`}>
                  {/* Linha principal */}
                  <TableRow key={`row-${index}`} className="cursor-pointer hover:bg-gray-50">
                    <TableCell>
                      <div className="flex items-center gap-3">
                        <div>
                          <div className="font-semibold text-gray-900 capitalize">
                            {GetCapitalize(item.descricao)}
                          </div>
                          <div className="text-sm text-gray-500">
                            {GetCapitalize(item.tabela)}
                          </div>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>R$ {item.emolumento ?? '---'}</TableCell>
                    <TableCell>R$ {item.taxa_judiciaria ?? '---'}</TableCell>
                    <TableCell>R$ {item.fundesp ?? '---'}</TableCell>
                    <TableCell>R$ {item.valor_iss ?? '---'}</TableCell>
                    <TableCell>R$ {item.valor ?? '---'}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1 justify-center">
                        <Button
                          type="button"
                          size="icon"
                          variant="outline"
                          className="bg-white border h-8 w-8 rounded-lg"
                        >
                          <Minus className="h-4 w-4" />
                        </Button>

                        <Input type="number" className="h-8 text-center px-1 w-12" />

                        <Button
                          type="button"
                          size="icon"
                          variant="outline"
                          className="bg-white border h-8 w-8 rounded-lg"
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                  {/* SubView */}
                  {item.subview && (
                    <TableRow className="bg-gray-50">
                      <TableCell colSpan={7} className="p-4">
                        <TPessoaTableFormSubview
                          item_index={item.index}
                          data={item.subview}
                          params={params}
                          form={form}
                        />
                      </TableCell>
                    </TableRow>
                  )}
                </React.Fragment>
              );
            })
          ) : (
            <TableRow>
              <TableCell colSpan={7} className="text-center py-4">
                Nenhum item encontrado.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

export const TServicoItemPedidoFormTable = memo(TServicoItemPedidoFormTableComponent);