# 🗑️ Guia de Uso - Sistema de Confirmação de Exclusão

## 📋 Visão Geral

Sistema completo de confirmação de exclusão implementado para uso em **todas as páginas** do sistema. Funciona como SweetAlert com duas modais: uma antes de deletar (com informações) e outra após deletar (confirmação de sucesso).

## ✅ Arquivos Criados

1. ✅ `frontend/src/utils/confirmDelete.js` - Utilitário JavaScript puro
2. ✅ `frontend/src/components/ConfirmDelete.vue` - Componente Vue reutilizável  
3. ✅ `frontend/src/composables/useConfirmDelete.js` - Composable Vue 3
4. ✅ `frontend/src/utils/useDeleteConfirmation.js` - Helper com SweetAlert opcional

## 🚀 Como Usar em Qualquer Página

### Exemplo Simples (Mais Fácil)

```javascript
import { useDeleteConfirmation } from '@/utils/useDeleteConfirmation';
import api from '@/services/api';

// Em qualquer método
async deleteUser(user) {
    await useDeleteConfirmation({
        item: user,
        itemName: `${user.first_name} ${user.last_name}`,
        endpoint: `/api/users/${user.id}`,
        refreshList: () => this.loadUsers()
    });
}
```

### Exemplo Completo

```javascript
async deleteUser(user) {
    await useDeleteConfirmation({
        item: user,
        itemName: `${user.first_name} ${user.last_name}`,
        deleteFn: async (item) => {
            const token = localStorage.getItem('token');
            const response = await api.delete(`/api/users/${item.id}`, {
                headers: { token }
            });
            return response.data;
        },
        onSuccess: (result) => {
            console.log('Item deletado:', result);
            this.loadUsers();
        },
        onError: (error) => {
            console.error('Erro:', error);
        },
        refreshList: () => this.loadUsers()
    });
}
```

## 📝 Exemplos por Tipo de Página

### ✅ Página de Usuários

```vue
<template>
    <button @click="deleteUser(user)">Deletar</button>
</template>

<script>
import { useDeleteConfirmation } from '@/utils/useDeleteConfirmation';
import api from '@/services/api';

export default {
    methods: {
        async deleteUser(user) {
            await useDeleteConfirmation({
                item: user,
                itemName: `${user.first_name} ${user.last_name}`,
                endpoint: `/api/users/${user.id}`,
                refreshList: () => this.loadUsers()
            });
        },
        async loadUsers() {
            // Carregar lista
        }
    }
};
</script>
```

### ✅ Página de Estabelecimentos

```vue
<script>
methods: {
    async deleteEstablishment(est) {
        await useDeleteConfirmation({
            item: est,
            itemName: est.name,
            endpoint: `/api/establishments/${est.id}`,
            refreshList: () => this.loadEstablishments()
        });
    }
}
</script>
```

### ✅ Página de Clientes

```vue
<script>
methods: {
    async deleteCustomer(customer) {
        await useDeleteConfirmation({
            item: customer,
            itemName: `${customer.firstname} ${customer.surname}`,
            endpoint: `/api/customers/${customer.customer_id}`,
            refreshList: () => this.loadCustomers()
        });
    }
}
</script>
```

### ✅ Página de Empréstimos

```vue
<script>
methods: {
    async deleteLoan(loan) {
        await useDeleteConfirmation({
            item: loan,
            itemName: `Empréstimo #${loan.loan_id}`,
            endpoint: `/api/loans/${loan.loan_id}`,
            refreshList: () => this.loadLoans()
        });
    }
}
</script>
```

## 🎨 Personalização

### Mensagens Customizadas

```javascript
await useDeleteConfirmation({
    item: user,
    title: 'Excluir Usuário?',
    message: 'Tem certeza que deseja excluir este usuário?',
    confirmText: 'Sim, Excluir',
    cancelText: 'Não, Cancelar',
    successTitle: 'Usuário Removido!',
    successMessage: 'O usuário foi excluído permanentemente.',
    endpoint: `/api/users/${user.id}`,
    refreshList: () => this.loadUsers()
});
```

## 📦 Opções Disponíveis

| Parâmetro | Tipo | Obrigatório | Descrição |
|-----------|------|-------------|-----------|
| `item` | Object | ✅ Sim | Item a ser deletado |
| `itemName` | String | ❌ Não | Nome do item (auto-detectado se não fornecido) |
| `deleteFn` | Function | ⚠️ Um deles | Função async que executa delete |
| `endpoint` | String | ⚠️ Um deles | Endpoint da API para deletar |
| `refreshList` | Function | ❌ Não | Função para recarregar lista |
| `onSuccess` | Function | ❌ Não | Callback após sucesso |
| `onError` | Function | ❌ Não | Callback após erro |
| `title` | String | ❌ Não | Título do modal (padrão: "Confirmar Exclusão") |
| `message` | String | ❌ Não | Mensagem (padrão: "Tem certeza...") |
| `successTitle` | String | ❌ Não | Título de sucesso |
| `successMessage` | String | ❌ Não | Mensagem de sucesso |

## ✅ Benefícios

1. ✅ **Reutilizável** - Mesmo código em todas as páginas
2. ✅ **Consistente** - UX uniforme
3. ✅ **Fácil de usar** - Apenas 1 função
4. ✅ **Flexível** - Aceita função ou endpoint
5. ✅ **Automático** - Detecta nome do item automaticamente
6. ✅ **Completo** - Modal antes + modal após

## 🔄 Fluxo Completo

```
1. Usuário clica "Deletar"
   ↓
2. Modal de Confirmação (com informações do item)
   ↓
3. Usuário confirma ou cancela
   ↓
4a. Se cancelar: modal fecha
4b. Se confirmar: executa delete
   ↓
5. Modal de Sucesso (confirma exclusão)
   ↓
6. Lista recarregada automaticamente
```

## 🎯 Implementação Rápida

Para qualquer página, adicione:

```javascript
// 1. Importar
import { useDeleteConfirmation } from '@/utils/useDeleteConfirmation';

// 2. Usar no método de delete
async deleteItem(item) {
    await useDeleteConfirmation({
        item: item,
        endpoint: `/api/[resource]/${item.id}`,
        refreshList: () => this.loadItems()
    });
}
```

**Pronto! Sistema funciona em todas as páginas!** 🎉