Compare commits
3 Commits
624b6a7268
...
c9c28e68c7
| Author | SHA1 | Date |
|---|---|---|
Eder Moraes
|
c9c28e68c7 | |
|
Eder Moraes
|
d12f38fbaf | |
|
Eder Moraes
|
99b34b2871 |
95
index.html
95
index.html
|
|
@ -7,7 +7,7 @@
|
|||
default-src 'self';
|
||||
script-src 'self' 'unsafe-inline';
|
||||
style-src 'self' 'unsafe-inline';
|
||||
connect-src 'self' ws://localhost:3000 http://localhost:3000;
|
||||
connect-src 'self' ws://localhost:3000 http://localhost:3000 ws://autoatends.linco.work wss://autoatends.linco.work;
|
||||
">
|
||||
<title>Tela de Atendimento</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
|
@ -15,34 +15,91 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- TELA PRINCIPAL: Lista de fila + Card do chamado atual -->
|
||||
<div id="list-view">
|
||||
<h1>Fila</h1>
|
||||
<h3><span id="queue-number"></span></h3>
|
||||
<ul id="item-list">
|
||||
<!-- Itens serão carregados aqui -->
|
||||
</ul>
|
||||
<button id="next-button" disabled>
|
||||
<span id="counter-start"></span>
|
||||
Iniciar atendimento
|
||||
</button>
|
||||
<!-- <button id="sendto-button" disabled>Encaminhar</button> -->
|
||||
<button id="logout-button">Trocar Colaborador</button>
|
||||
<div class="attendance-layout">
|
||||
<!-- Lado esquerdo: tabela da fila -->
|
||||
<div class="queue-panel">
|
||||
<div class="panel-header">
|
||||
<h2>Fila de Espera</h2>
|
||||
<span id="queue-count" class="queue-badge">0</span>
|
||||
</div>
|
||||
<div class="queue-table-wrapper">
|
||||
<table class="queue-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SENHA</th>
|
||||
<th>CLIENTE</th>
|
||||
<th>SERVIÇO</th>
|
||||
<th>TIPO</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="queue-table-body">
|
||||
<!-- Linhas da fila -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="queue-empty" class="queue-empty" style="display:none;">
|
||||
<span class="empty-icon">📋</span>
|
||||
<p>Nenhum cliente aguardando</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lado direito: card do atendimento atual -->
|
||||
<div class="current-card-panel">
|
||||
<div id="current-card" class="current-card" style="display:none;">
|
||||
<div class="card-header">
|
||||
<span id="card-ticket" class="card-ticket">---</span>
|
||||
<span id="card-status-badge" class="card-badge badge-chamado">Chamado</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p id="card-client-name" class="card-client-name">---</p>
|
||||
<p id="card-service" class="card-service">---</p>
|
||||
<p id="card-type" class="card-type"></p>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button id="recall-button" class="btn-recall" disabled>RECHAMAR</button>
|
||||
<button id="next-button" class="btn-start" disabled>
|
||||
<span id="counter-start"></span>
|
||||
INICIAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="no-current" class="no-current-card">
|
||||
<span class="empty-icon">✅</span>
|
||||
<p>Nenhum atendimento chamado</p>
|
||||
<small>Clique no botão flutuante para chamar o próximo</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-bar">
|
||||
<button id="logout-button" class="btn-logout">Trocar Colaborador</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TELA DE OBSERVAÇÕES (atendimento em andamento) -->
|
||||
<div id="obs-view" style="display: none;">
|
||||
<h1>Observações</h1>
|
||||
<p>Atendendo: <span id="selected-item-name"></span></p>
|
||||
<input type="hidden" name="idAtend" id="idAtend">
|
||||
<textarea id="observation-text" rows="10" cols="50" placeholder="Digite suas observações..."></textarea>
|
||||
<button id="save-button">Finalizar atendimento</button>
|
||||
<div class="obs-layout">
|
||||
<div class="obs-header">
|
||||
<h2>Atendimento em Andamento</h2>
|
||||
<div class="obs-client-info">
|
||||
<span id="selected-item-name" class="obs-client-name"></span>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="idAtend" id="idAtend">
|
||||
<textarea id="observation-text" rows="10" placeholder="Digite suas observações sobre o atendimento..."></textarea>
|
||||
<div class="obs-actions">
|
||||
<button id="save-button" class="btn-finish">Finalizar atendimento</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="encaminhar-view" style="display: none;">
|
||||
<h1>Observações</h1>
|
||||
<p>Atendendo: <span id="selected-item-name"></span></p>
|
||||
<p>Atendendo: <span id="enc-selected-item-name"></span></p>
|
||||
<textarea id="enc-observation-text" rows="10" cols="50" placeholder="Digite suas observações..."></textarea>
|
||||
<button id="save-button">Salvar</button>
|
||||
<button id="enc-save-button">Salvar</button>
|
||||
</div>
|
||||
|
||||
<script src="res/js/socket.io.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,14 @@
|
|||
//o campo username deve ser formatado como cpf ou cnpj
|
||||
function formatarCampoCPFCNPJ() {
|
||||
var campo = document.getElementById('username');
|
||||
var valor = campo.value.replace(/\D/g, ''); // Remove todos os caracteres não numéricos
|
||||
var valor = campo.value.replace(/[^a-zA-Z0-9]/g, ''); // Remove apenas o que não for alfanumérico
|
||||
|
||||
if (valor.length <= 11) {
|
||||
// Formata como CPF
|
||||
valor = valor.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
|
||||
valor = valor.replace(/([a-zA-Z0-9]{3})([a-zA-Z0-9]{3})([a-zA-Z0-9]{3})([a-zA-Z0-9]{2})/, '$1.$2.$3-$4');
|
||||
} else {
|
||||
// Formata como CNPJ
|
||||
valor = valor.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5');
|
||||
valor = valor.replace(/([a-zA-Z0-9]{2})([a-zA-Z0-9]{3})([a-zA-Z0-9]{3})([a-zA-Z0-9]{4})([a-zA-Z0-9]{2})/, '$1.$2.$3/$4-$5');
|
||||
}
|
||||
campo.value = valor;
|
||||
}
|
||||
|
|
|
|||
338
main.js
338
main.js
|
|
@ -15,10 +15,10 @@ let updateWin;
|
|||
const dataPath = path.join(__dirname, 'data.json'); // Caminho para o JSON (backup local)
|
||||
const settingsPath = path.join(app.getPath('userData'), 'settings.json'); // Caminho para as configurações
|
||||
|
||||
//! API
|
||||
const apiUrl = 'http://localhost:3000/api/'; // Adaptado para NestJS
|
||||
//! api
|
||||
const apiUrl = 'https://aapi.linco.work/';
|
||||
//! pusher
|
||||
const pusherUrl = 'http://localhost:3000'; // Agora aponta para o Socket.io (NestJS)
|
||||
const pusherUrl = apiUrl;
|
||||
|
||||
autoUpdater.autoDownload = false;
|
||||
autoUpdater.autoInstallOnAppQuit = true;
|
||||
|
|
@ -100,7 +100,7 @@ async function fetchDataFromAPI() {
|
|||
//! as outras é o websockt que solicita a chamada de requisições em busca de alterações
|
||||
const updData = setInterval(() => {
|
||||
getDataAndUpdateFloatingBtn();
|
||||
}, 3000);
|
||||
}, 30000);
|
||||
|
||||
const updVersion = setTimeout(() => {
|
||||
if (pjson.isBuildNow) {
|
||||
|
|
@ -110,68 +110,80 @@ async function fetchDataFromAPI() {
|
|||
}
|
||||
|
||||
async function getFirstData() {
|
||||
|
||||
const token = await getAuthToken();
|
||||
const colabId = await floatingWin.webContents.executeJavaScript("localStorage.getItem('idOperator')")
|
||||
const tenantId = await floatingWin.webContents.executeJavaScript("localStorage.getItem('tenantId')")
|
||||
const colabId = await getSelectedOperatorId();
|
||||
const tenantId = await getTenantId();
|
||||
const url = apiUrl + 'attendance/next-in-line/' + colabId;
|
||||
|
||||
//! checa se o token e o colabId existem
|
||||
if (!token && !colabId) { console.warn("Token or colabId not found in localStorage. API requests will not be made."); return; }
|
||||
if (!token || !colabId) {
|
||||
console.warn("Token or colabId not found. Skipping API request.");
|
||||
return [];
|
||||
}
|
||||
|
||||
//! faz o request
|
||||
const request = net.request({
|
||||
method: 'GET',
|
||||
url: url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'x-tenant-id': tenantId
|
||||
}
|
||||
});
|
||||
|
||||
//! busca pela resposta
|
||||
request.on('response', (response) => {
|
||||
let rawData = '';
|
||||
response.on('data', (chunk) => { rawData += chunk; });
|
||||
response.on('end', () => {
|
||||
try {
|
||||
const parsedData = JSON.parse(rawData);
|
||||
let proximos = Array.isArray(parsedData) ? parsedData : [];
|
||||
if (response.statusCode === 200) {
|
||||
floatingWin.webContents.executeJavaScript("localStorage.setItem('proximos','" + JSON.stringify(proximos) + "')");
|
||||
let count = proximos.length;
|
||||
floatingWin.webContents.send('update-count', count);
|
||||
} else {
|
||||
console.error(`Erro na requisição: Status code ${response.statusCode}`, parsedData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro ao analisar a resposta JSON:", error);
|
||||
mainWin.webContents.send('api-error', {
|
||||
message: `Erro ao processar resposta do servidor.`
|
||||
});
|
||||
return new Promise((resolve) => {
|
||||
const request = net.request({
|
||||
method: 'GET',
|
||||
url: url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'x-tenant-id': tenantId
|
||||
}
|
||||
});
|
||||
});
|
||||
request.on('error', (error) => {
|
||||
console.error("Erro na requisição:", error);
|
||||
});
|
||||
|
||||
request.end();
|
||||
request.on('response', (response) => {
|
||||
let rawData = '';
|
||||
response.on('data', (chunk) => { rawData += chunk; });
|
||||
response.on('end', async () => {
|
||||
try {
|
||||
const parsedData = JSON.parse(rawData);
|
||||
let proximos = Array.isArray(parsedData) ? parsedData : [];
|
||||
|
||||
return JSON.parse(await floatingWin.webContents.executeJavaScript("localStorage.getItem('proximos')"));
|
||||
if (response.statusCode === 200) {
|
||||
const proximosStr = JSON.stringify(proximos);
|
||||
|
||||
// Sincroniza o localStorage de todas as janelas importantes
|
||||
const updateStorageScript = `localStorage.setItem('proximos', ${JSON.stringify(proximosStr)})`;
|
||||
|
||||
if (floatingWin && !floatingWin.isDestroyed()) {
|
||||
floatingWin.webContents.executeJavaScript(updateStorageScript);
|
||||
floatingWin.webContents.send('update-count', proximos.length);
|
||||
}
|
||||
|
||||
// SÓ atualiza a janela principal se NÃO houver atendimento em andamento
|
||||
floatingWin.webContents.executeJavaScript("localStorage.getItem('atendimentoAtual')").then(atendimentoAtualId => {
|
||||
if (!atendimentoAtualId && mainWin && !mainWin.isDestroyed()) {
|
||||
mainWin.webContents.executeJavaScript(updateStorageScript);
|
||||
mainWin.webContents.send('load-data', proximos);
|
||||
}
|
||||
resolve(proximos);
|
||||
}).catch(err => {
|
||||
console.error("Erro ao verificar atendimento atual:", err);
|
||||
resolve(proximos);
|
||||
});
|
||||
} else {
|
||||
console.error(`Erro API: ${response.statusCode}`);
|
||||
resolve([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro JSON:", error);
|
||||
resolve([]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
request.on('error', (error) => {
|
||||
console.error("Erro rede:", error);
|
||||
resolve([]);
|
||||
});
|
||||
|
||||
request.end();
|
||||
});
|
||||
}
|
||||
|
||||
// Função para coletar a lista de atendimentos do servidor, vai ser chamada uma vez e a cada 30s
|
||||
// Atualiza a função de monitoramento para realmente buscar dados a cada 30s (ou o que desejar)
|
||||
async function getDataAndUpdateFloatingBtn() {
|
||||
|
||||
const stored = await floatingWin.webContents.executeJavaScript("localStorage.getItem('proximos')");
|
||||
const proximos = JSON.parse(stored || '[]');
|
||||
let count = proximos.length;
|
||||
|
||||
//lista a contagem no botão flutuante
|
||||
floatingWin.webContents.send('update-count', count);
|
||||
|
||||
await getFirstData();
|
||||
}
|
||||
|
||||
// Função para verificar se o token existe no localStorage
|
||||
|
|
@ -199,6 +211,29 @@ async function getAuthToken() {
|
|||
});
|
||||
}
|
||||
|
||||
// Função para verificar o tenantId no localStorage
|
||||
async function getTenantId() {
|
||||
const checkWindow = async (win) => {
|
||||
if (win && !win.isDestroyed()) {
|
||||
try {
|
||||
const val = await win.webContents.executeJavaScript('localStorage.getItem("tenantId");');
|
||||
return (val && val !== 'null' && val !== 'undefined') ? val : null;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Prioridade para janelas visíveis
|
||||
let id = await checkWindow(operatorWin);
|
||||
if (!id) id = await checkWindow(mainWin);
|
||||
if (!id) id = await checkWindow(floatingWin);
|
||||
if (!id) id = await checkWindow(loginWin);
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
// Função para criar a janela de login
|
||||
function createLoginWindow() {
|
||||
loginWin = new BrowserWindow({
|
||||
|
|
@ -480,9 +515,12 @@ async function getSelectedOperatorId() {
|
|||
}
|
||||
|
||||
ipcMain.handle('get-pusher-config', async () => {
|
||||
// Obtenha sua chave e host de forma segura aqui (ambiente, .env, etc.)
|
||||
const PUSHER_HOST = process.env.PUSHER_HOST || pusherUrl;
|
||||
return { host: PUSHER_HOST };
|
||||
// Garante que o host não termine com barra para o Socket.io
|
||||
let host = pusherUrl;
|
||||
if (host && host.endsWith('/')) {
|
||||
host = host.slice(0, -1);
|
||||
}
|
||||
return { host: host };
|
||||
});
|
||||
|
||||
ipcMain.on('update_version', async (event, arg) => {
|
||||
|
|
@ -509,8 +547,13 @@ ipcMain.handle('get-count', async () => {
|
|||
return data.length;
|
||||
});
|
||||
|
||||
let isCallingNext = false;
|
||||
|
||||
// Ouvir pedido para mostrar a janela principal
|
||||
ipcMain.on('chamar-fila', async () => {
|
||||
// Evita múltiplas chamadas simultâneas
|
||||
if (isCallingNext) return;
|
||||
isCallingNext = true;
|
||||
|
||||
// Primeiro, verifica se já existe um atendimento em andamento
|
||||
const atendimentoAtualId = await floatingWin.webContents.executeJavaScript("localStorage.getItem('atendimentoAtual')");
|
||||
|
|
@ -533,24 +576,16 @@ ipcMain.on('chamar-fila', async () => {
|
|||
}
|
||||
|
||||
// Se um atendimento já estiver em andamento, apenas mostra a janela principal.
|
||||
// A lógica em renderer.js cuidará de exibir a tela de observação.
|
||||
if (atendimentoAtualId) {
|
||||
showMainWindow();
|
||||
return; // Interrompe a execução aqui
|
||||
}
|
||||
|
||||
// Se não houver atendimento em andamento, continua com a lógica original.
|
||||
const countFila = async () => {
|
||||
const stored = await floatingWin.webContents.executeJavaScript("localStorage.getItem('proximos')");
|
||||
const proximos = JSON.parse(stored || '[]');
|
||||
return proximos.length;
|
||||
isCallingNext = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const requestData = async () => {
|
||||
|
||||
const colabId = await getSelectedOperatorId();
|
||||
const token = await getAuthToken();
|
||||
const tenantId = await floatingWin.webContents.executeJavaScript("localStorage.getItem('tenantId')")
|
||||
const tenantId = await getTenantId();
|
||||
const url = apiUrl + 'attendance/call-next/' + colabId;
|
||||
|
||||
const request = net.request({
|
||||
|
|
@ -565,36 +600,33 @@ ipcMain.on('chamar-fila', async () => {
|
|||
|
||||
request.on('response', (response) => {
|
||||
let rawData = '';
|
||||
|
||||
response.on('data', (chunk) => {
|
||||
rawData += chunk;
|
||||
});
|
||||
|
||||
response.on('data', (chunk) => { rawData += chunk; });
|
||||
response.on('end', () => {
|
||||
isCallingNext = false;
|
||||
try {
|
||||
const parsedData = JSON.parse(rawData);
|
||||
if (response.statusCode === 201 || response.statusCode === 200) {
|
||||
if (parsedData) {
|
||||
mainWin.webContents.send('select-atend-id', parsedData);
|
||||
if (parsedData.status === 'Fila' || parsedData.status === 'Chamado') { showMainWindow(); } else
|
||||
if (parsedData.status === 'Atendendo') {
|
||||
let options2 = {
|
||||
'title': 'Precisa finalizar antes de chamar o próximo.',
|
||||
'message': 'Em andamento',
|
||||
'detail': 'Já possui um atendimento em andamento (Atendendo: ' + parsedData.clientName + '), continue e finalize por favor!',
|
||||
'type': 'error',
|
||||
'noLink': true,
|
||||
'buttons': ['Depois', 'Continuar'],
|
||||
if (parsedData.status === 'Fila' || parsedData.status === 'Chamado') {
|
||||
showMainWindow();
|
||||
} else if (parsedData.status === 'Atendendo') {
|
||||
let options2 = {
|
||||
'title': 'Precisa finalizar antes de chamar o próximo.',
|
||||
'message': 'Em andamento',
|
||||
'detail': 'Já possui um atendimento em andamento (Atendendo: ' + parsedData.clientName + '), continue e finalize por favor!',
|
||||
'type': 'error',
|
||||
'buttons': ['Depois', 'Continuar'],
|
||||
};
|
||||
dialog.showMessageBox(floatingWin, options2).then(result => {
|
||||
if (result.response) {
|
||||
mainWin.webContents.send('show-observation');
|
||||
showMainWindow();
|
||||
} else {
|
||||
mainWin.hide();
|
||||
};
|
||||
dialog.showMessageBox(floatingWin, options2).then(result => {
|
||||
if (result.response) {
|
||||
mainWin.webContents.send('show-observation');
|
||||
showMainWindow();
|
||||
} else {
|
||||
mainWin.hide();
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
mainWin.webContents.send('select-atend-id', null);
|
||||
}
|
||||
|
|
@ -614,6 +646,7 @@ ipcMain.on('chamar-fila', async () => {
|
|||
});
|
||||
|
||||
request.on('error', (error) => {
|
||||
isCallingNext = false;
|
||||
console.error("Erro na requisição:", error);
|
||||
mainWin.webContents.send('api-error', {
|
||||
message: `Erro ao chamar atendimento: ${error.message}`
|
||||
|
|
@ -623,7 +656,11 @@ ipcMain.on('chamar-fila', async () => {
|
|||
request.end();
|
||||
};
|
||||
|
||||
|
||||
const countFilaValue = async () => {
|
||||
const stored = await floatingWin.webContents.executeJavaScript("localStorage.getItem('proximos')");
|
||||
const proximos = JSON.parse(stored || '[]');
|
||||
return proximos.length;
|
||||
}
|
||||
|
||||
let options = {
|
||||
'title': 'Incie o atendimento quando o cliente chegar na sala.',
|
||||
|
|
@ -633,17 +670,20 @@ ipcMain.on('chamar-fila', async () => {
|
|||
'buttons': ['Não', 'Sim'],
|
||||
};
|
||||
|
||||
|
||||
if (await countFila()) {
|
||||
const count = await countFilaValue();
|
||||
if (count > 0) {
|
||||
dialog.showMessageBox(floatingWin, options).then(result => {
|
||||
if (result.response) {
|
||||
if (result.response === 1) { // 1 é 'Sim'
|
||||
requestData();
|
||||
};
|
||||
} else {
|
||||
isCallingNext = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
requestData();
|
||||
// Se a fila estiver vazia, apenas abre a janela principal para visualização
|
||||
showMainWindow();
|
||||
isCallingNext = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Ouve um pedido da janela flutuante para forçar a atualização da contagem
|
||||
|
|
@ -664,7 +704,7 @@ ipcMain.on('select-atend-id', (itemId) => {
|
|||
ipcMain.on('iniciar-atendimento', async (event, itemId) => {
|
||||
|
||||
const token = await getAuthToken();
|
||||
const tenantId = await floatingWin.webContents.executeJavaScript("localStorage.getItem('tenantId')")
|
||||
const tenantId = await getTenantId();
|
||||
const url = apiUrl + 'attendance/' + itemId + '/start';
|
||||
|
||||
// envio de uma solicitação POST com o ID do item
|
||||
|
|
@ -693,6 +733,39 @@ ipcMain.on('iniciar-atendimento', async (event, itemId) => {
|
|||
request.end();
|
||||
});
|
||||
|
||||
// Ouvir clique no botão "Rechamar" - chama novamente o mesmo atendimento
|
||||
ipcMain.on('rechamar-atendimento', async (event, itemId) => {
|
||||
|
||||
const token = await getAuthToken();
|
||||
const tenantId = await getTenantId();
|
||||
const colabId = await getSelectedOperatorId();
|
||||
const url = apiUrl + 'attendance/call-next/' + colabId;
|
||||
|
||||
const request = net.request({
|
||||
method: 'POST',
|
||||
url: url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'x-tenant-id': tenantId
|
||||
}
|
||||
});
|
||||
|
||||
request.on('response', (response) => {
|
||||
response.on('data', (chunk) => {
|
||||
console.log(`Rechamar BODY: ${chunk}`);
|
||||
});
|
||||
response.on('end', () => {
|
||||
console.log('Rechamada concluída.');
|
||||
});
|
||||
});
|
||||
request.on('error', (error) => {
|
||||
console.error(`Erro na rechamada: ${error}`);
|
||||
});
|
||||
|
||||
request.end();
|
||||
});
|
||||
|
||||
// Ouve quando um atendimento é iniciado e notifica a janela flutuante
|
||||
ipcMain.on('atendimento-iniciado', (event, itemId) => {
|
||||
if (floatingWin) {
|
||||
|
|
@ -707,13 +780,20 @@ ipcMain.on('atendimento-finalizado', () => {
|
|||
}
|
||||
});
|
||||
|
||||
// Ouve atualização da fila vinda do renderer (via socket)
|
||||
ipcMain.on('update-queue', (event, data) => {
|
||||
// Sempre busca dados frescos da API quando o socket notifica mudança,
|
||||
// pois o socket pode enviar apenas o objeto da mudança e não a lista completa.
|
||||
getFirstData();
|
||||
});
|
||||
|
||||
// Ouvir clique no botão "Salvar"
|
||||
ipcMain.on('save-observation', async (event, { itemId, observation }) => {
|
||||
|
||||
console.log(`Salvando observação para item ${itemId}: ${observation}`);
|
||||
|
||||
const token = await getAuthToken();
|
||||
const tenantId = await floatingWin.webContents.executeJavaScript("localStorage.getItem('tenantId')")
|
||||
const tenantId = await getTenantId();
|
||||
const url = apiUrl + 'attendance/' + itemId + '/finish';
|
||||
|
||||
const fmData = JSON.stringify({
|
||||
|
|
@ -761,7 +841,6 @@ ipcMain.on('logout', () => {
|
|||
localStorage.removeItem("selectedOperator");
|
||||
localStorage.removeItem("salaOperator");
|
||||
localStorage.removeItem("servicosOperator");
|
||||
localStorage.removeItem("tenantId");
|
||||
`).then(() => {
|
||||
// Fecha a janela main e abre a janela de operador e inicia o aplicativo
|
||||
mainWin.hide();
|
||||
|
|
@ -796,10 +875,15 @@ ipcMain.on('login-attempt', async (event, credentials) => {
|
|||
const data = JSON.parse(responseData);
|
||||
|
||||
if (data.access_token) {
|
||||
// Tenta encontrar o tenantId em diferentes locais possíveis da resposta
|
||||
const tenantId = data.tenantId || (data.user && data.user.tenantId) || (data.user && data.user.tenant_id);
|
||||
|
||||
console.log(`Login bem-sucedido. Token presente. TenantId encontrado: ${tenantId}`);
|
||||
|
||||
// Login bem-sucedido
|
||||
loginWin.webContents.executeJavaScript(`
|
||||
localStorage.setItem("authToken", "${data.access_token}");
|
||||
localStorage.setItem("tenantId", "${data.user.tenantId}");
|
||||
localStorage.setItem("tenantId", "${tenantId || ''}");
|
||||
`).then(() => {
|
||||
// Fecha a janela de login e abre a de seleção de operador
|
||||
event.reply('login-response', { success: true });
|
||||
|
|
@ -830,8 +914,11 @@ ipcMain.on('login-attempt', async (event, credentials) => {
|
|||
});
|
||||
});
|
||||
|
||||
// Remove máscara do login (CPF/CNPJ) antes de enviar para a API
|
||||
const cleanLogin = credentials.login.replace(/[.\-\/]/g, '');
|
||||
|
||||
// Envia as credenciais
|
||||
request.write(JSON.stringify({ login: credentials.login, password: credentials.password }));
|
||||
request.write(JSON.stringify({ login: cleanLogin, password: credentials.password }));
|
||||
request.end();
|
||||
} catch (error) {
|
||||
event.reply('login-response', {
|
||||
|
|
@ -870,6 +957,9 @@ ipcMain.handle('get-operators', async () => {
|
|||
try {
|
||||
// Verifica se existe token de autenticação
|
||||
const token = await getAuthToken();
|
||||
const tenantId = await getTenantId();
|
||||
|
||||
console.log(`Buscando operadores - TenantId: ${tenantId}, Token presente: ${!!token}`);
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
|
|
@ -881,26 +971,44 @@ ipcMain.handle('get-operators', async () => {
|
|||
|
||||
const route = apiUrl + 'collaborators';
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise((resolve) => {
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
|
||||
// Garante que o tenantId é uma string válida e não "null" ou "undefined"
|
||||
if (tenantId && tenantId !== 'null' && tenantId !== 'undefined') {
|
||||
headers['x-tenant-id'] = tenantId;
|
||||
}
|
||||
|
||||
const request = net.request({
|
||||
method: 'GET',
|
||||
url: route,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
headers: headers
|
||||
});
|
||||
|
||||
let responseData = '';
|
||||
|
||||
request.on('response', (response) => {
|
||||
let body = '';
|
||||
response.on('data', (chunk) => {
|
||||
responseData += chunk.toString();
|
||||
body += chunk.toString();
|
||||
});
|
||||
|
||||
response.on('end', () => {
|
||||
if (response.statusCode !== 200) {
|
||||
console.error(`Erro na API (${response.statusCode}):`, body);
|
||||
resolve({
|
||||
success: false,
|
||||
message: `Erro ${response.statusCode}: ${body}`,
|
||||
operators: []
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = JSON.parse(responseData);
|
||||
const data = JSON.parse(body);
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
const operators = data.map(colab => ({
|
||||
|
|
@ -915,14 +1023,14 @@ ipcMain.handle('get-operators', async () => {
|
|||
operators: operators
|
||||
});
|
||||
} else {
|
||||
reject({
|
||||
resolve({
|
||||
success: false,
|
||||
message: 'Erro ao obter a lista de colaboradores',
|
||||
message: 'Resposta da API não é uma lista válida',
|
||||
operators: []
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
reject({
|
||||
resolve({
|
||||
success: false,
|
||||
message: 'Erro ao processar resposta do servidor',
|
||||
operators: []
|
||||
|
|
@ -932,7 +1040,7 @@ ipcMain.handle('get-operators', async () => {
|
|||
});
|
||||
|
||||
request.on('error', (error) => {
|
||||
reject({
|
||||
resolve({
|
||||
success: false,
|
||||
message: `Erro de conexão: ${error.message}`,
|
||||
operators: []
|
||||
|
|
|
|||
|
|
@ -14,10 +14,16 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||
//inicia o atendimento atual
|
||||
iniciaAtendimento: (itemId) => ipcRenderer.send('iniciar-atendimento', itemId),
|
||||
|
||||
//rechama o atendimento atual
|
||||
rechamarAtendimento: (itemId) => ipcRenderer.send('rechamar-atendimento', itemId),
|
||||
|
||||
//notifica sobre o status do atendimento
|
||||
atendimentoIniciado: (itemId) => ipcRenderer.send('atendimento-iniciado', itemId),
|
||||
atendimentoFinalizado: () => ipcRenderer.send('atendimento-finalizado'),
|
||||
|
||||
//notifica o main process sobre atualização na fila vinda do socket
|
||||
updateQueue: (data) => ipcRenderer.send('update-queue', data),
|
||||
|
||||
showObservation: (callback) => ipcRenderer.on('show-observation', (_event) => callback() ),
|
||||
//salva a observação do atendimento
|
||||
saveObservation: (data) => ipcRenderer.send('save-observation', data),
|
||||
|
|
|
|||
221
renderer.js
221
renderer.js
|
|
@ -1,14 +1,24 @@
|
|||
const listView = document.getElementById('list-view');
|
||||
const observationView = document.getElementById('obs-view');
|
||||
const encaminharView = document.getElementById('encaminhar-view');
|
||||
const itemList = document.getElementById('item-list');
|
||||
|
||||
// Novos elementos do layout redesenhado
|
||||
const queueTableBody = document.getElementById('queue-table-body');
|
||||
const queueEmpty = document.getElementById('queue-empty');
|
||||
const queueCount = document.getElementById('queue-count');
|
||||
const currentCard = document.getElementById('current-card');
|
||||
const noCurrentCard = document.getElementById('no-current');
|
||||
const cardTicket = document.getElementById('card-ticket');
|
||||
const cardStatusBadge = document.getElementById('card-status-badge');
|
||||
const cardClientName = document.getElementById('card-client-name');
|
||||
const cardService = document.getElementById('card-service');
|
||||
const cardType = document.getElementById('card-type');
|
||||
const nextButton = document.getElementById('next-button');
|
||||
const recallButton = document.getElementById('recall-button');
|
||||
const logoutButton = document.getElementById('logout-button');
|
||||
const observationText = document.getElementById('observation-text');
|
||||
const encObservationText = document.getElementById('enc-observation-text');
|
||||
const saveButton = document.getElementById('save-button');
|
||||
const selectedItemNameSpan = document.getElementById('selected-item-name');
|
||||
const queueNumber = document.getElementById('queue-number');
|
||||
const idAtend = document.getElementById('idAtend');
|
||||
const counterStart = document.getElementById('counter-start');
|
||||
|
||||
|
|
@ -16,13 +26,22 @@ let currentData = [];
|
|||
let selectedItemId = null;
|
||||
let selectedItemName = '';
|
||||
|
||||
// ===========================
|
||||
// FLAG que trava o ID do atendimento chamado.
|
||||
// Quando o call-next retorna e define o atendimento atual,
|
||||
// este flag impede que atualizações da fila sobrescrevam o selectedItemId.
|
||||
// ===========================
|
||||
let calledAtendimentoData = null; // Guarda os dados completos do atendimento chamado
|
||||
|
||||
window.electronAPI.onLoadData((data) => {
|
||||
nextButton.disabled = true;
|
||||
// Se já estiver em atendimento, ignora atualizações da lista para evitar flickering no botão
|
||||
if (localStorage.getItem('atendimentoAtual')) {
|
||||
return;
|
||||
}
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
// Reseta a view para a lista sempre que os dados são carregados
|
||||
populateList(data[0]);
|
||||
populateQueueTable(data);
|
||||
});
|
||||
|
||||
async function initializeSocket() {
|
||||
|
|
@ -51,9 +70,10 @@ async function initializeSocket() {
|
|||
|
||||
// Evento que substitui o bind do Pusher
|
||||
socket.on('queueUpdate', (data) => {
|
||||
console.log('Atualização de fila recebida:', data);
|
||||
localStorage.setItem('proximos', JSON.stringify(data));
|
||||
populateList(data);
|
||||
console.log('Notificação de fila recebida:', data);
|
||||
// Avisa o processo principal que houve mudança.
|
||||
// O main vai buscar a lista completa e atualizar todas as janelas.
|
||||
window.electronAPI.updateQueue();
|
||||
});
|
||||
|
||||
socket.on('error', (err) => {
|
||||
|
|
@ -71,20 +91,22 @@ initializeSocket();
|
|||
window.electronAPI.selectAtendID((data) => {
|
||||
nextButton.disabled = true;
|
||||
if (!data) {
|
||||
queueNumber.innerHTML = 'Ninguem aguardando atendimento, fechando a janela em alguns segundos...';
|
||||
showNoCurrentCard('Ninguém aguardando atendimento');
|
||||
return;
|
||||
}
|
||||
// Reseta a view para a lista sempre que os dados são carregados ao clicar no botão para abrir a janela
|
||||
populateList(data);
|
||||
showListView();
|
||||
|
||||
// Garante que o item selecionado (ID e Nome) seja o que veio da chamada, sobrescrevendo o da lista.
|
||||
// Trava os dados do atendimento chamado para que atualizações da fila
|
||||
// NÃO sobrescrevam quem foi chamado.
|
||||
calledAtendimentoData = data;
|
||||
selectedItemId = data._id ?? null;
|
||||
selectedItemName = data.clientName ?? '';
|
||||
|
||||
//data.senhaGen
|
||||
queueNumber.innerHTML = data ? `NA VEZ: <u>${data.clientName.toUpperCase()}</u>` : 'Ninguem aguardando atendimento';
|
||||
selectedItemNameSpan.innerHTML = data ? `<u> ${data.clientName.toUpperCase()} </u> <i style="float:right;">[ ${data.ticketNumber} ]</i>` : 'Ninguem aguardando atendimento';
|
||||
// Atualiza a tabela da fila (sem afetar o card atual)
|
||||
// populateQueueTable já NÃO mexe no selectedItemId quando calledAtendimentoData está travado
|
||||
showListView();
|
||||
|
||||
// Mostra o card do atendimento chamado
|
||||
showCurrentCard(data);
|
||||
});
|
||||
|
||||
window.electronAPI.showObservation(() => {
|
||||
|
|
@ -92,15 +114,29 @@ window.electronAPI.showObservation(() => {
|
|||
showObservationView(); // Muda para a tela de observação
|
||||
});
|
||||
|
||||
// Função para popular a lista de itens
|
||||
function populateList(proximos) {
|
||||
// Função para popular a tabela da fila
|
||||
function populateQueueTable(proximos) {
|
||||
const atendimentoEmAndamentoId = localStorage.getItem('atendimentoAtual');
|
||||
const atendimentoEmAndamentoNome = localStorage.getItem('atendimentoAtualNome');
|
||||
|
||||
if (atendimentoEmAndamentoId) {
|
||||
itemList.innerHTML = `<li>Atendimento com <strong>${(atendimentoEmAndamentoNome || '').toUpperCase()}</strong> em andamento.</li>`;
|
||||
queueNumber.innerHTML = `EM ATENDIMENTO: <u>${(atendimentoEmAndamentoNome || '').toUpperCase()}</u>`;
|
||||
// Em atendimento: mostra card de atendimento no painel direito
|
||||
queueTableBody.innerHTML = '';
|
||||
queueCount.textContent = '0';
|
||||
queueEmpty.style.display = 'flex';
|
||||
document.querySelector('.queue-table').style.display = 'none';
|
||||
|
||||
// Mostra card como "Atendendo"
|
||||
currentCard.style.display = 'flex';
|
||||
noCurrentCard.style.display = 'none';
|
||||
cardTicket.textContent = '';
|
||||
cardStatusBadge.textContent = 'Atendendo';
|
||||
cardStatusBadge.className = 'card-badge badge-atendendo';
|
||||
cardClientName.textContent = (atendimentoEmAndamentoNome || '').toUpperCase();
|
||||
cardService.textContent = '';
|
||||
cardType.textContent = '';
|
||||
nextButton.disabled = true;
|
||||
recallButton.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -110,36 +146,81 @@ function populateList(proximos) {
|
|||
proximos = JSON.parse(datastorage || '[]');
|
||||
}
|
||||
|
||||
itemList.innerHTML = '';
|
||||
// Limpa e popula a tabela
|
||||
queueTableBody.innerHTML = '';
|
||||
|
||||
setTimeout(() => {
|
||||
nextButton.disabled = !proximos || proximos.length === 0;
|
||||
}, 1000);
|
||||
|
||||
// Seleciona o primeiro item por padrão (ou o próximo disponível)
|
||||
// Aqui, vamos apenas pegar o primeiro da lista atual
|
||||
const itemToProcess = proximos[0]; // Pega o primeiro item
|
||||
if (itemToProcess) {
|
||||
selectedItemId = itemToProcess._id;
|
||||
selectedItemName = itemToProcess.clientName;
|
||||
const li = document.createElement('li');
|
||||
li.innerHTML = /*${itemToProcess.ticketNumber}: */ `<u>${itemToProcess.clientName.toUpperCase()}</u> - ${itemToProcess.ticketNumber}`;
|
||||
li.dataset.id = itemToProcess._id; // Armazena o ID no elemento
|
||||
li.classList.add('selected'); // Marca como selecionado visualmente (precisa de CSS)
|
||||
itemList.appendChild(li);
|
||||
if (!proximos || proximos.length === 0) {
|
||||
queueEmpty.style.display = 'flex';
|
||||
document.querySelector('.queue-table').style.display = 'none';
|
||||
queueCount.textContent = '0';
|
||||
} else {
|
||||
itemList.innerHTML = '<li>Fila vazia!</li>';
|
||||
nextButton.disabled = true;
|
||||
selectedItemId = null;
|
||||
selectedItemName = '';
|
||||
queueEmpty.style.display = 'none';
|
||||
document.querySelector('.queue-table').style.display = 'table';
|
||||
queueCount.textContent = proximos.length;
|
||||
|
||||
proximos.forEach((item, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
const isPreferencial = item.ticketNumber && item.ticketNumber.startsWith('P');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="ticket-cell ${isPreferencial ? 'ticket-preferencial' : 'ticket-normal'}">${item.ticketNumber || '---'}</td>
|
||||
<td>${(item.clientName || '---').toUpperCase()}</td>
|
||||
<td>${item.serviceName || 'Atendimento'}</td>
|
||||
<td class="${isPreferencial ? 'type-preferencial' : 'type-normal'}">${isPreferencial ? 'PREFERENCIAL' : 'NORMAL'}</td>
|
||||
`;
|
||||
|
||||
queueTableBody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// Adiciona os outros itens apenas para visualização (opcional)
|
||||
proximos.slice(1).forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = `${item.clientName.toUpperCase()} - ${item.ticketNumber}`;
|
||||
itemList.appendChild(li);
|
||||
});
|
||||
// CORREÇÃO DO BUG: Só atualiza selectedItemId se NÃO houver um atendimento já chamado (travado)
|
||||
if (!calledAtendimentoData) {
|
||||
// Nenhum atendimento foi chamado ainda, pode selecionar o primeiro
|
||||
const firstItem = proximos && proximos[0];
|
||||
if (firstItem) {
|
||||
selectedItemId = firstItem._id;
|
||||
selectedItemName = firstItem.clientName;
|
||||
} else {
|
||||
selectedItemId = null;
|
||||
selectedItemName = '';
|
||||
}
|
||||
// Sem atendimento chamado: não mostra card
|
||||
if (!currentCard.style.display || currentCard.style.display === 'none') {
|
||||
noCurrentCard.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
// Se calledAtendimentoData está definido, NÃO toca no selectedItemId — mantém o que foi chamado.
|
||||
}
|
||||
|
||||
// Mostra o card do atendimento atual (chamado)
|
||||
function showCurrentCard(data) {
|
||||
currentCard.style.display = 'flex';
|
||||
noCurrentCard.style.display = 'none';
|
||||
|
||||
cardTicket.textContent = data.ticketNumber || '---';
|
||||
|
||||
const statusText = data.status === 'Atendendo' ? 'Atendendo' : 'Chamado';
|
||||
cardStatusBadge.textContent = statusText;
|
||||
cardStatusBadge.className = `card-badge ${data.status === 'Atendendo' ? 'badge-atendendo' : 'badge-chamado'}`;
|
||||
|
||||
cardClientName.textContent = (data.clientName || '---').toUpperCase();
|
||||
cardService.textContent = (data.serviceName || 'ATENDIMENTO').toUpperCase();
|
||||
|
||||
const isPreferencial = data.ticketNumber && data.ticketNumber.startsWith('P');
|
||||
cardType.textContent = isPreferencial ? 'PREFERENCIAL' : 'NORMAL';
|
||||
cardType.className = `card-type ${isPreferencial ? 'type-preferencial' : ''}`;
|
||||
|
||||
// Habilita os botões
|
||||
setTimeout(() => {
|
||||
nextButton.disabled = false;
|
||||
recallButton.disabled = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function showNoCurrentCard(message) {
|
||||
currentCard.style.display = 'none';
|
||||
noCurrentCard.style.display = 'flex';
|
||||
noCurrentCard.querySelector('p').textContent = message || 'Nenhum atendimento chamado';
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -174,22 +255,51 @@ function showObservationView() {
|
|||
observationView.style.display = 'block';
|
||||
}
|
||||
|
||||
// // Evento do botão "Iniciar atendimento"
|
||||
// // Evento do botão "Iniciar atendimento" (INICIAR)
|
||||
nextButton.addEventListener('click', () => {
|
||||
if (selectedItemId !== null) {
|
||||
// Usa calledAtendimentoData para garantir que estamos iniciando O ATENDIMENTO CORRETO
|
||||
const idToStart = calledAtendimentoData ? calledAtendimentoData._id : selectedItemId;
|
||||
const nameToStart = calledAtendimentoData ? calledAtendimentoData.clientName : selectedItemName;
|
||||
|
||||
if (idToStart !== null) {
|
||||
// Salva o estado de atendimento no localStorage
|
||||
localStorage.setItem('atendimentoAtual', selectedItemId);
|
||||
localStorage.setItem('atendimentoAtualNome', selectedItemName);
|
||||
localStorage.setItem('atendimentoAtual', idToStart);
|
||||
localStorage.setItem('atendimentoAtualNome', nameToStart);
|
||||
|
||||
// Atualiza o span da tela de observação
|
||||
selectedItemId = idToStart;
|
||||
selectedItemName = nameToStart;
|
||||
selectedItemNameSpan.innerHTML = `<u> ${(nameToStart || '').toUpperCase()} </u>`;
|
||||
|
||||
// Notifica o main process e muda a view
|
||||
window.electronAPI.atendimentoIniciado(selectedItemId);
|
||||
window.electronAPI.iniciaAtendimento(selectedItemId);
|
||||
// IMPORTANTE: iniciaAtendimento deve apenas mudar o status na API, não chamar o próximo.
|
||||
window.electronAPI.atendimentoIniciado(idToStart);
|
||||
window.electronAPI.iniciaAtendimento(idToStart);
|
||||
|
||||
// Limpa o travamento — atendimento foi iniciado
|
||||
calledAtendimentoData = null;
|
||||
|
||||
showObservationView(); // Muda para a tela de observação
|
||||
} else {
|
||||
console.warn("Nenhum item selecionado para 'Próximo'");
|
||||
console.warn("Nenhum item selecionado para 'Iniciar'");
|
||||
}
|
||||
});
|
||||
|
||||
// Evento do botão RECHAMAR
|
||||
recallButton.addEventListener('click', () => {
|
||||
if (calledAtendimentoData) {
|
||||
// Re-chama o mesmo atendimento (pode tocar som, exibir no painel, etc.)
|
||||
window.electronAPI.rechamarAtendimento(calledAtendimentoData._id);
|
||||
|
||||
// Feedback visual
|
||||
recallButton.textContent = 'RECHAMANDO...';
|
||||
recallButton.disabled = true;
|
||||
setTimeout(() => {
|
||||
recallButton.textContent = 'RECHAMAR';
|
||||
recallButton.disabled = false;
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
logoutButton.addEventListener('click', () => {
|
||||
|
|
@ -206,6 +316,9 @@ saveButton.addEventListener('click', () => {
|
|||
localStorage.removeItem('atendimentoAtualNome');
|
||||
window.electronAPI.atendimentoFinalizado();
|
||||
|
||||
// Limpa o travamento
|
||||
calledAtendimentoData = null;
|
||||
|
||||
window.electronAPI.saveObservation({ itemId: selectedItemId, observation: observation });
|
||||
window.location.reload();
|
||||
}
|
||||
|
|
|
|||
487
style.css
487
style.css
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
/* Estilos Gerais */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
color: #FFF;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
|
@ -125,16 +125,465 @@ body#floating{
|
|||
}
|
||||
|
||||
|
||||
/* Janela Principal */
|
||||
#list-view, #obs-view {
|
||||
/* ================================================
|
||||
NOVO LAYOUT: Tela de Atendimento Redesenhada
|
||||
================================================ */
|
||||
|
||||
#list-view {
|
||||
padding: 16px;
|
||||
background-color: var(--primary-color);
|
||||
height: 96vh;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#obs-view {
|
||||
padding: 20px;
|
||||
background-color: var(--secondary-color); /* Fundo branco para a janela principal */
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
height: 96vh; /* Ocupa a altura da viewport */
|
||||
height: 96vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.attendance-layout {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* PAINEL ESQUERDO: Tabela da fila */
|
||||
.queue-panel {
|
||||
flex: 1.6;
|
||||
background-color: rgba(11, 44, 80, 0.4);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.queue-badge {
|
||||
background: var(--info-color);
|
||||
color: white;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.queue-table-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Tabela da fila */
|
||||
.queue-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.queue-table thead th {
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(11, 44, 80, 0.95);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.queue-table tbody tr {
|
||||
transition: background-color 0.2s ease;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.queue-table tbody tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.queue-table tbody td {
|
||||
padding: 12px 20px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.ticket-cell {
|
||||
font-weight: 700;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.ticket-normal {
|
||||
color: var(--light-info-color) !important;
|
||||
}
|
||||
|
||||
.ticket-preferencial {
|
||||
color: var(--warning-color) !important;
|
||||
}
|
||||
|
||||
.type-normal {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.type-preferencial {
|
||||
color: var(--warning-color) !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.queue-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.queue-empty .empty-icon {
|
||||
font-size: 36px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.queue-empty p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* PAINEL DIREITO: Card do atendimento atual */
|
||||
.current-card-panel {
|
||||
flex: 0.8;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.current-card {
|
||||
background: linear-gradient(145deg, rgba(11, 44, 80, 0.6), rgba(8, 30, 60, 0.8));
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
animation: cardFadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes cardFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-ticket {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
padding: 4px 14px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge-chamado {
|
||||
background: var(--warning-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge-atendendo {
|
||||
background: var(--success-color);
|
||||
color: #fff;
|
||||
animation: pulse-badge 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-badge {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-client-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.card-service {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin: 4px 0 0 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.card-type.type-preferencial {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn-recall {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--warning-color);
|
||||
background: transparent;
|
||||
color: var(--warning-color);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
letter-spacing: 0.5px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.btn-recall:hover:not(:disabled) {
|
||||
background: var(--warning-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-recall:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background: var(--info-color);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
letter-spacing: 0.5px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.btn-start:hover:not(:disabled) {
|
||||
background: var(--light-info-color);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(41, 128, 185, 0.4);
|
||||
}
|
||||
|
||||
.btn-start:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.no-current-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: rgba(11, 44, 80, 0.2);
|
||||
border-radius: 12px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.no-current-card .empty-icon {
|
||||
font-size: 36px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.no-current-card p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.no-current-card small {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
/* Barra inferior */
|
||||
.bottom-bar {
|
||||
padding: 10px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
padding: 8px 20px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.btn-logout:hover {
|
||||
background: var(--danger-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* ================================================
|
||||
TELA DE OBSERVAÇÕES (Atendimento em andamento)
|
||||
================================================ */
|
||||
.obs-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.obs-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.obs-header h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.obs-client-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.obs-client-name {
|
||||
font-size: 16px;
|
||||
color: var(--light-info-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#observation-text {
|
||||
width: calc(100% - 22px) !important;
|
||||
padding: 10px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid var(--tertiary-color);
|
||||
border-radius: 6px;
|
||||
color: var(--medium-gray);
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
#observation-text:focus-visible {
|
||||
box-shadow: var(--box-shadow-inputs);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.obs-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.btn-finish {
|
||||
padding: 12px 28px;
|
||||
background: var(--warning-color);
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.btn-finish:hover {
|
||||
background: var(--light-warning-color);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
|
||||
}
|
||||
|
||||
|
||||
/* ================================================
|
||||
ESTILOS LEGADOS (mantidos para outras telas)
|
||||
================================================ */
|
||||
|
||||
#item-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -227,15 +676,6 @@ textarea {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
textarea#observation-text{
|
||||
width: calc(100% -20px) !important;
|
||||
padding: 10px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid var(--tertiary-color);
|
||||
border-radius: 4px;
|
||||
color: var(--medium-gray);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
|
|
@ -364,3 +804,22 @@ input:checked + .slider:before {
|
|||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Scrollbar personalizada */
|
||||
.queue-table-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.queue-table-wrapper::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.queue-table-wrapper::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.queue-table-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
Loading…
Reference in New Issue