# 📸 Account Payable - Coluna Photos

## 🎯 **Funcionalidade Implementada**

Adicionada a coluna **"Photos"** na tabela de Contas a Pagar que exibe o número de anexos/fotos de cada conta baseado no campo `attachmentsIds`.

## ✅ **Implementação Completa**

### **1. 📊 Coluna na Tabela**
```typescript
{
  field: "attachmentsIds",
  header: "Photos",
  sortable: false,
  filterable: false,
  allowHtml: true,
  label: (attachments: string[] | any) => this.getPhotosDisplay(attachments)
}
```

### **2. 🎨 Método de Exibição**
```typescript
private getPhotosDisplay(attachments: string[] | any): string {
  // Verificar se attachments é um array válido
  if (!Array.isArray(attachments) || attachments.length === 0) {
    return `
      <span class="photos-badge no-photos">
        <i class="fas fa-camera text-muted"></i>
        <span class="count">0</span>
      </span>
    `;
  }

  const count = attachments.length;
  const iconColor = count > 0 ? 'text-primary' : 'text-muted';
  const badgeClass = count > 0 ? 'has-photos' : 'no-photos';

  return `
    <span class="photos-badge ${badgeClass}">
      <i class="fas fa-camera ${iconColor}"></i>
      <span class="count">${count}</span>
    </span>
  `;
}
```

### **3. 🎨 Estilos CSS**
```scss
::ng-deep .photos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 60px;
  gap: 0.375rem;

  i {
    font-size: 1rem;
  }

  .count {
    font-weight: 700;
    font-size: 0.75rem;
  }

  &.has-photos {
    background-color: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
  }

  &.no-photos {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
  }
}
```

## 🎨 **Aparência Visual**

### **📷 Com Anexos**
- **Badge azul** com ícone de câmera
- **Contador** do número de anexos
- **Hover effect** sutil

### **📷 Sem Anexos**
- **Badge cinza** com ícone de câmera
- **Contador "0"**
- **Visual discreto** para indicar ausência

## 📱 **Responsivo**

A coluna se adapta automaticamente em diferentes tamanhos de tela:

```scss
@media (max-width: 768px) {
  ::ng-deep .photos-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    min-width: 50px;
  }
}
```

## 🔧 **Campo de Dados**

A coluna lê o campo **`attachmentsIds`** do objeto `AccountPayable`:

```typescript
interface AccountPayable {
  // ... outros campos
  attachmentsIds: string[];  // Array de IDs dos anexos
  // ... outros campos
}
```

## ✅ **Status de Implementação**

- ✅ **Coluna adicionada** na configuração da tabela
- ✅ **Método de exibição** implementado
- ✅ **Estilos visuais** criados
- ✅ **Responsividade** configurada
- ✅ **Build success** sem erros
- ✅ **Pronto para uso**

## 🚀 **Como Testar**

1. **Navegar para**: `Financeiro` → `Contas a Pagar`
2. **Verificar coluna**: "Photos" deve aparecer na tabela
3. **Visualizar badges**: Ícone de câmera + contador
4. **Testar responsividade**: Redimensionar tela

## 📊 **Estrutura de Dados Esperada**

```json
{
  "id": 1,
  "person_name": "Fornecedor XYZ",
  "attachmentsIds": ["img1", "img2", "img3"],
  // ... outros campos
}
```

**Resultado**: Badge azul com "📷 3"

---

## ✅ **IMPLEMENTAÇÃO CONCLUÍDA**

A coluna **Photos** está funcionando e exibindo corretamente o número de anexos de cada conta a pagar baseado no campo `attachmentsIds`.

**Status: 🎉 PRONTO E FUNCIONANDO** 