Feat pedidos #70
@@ -1,7 +1,5 @@
|
||||
---
|
||||
trigger: model_decision
|
||||
description: whenever you're working with Svelte files
|
||||
globs: **/*.svelte.ts,**/*.svelte
|
||||
trigger: always_on
|
||||
---
|
||||
|
||||
You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
|
||||
@@ -174,7 +174,8 @@
|
||||
{
|
||||
label: 'Meus Processos',
|
||||
link: '/fluxos',
|
||||
permission: { recurso: 'fluxos_instancias', acao: 'listar' }
|
||||
permission: { recurso: 'fluxos_instancias', acao: 'listar' },
|
||||
exact: true
|
||||
},
|
||||
{
|
||||
label: 'Modelos de Fluxo',
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { FunctionReturnType } from 'convex/server';
|
||||
import ExcelJS from 'exceljs';
|
||||
import logoGovPE from '$lib/assets/logo_governo_PE.png';
|
||||
|
||||
export type RelatorioPlanejamentosData = FunctionReturnType<
|
||||
typeof api.planejamentos.gerarRelatorio
|
||||
>;
|
||||
|
||||
function formatDateTime(ts: number | undefined): string {
|
||||
if (!ts) return '';
|
||||
return new Date(ts).toLocaleString('pt-BR');
|
||||
}
|
||||
|
||||
function formatDateYMD(ymd: string): string {
|
||||
const [y, m, d] = ymd.split('-');
|
||||
if (!y || !m || !d) return ymd;
|
||||
return `${d}/${m}/${y}`;
|
||||
}
|
||||
|
||||
function argb(hex: string): { argb: string } {
|
||||
return { argb: hex.replace('#', '').toUpperCase().padStart(8, 'FF') };
|
||||
}
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
switch (status) {
|
||||
case 'rascunho':
|
||||
return 'Rascunho';
|
||||
case 'gerado':
|
||||
return 'Gerado';
|
||||
case 'cancelado':
|
||||
return 'Cancelado';
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
}
|
||||
|
||||
function applyHeaderRowStyle(row: ExcelJS.Row) {
|
||||
row.height = 22;
|
||||
row.eachCell((cell) => {
|
||||
cell.font = { bold: true, size: 11, color: argb('#FFFFFF') };
|
||||
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: argb('#2980B9') };
|
||||
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
|
||||
cell.border = {
|
||||
top: { style: 'thin', color: argb('#000000') },
|
||||
bottom: { style: 'thin', color: argb('#000000') },
|
||||
left: { style: 'thin', color: argb('#000000') },
|
||||
right: { style: 'thin', color: argb('#000000') }
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function applyZebraRowStyle(row: ExcelJS.Row, isEven: boolean) {
|
||||
row.eachCell((cell) => {
|
||||
cell.font = { size: 10, color: argb('#000000') };
|
||||
cell.fill = {
|
||||
type: 'pattern',
|
||||
pattern: 'solid',
|
||||
fgColor: argb(isEven ? '#F8F9FA' : '#FFFFFF')
|
||||
};
|
||||
cell.border = {
|
||||
top: { style: 'thin', color: argb('#E0E0E0') },
|
||||
bottom: { style: 'thin', color: argb('#E0E0E0') },
|
||||
left: { style: 'thin', color: argb('#E0E0E0') },
|
||||
right: { style: 'thin', color: argb('#E0E0E0') }
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function tryLoadLogoBuffer(): Promise<ArrayBuffer | null> {
|
||||
try {
|
||||
const response = await fetch(logoGovPE);
|
||||
if (response.ok) return await response.arrayBuffer();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
try {
|
||||
const logoImg = new Image();
|
||||
logoImg.crossOrigin = 'anonymous';
|
||||
logoImg.src = logoGovPE;
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
logoImg.onload = () => resolve();
|
||||
logoImg.onerror = () => reject();
|
||||
setTimeout(() => reject(), 3000);
|
||||
});
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = logoImg.width;
|
||||
canvas.height = logoImg.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return null;
|
||||
ctx.drawImage(logoImg, 0, 0);
|
||||
const blob = await new Promise<Blob>((resolve, reject) => {
|
||||
canvas.toBlob(
|
||||
(b) => (b ? resolve(b) : reject(new Error('Falha ao converter imagem'))),
|
||||
'image/png'
|
||||
);
|
||||
});
|
||||
return await blob.arrayBuffer();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function addTitleRow(
|
||||
worksheet: ExcelJS.Worksheet,
|
||||
title: string,
|
||||
columnsCount: number,
|
||||
workbook: ExcelJS.Workbook,
|
||||
logoBuffer: ArrayBuffer | null
|
||||
) {
|
||||
if (columnsCount <= 0) return;
|
||||
|
||||
worksheet.getRow(1).height = 60;
|
||||
|
||||
if (columnsCount >= 3) {
|
||||
worksheet.mergeCells(1, 1, 1, 2);
|
||||
}
|
||||
|
||||
const logoCell = worksheet.getCell(1, 1);
|
||||
logoCell.alignment = { vertical: 'middle', horizontal: 'left' };
|
||||
if (columnsCount >= 3) {
|
||||
logoCell.border = { right: { style: 'thin', color: argb('#E0E0E0') } };
|
||||
}
|
||||
|
||||
if (logoBuffer) {
|
||||
type WorkbookWithImage = { addImage(image: { buffer: Uint8Array; extension: string }): number };
|
||||
const workbookWithImage = workbook as unknown as WorkbookWithImage;
|
||||
const logoId = workbookWithImage.addImage({
|
||||
buffer: new Uint8Array(logoBuffer),
|
||||
extension: 'png'
|
||||
});
|
||||
worksheet.addImage(logoId, { tl: { col: 0, row: 0 }, ext: { width: 140, height: 55 } });
|
||||
}
|
||||
|
||||
if (columnsCount === 1) {
|
||||
const titleCell = worksheet.getCell(1, 1);
|
||||
titleCell.value = title;
|
||||
titleCell.font = { bold: true, size: 18, color: argb('#2980B9') };
|
||||
titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
return;
|
||||
}
|
||||
|
||||
if (columnsCount === 2) {
|
||||
const titleCell = worksheet.getCell(1, 2);
|
||||
titleCell.value = title;
|
||||
titleCell.font = { bold: true, size: 18, color: argb('#2980B9') };
|
||||
titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
return;
|
||||
}
|
||||
|
||||
worksheet.mergeCells(1, 3, 1, columnsCount);
|
||||
const titleCell = worksheet.getCell(1, 3);
|
||||
titleCell.value = title;
|
||||
titleCell.font = { bold: true, size: 18, color: argb('#2980B9') };
|
||||
titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
}
|
||||
|
||||
function downloadExcel(buffer: ArrayBuffer, fileName: string) {
|
||||
const blob = new Blob([buffer], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = fileName;
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export async function exportarRelatorioPlanejamentosXLSX(
|
||||
relatorio: RelatorioPlanejamentosData
|
||||
): Promise<void> {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
workbook.creator = 'SGSE - Sistema de Gerenciamento';
|
||||
workbook.created = new Date();
|
||||
|
||||
const logoBuffer = await tryLoadLogoBuffer();
|
||||
|
||||
// ===== Aba: Resumo =====
|
||||
{
|
||||
const ws = workbook.addWorksheet('Resumo');
|
||||
ws.columns = [
|
||||
{ header: 'Campo', key: 'campo', width: 35 },
|
||||
{ header: 'Valor', key: 'valor', width: 30 }
|
||||
];
|
||||
|
||||
addTitleRow(ws, 'RELATÓRIO DE PLANEJAMENTOS', 2, workbook, logoBuffer);
|
||||
|
||||
const headerRow = ws.getRow(2);
|
||||
headerRow.values = ['Campo', 'Valor'];
|
||||
applyHeaderRowStyle(headerRow);
|
||||
|
||||
const rows: Array<{ campo: string; valor: string | number }> = [
|
||||
{
|
||||
campo: 'Período início',
|
||||
valor: relatorio.filtros.periodoInicio
|
||||
? formatDateTime(relatorio.filtros.periodoInicio)
|
||||
: ''
|
||||
},
|
||||
{
|
||||
campo: 'Período fim',
|
||||
valor: relatorio.filtros.periodoFim ? formatDateTime(relatorio.filtros.periodoFim) : ''
|
||||
},
|
||||
{ campo: 'Texto (filtro)', valor: relatorio.filtros.texto ?? '' },
|
||||
{
|
||||
campo: 'Status (filtro)',
|
||||
valor: relatorio.filtros.statuses?.map(statusLabel).join(', ') ?? ''
|
||||
},
|
||||
{ campo: 'Total de planejamentos', valor: relatorio.resumo.totalPlanejamentos },
|
||||
{ campo: 'Total valor estimado', valor: relatorio.resumo.totalValorEstimado }
|
||||
];
|
||||
|
||||
rows.forEach((r, idx) => {
|
||||
const row = ws.addRow({ campo: r.campo, valor: r.valor });
|
||||
applyZebraRowStyle(row, idx % 2 === 1);
|
||||
row.getCell(2).alignment = {
|
||||
vertical: 'middle',
|
||||
horizontal: typeof r.valor === 'number' ? 'right' : 'left'
|
||||
};
|
||||
});
|
||||
|
||||
ws.addRow({ campo: '', valor: '' });
|
||||
const sectionRow = ws.addRow({ campo: 'Totais por status', valor: '' });
|
||||
sectionRow.font = { bold: true, size: 11, color: argb('#2980B9') };
|
||||
sectionRow.alignment = { vertical: 'middle', horizontal: 'left' };
|
||||
|
||||
relatorio.resumo.totalPorStatus.forEach((s, idx) => {
|
||||
const row = ws.addRow({ campo: statusLabel(s.status), valor: s.count });
|
||||
applyZebraRowStyle(row, idx % 2 === 1);
|
||||
row.getCell(2).alignment = { vertical: 'middle', horizontal: 'right' };
|
||||
});
|
||||
|
||||
ws.getColumn(2).numFmt = '#,##0.00';
|
||||
ws.views = [{ state: 'frozen', ySplit: 2, topLeftCell: 'A3', activeCell: 'A3' }];
|
||||
}
|
||||
|
||||
// ===== Aba: Planejamentos =====
|
||||
{
|
||||
const ws = workbook.addWorksheet('Planejamentos');
|
||||
ws.columns = [
|
||||
{ header: 'Título', key: 'titulo', width: 40 },
|
||||
{ header: 'Status', key: 'status', width: 15 },
|
||||
{ header: 'Responsável', key: 'responsavel', width: 25 },
|
||||
{ header: 'Data', key: 'data', width: 15 },
|
||||
{ header: 'Ação', key: 'acao', width: 25 },
|
||||
{ header: 'Itens', key: 'itens', width: 10 },
|
||||
{ header: 'Estimado (R$)', key: 'estimado', width: 18 },
|
||||
{ header: 'Criado em', key: 'criadoEm', width: 20 }
|
||||
];
|
||||
|
||||
addTitleRow(ws, 'RELATÓRIO DE PLANEJAMENTOS — LISTA', ws.columns.length, workbook, logoBuffer);
|
||||
|
||||
const headerRow = ws.getRow(2);
|
||||
headerRow.values = ws.columns.map((c) => c.header as string);
|
||||
applyHeaderRowStyle(headerRow);
|
||||
|
||||
relatorio.planejamentos.forEach((p, idx) => {
|
||||
const row = ws.addRow({
|
||||
titulo: p.titulo,
|
||||
status: statusLabel(p.status),
|
||||
responsavel: p.responsavelNome,
|
||||
data: formatDateYMD(p.data),
|
||||
acao: p.acaoNome ?? '',
|
||||
itens: p.itensCount,
|
||||
estimado: p.valorEstimadoTotal,
|
||||
criadoEm: new Date(p.criadoEm)
|
||||
});
|
||||
|
||||
applyZebraRowStyle(row, idx % 2 === 1);
|
||||
|
||||
row.getCell(2).alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
row.getCell(4).alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
row.getCell(6).alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
row.getCell(7).alignment = { vertical: 'middle', horizontal: 'right' };
|
||||
row.getCell(8).alignment = { vertical: 'middle', horizontal: 'center' };
|
||||
|
||||
const statusCell = row.getCell(2);
|
||||
if (p.status === 'gerado') {
|
||||
statusCell.fill = { type: 'pattern', pattern: 'solid', fgColor: argb('#D4EDDA') };
|
||||
statusCell.font = { size: 10, color: argb('#155724') };
|
||||
} else if (p.status === 'cancelado') {
|
||||
statusCell.fill = { type: 'pattern', pattern: 'solid', fgColor: argb('#F8D7DA') };
|
||||
statusCell.font = { size: 10, color: argb('#721C24') };
|
||||
}
|
||||
});
|
||||
|
||||
ws.getColumn(7).numFmt = '"R$" #,##0.00';
|
||||
ws.getColumn(8).numFmt = 'dd/mm/yyyy hh:mm';
|
||||
|
||||
ws.views = [{ state: 'frozen', ySplit: 2, topLeftCell: 'A3', activeCell: 'A3' }];
|
||||
ws.autoFilter = {
|
||||
from: { row: 2, column: 1 },
|
||||
to: { row: 2, column: ws.columns.length }
|
||||
};
|
||||
}
|
||||
|
||||
const nomeArquivo = `relatorio-planejamentos-${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
downloadExcel(buffer, nomeArquivo);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { FunctionReturnType } from 'convex/server';
|
||||
import jsPDF from 'jspdf';
|
||||
import autoTable from 'jspdf-autotable';
|
||||
|
||||
export type RelatorioPlanejamentosData = FunctionReturnType<
|
||||
typeof api.planejamentos.gerarRelatorio
|
||||
>;
|
||||
|
||||
function formatCurrencyBRL(n: number): string {
|
||||
return n.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
|
||||
}
|
||||
|
||||
function formatDateTime(ts: number | undefined): string {
|
||||
if (!ts) return '-';
|
||||
return new Date(ts).toLocaleString('pt-BR');
|
||||
}
|
||||
|
||||
function formatDateYMD(ymd: string): string {
|
||||
const [y, m, d] = ymd.split('-');
|
||||
if (!y || !m || !d) return ymd;
|
||||
return `${d}/${m}/${y}`;
|
||||
}
|
||||
|
||||
function getPeriodoLabel(filtros: RelatorioPlanejamentosData['filtros']): string {
|
||||
const inicio = filtros.periodoInicio ? formatDateTime(filtros.periodoInicio) : '—';
|
||||
const fim = filtros.periodoFim ? formatDateTime(filtros.periodoFim) : '—';
|
||||
return `${inicio} até ${fim}`;
|
||||
}
|
||||
|
||||
export function gerarRelatorioPlanejamentosPDF(relatorio: RelatorioPlanejamentosData): void {
|
||||
const doc = new jsPDF({ orientation: 'landscape' });
|
||||
|
||||
// Título
|
||||
doc.setFontSize(18);
|
||||
doc.setTextColor(102, 126, 234);
|
||||
doc.text('Relatório de Planejamentos', 14, 18);
|
||||
|
||||
// Subtítulo
|
||||
doc.setFontSize(11);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
doc.text(`Período: ${getPeriodoLabel(relatorio.filtros)}`, 14, 26);
|
||||
doc.setFontSize(9);
|
||||
doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 14, 32);
|
||||
|
||||
let yPos = 40;
|
||||
|
||||
// Resumo
|
||||
doc.setFontSize(12);
|
||||
doc.setTextColor(102, 126, 234);
|
||||
doc.text('Resumo', 14, yPos);
|
||||
yPos += 6;
|
||||
|
||||
autoTable(doc, {
|
||||
startY: yPos,
|
||||
head: [['Planejamentos', 'Total Estimado']],
|
||||
body: [
|
||||
[
|
||||
String(relatorio.resumo.totalPlanejamentos),
|
||||
formatCurrencyBRL(relatorio.resumo.totalValorEstimado)
|
||||
]
|
||||
],
|
||||
theme: 'striped',
|
||||
headStyles: { fillColor: [102, 126, 234] },
|
||||
styles: { fontSize: 9 }
|
||||
});
|
||||
|
||||
type JsPDFWithAutoTable = jsPDF & { lastAutoTable?: { finalY: number } };
|
||||
yPos = ((doc as JsPDFWithAutoTable).lastAutoTable?.finalY ?? yPos) + 10;
|
||||
|
||||
// Totais por status
|
||||
doc.setFontSize(12);
|
||||
doc.setTextColor(102, 126, 234);
|
||||
doc.text('Totais por status', 14, yPos);
|
||||
yPos += 6;
|
||||
|
||||
autoTable(doc, {
|
||||
startY: yPos,
|
||||
head: [['Status', 'Quantidade']],
|
||||
body: relatorio.resumo.totalPorStatus.map((s) => [s.status, String(s.count)]),
|
||||
theme: 'grid',
|
||||
headStyles: { fillColor: [102, 126, 234] },
|
||||
styles: { fontSize: 9 }
|
||||
});
|
||||
|
||||
yPos = ((doc as JsPDFWithAutoTable).lastAutoTable?.finalY ?? yPos) + 12;
|
||||
|
||||
// Planejamentos
|
||||
doc.setFontSize(12);
|
||||
doc.setTextColor(102, 126, 234);
|
||||
doc.text('Planejamentos', 14, yPos);
|
||||
yPos += 6;
|
||||
|
||||
const planejamentosBody = relatorio.planejamentos.map((p) => [
|
||||
p.titulo,
|
||||
p.status,
|
||||
p.responsavelNome,
|
||||
p.acaoNome ?? '—',
|
||||
formatDateYMD(p.data),
|
||||
String(p.itensCount),
|
||||
formatCurrencyBRL(p.valorEstimadoTotal),
|
||||
formatDateTime(p.criadoEm)
|
||||
]);
|
||||
|
||||
autoTable(doc, {
|
||||
startY: yPos,
|
||||
head: [['Título', 'Status', 'Responsável', 'Ação', 'Data', 'Itens', 'Estimado', 'Criado em']],
|
||||
body: planejamentosBody,
|
||||
theme: 'grid',
|
||||
headStyles: { fillColor: [102, 126, 234] },
|
||||
styles: { fontSize: 8 },
|
||||
columnStyles: {
|
||||
0: { cellWidth: 60 },
|
||||
1: { cellWidth: 20 },
|
||||
2: { cellWidth: 40 },
|
||||
3: { cellWidth: 40 },
|
||||
4: { cellWidth: 25 },
|
||||
5: { cellWidth: 15 },
|
||||
6: { cellWidth: 30 },
|
||||
7: { cellWidth: 30 }
|
||||
}
|
||||
});
|
||||
|
||||
// Footer com paginação
|
||||
const pageCount = doc.getNumberOfPages();
|
||||
for (let i = 1; i <= pageCount; i++) {
|
||||
doc.setPage(i);
|
||||
doc.setFontSize(8);
|
||||
doc.setTextColor(128, 128, 128);
|
||||
doc.text(
|
||||
`SGSE - Sistema de Gerenciamento de Secretaria | Página ${i} de ${pageCount}`,
|
||||
doc.internal.pageSize.getWidth() / 2,
|
||||
doc.internal.pageSize.getHeight() - 8,
|
||||
{ align: 'center' }
|
||||
);
|
||||
}
|
||||
|
||||
const fileName = `relatorio-planejamentos-${new Date().toISOString().slice(0, 10)}.pdf`;
|
||||
doc.save(fileName);
|
||||
}
|
||||
@@ -3,50 +3,52 @@
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Estado do filtro
|
||||
let statusFilter = $state<'draft' | 'published' | 'archived' | undefined>(undefined);
|
||||
// Estado dos filtros
|
||||
let statusFilter = $state<'active' | 'completed' | 'cancelled' | undefined>(undefined);
|
||||
|
||||
// Query de templates
|
||||
const templatesQuery = useQuery(api.flows.listTemplates, () =>
|
||||
// Query de instâncias
|
||||
const instancesQuery = useQuery(api.flows.listInstances, () =>
|
||||
statusFilter ? { status: statusFilter } : {}
|
||||
);
|
||||
|
||||
// Query de templates publicados (para o modal de criação)
|
||||
const publishedTemplatesQuery = useQuery(api.flows.listTemplates, {
|
||||
status: 'published'
|
||||
});
|
||||
|
||||
// Modal de criação
|
||||
let showCreateModal = $state(false);
|
||||
let newTemplateName = $state('');
|
||||
let newTemplateDescription = $state('');
|
||||
let selectedTemplateId = $state<Id<'flowTemplates'> | ''>('');
|
||||
let contratoId = $state<Id<'contratos'> | ''>('');
|
||||
let managerId = $state<Id<'usuarios'> | ''>('');
|
||||
let isCreating = $state(false);
|
||||
let createError = $state<string | null>(null);
|
||||
|
||||
// Modal de confirmação de exclusão
|
||||
let showDeleteModal = $state(false);
|
||||
let templateToDelete = $state<{
|
||||
_id: Id<'flowTemplates'>;
|
||||
name: string;
|
||||
} | null>(null);
|
||||
let isDeleting = $state(false);
|
||||
let deleteError = $state<string | null>(null);
|
||||
// Query de usuários (para seleção de gerente)
|
||||
const usuariosQuery = useQuery(api.usuarios.listar, {});
|
||||
|
||||
// Query de contratos (para seleção)
|
||||
const contratosQuery = useQuery(api.contratos.listar, {});
|
||||
|
||||
function openCreateModal() {
|
||||
newTemplateName = '';
|
||||
newTemplateDescription = '';
|
||||
selectedTemplateId = '';
|
||||
contratoId = '';
|
||||
managerId = '';
|
||||
createError = null;
|
||||
showCreateModal = true;
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
showCreateModal = false;
|
||||
newTemplateName = '';
|
||||
newTemplateDescription = '';
|
||||
createError = null;
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
if (!newTemplateName.trim()) {
|
||||
createError = 'O nome é obrigatório';
|
||||
if (!selectedTemplateId || !managerId) {
|
||||
createError = 'Template e gerente são obrigatórios';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -54,72 +56,28 @@
|
||||
createError = null;
|
||||
|
||||
try {
|
||||
const templateId = await client.mutation(api.flows.createTemplate, {
|
||||
name: newTemplateName.trim(),
|
||||
description: newTemplateDescription.trim() || undefined
|
||||
const instanceId = await client.mutation(api.flows.instantiateFlow, {
|
||||
flowTemplateId: selectedTemplateId as Id<'flowTemplates'>,
|
||||
contratoId: contratoId ? (contratoId as Id<'contratos'>) : undefined,
|
||||
managerId: managerId as Id<'usuarios'>
|
||||
});
|
||||
closeCreateModal();
|
||||
// Navegar para o editor
|
||||
goto(`/fluxos/${templateId}/editor`);
|
||||
goto(resolve(`/fluxos/instancias/${instanceId}`));
|
||||
} catch (e) {
|
||||
createError = e instanceof Error ? e.message : 'Erro ao criar template';
|
||||
createError = e instanceof Error ? e.message : 'Erro ao criar instância';
|
||||
} finally {
|
||||
isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openDeleteModal(template: { _id: Id<'flowTemplates'>; name: string }) {
|
||||
templateToDelete = template;
|
||||
deleteError = null;
|
||||
showDeleteModal = true;
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
showDeleteModal = false;
|
||||
templateToDelete = null;
|
||||
deleteError = null;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!templateToDelete) return;
|
||||
|
||||
isDeleting = true;
|
||||
deleteError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.deleteTemplate, {
|
||||
id: templateToDelete._id
|
||||
});
|
||||
closeDeleteModal();
|
||||
} catch (e) {
|
||||
deleteError = e instanceof Error ? e.message : 'Erro ao excluir template';
|
||||
} finally {
|
||||
isDeleting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStatusChange(
|
||||
templateId: Id<'flowTemplates'>,
|
||||
newStatus: 'draft' | 'published' | 'archived'
|
||||
) {
|
||||
try {
|
||||
await client.mutation(api.flows.updateTemplate, {
|
||||
id: templateId,
|
||||
status: newStatus
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Erro ao atualizar status:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status: 'draft' | 'published' | 'archived') {
|
||||
function getStatusBadge(status: 'active' | 'completed' | 'cancelled') {
|
||||
switch (status) {
|
||||
case 'draft':
|
||||
return { class: 'badge-warning', label: 'Rascunho' };
|
||||
case 'published':
|
||||
return { class: 'badge-success', label: 'Publicado' };
|
||||
case 'archived':
|
||||
return { class: 'badge-neutral', label: 'Arquivado' };
|
||||
case 'active':
|
||||
return { class: 'badge-info', label: 'Em Andamento' };
|
||||
case 'completed':
|
||||
return { class: 'badge-success', label: 'Concluído' };
|
||||
case 'cancelled':
|
||||
return { class: 'badge-error', label: 'Cancelado' };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,43 +85,70 @@
|
||||
return new Date(timestamp).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function getProgressPercentage(completed: number, total: number): number {
|
||||
if (total === 0) return 0;
|
||||
return Math.round((completed / total) * 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-10">
|
||||
<!-- Header -->
|
||||
<section
|
||||
class="border-secondary/25 from-secondary/10 via-base-100 to-primary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
|
||||
class="border-info/25 from-info/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
|
||||
>
|
||||
<div class="bg-secondary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
||||
<div class="bg-primary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
|
||||
<div class="bg-info/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
||||
<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<span
|
||||
class="border-secondary/40 bg-secondary/10 text-secondary inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
|
||||
<div class="flex items-center gap-4">
|
||||
<a href={resolve('/fluxos/templates')} class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
Gestão de Fluxos
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
Templates
|
||||
</a>
|
||||
<span
|
||||
class="border-info/40 bg-info/10 text-info inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
|
||||
>
|
||||
Execução
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
|
||||
Templates de Fluxo
|
||||
Instâncias de Fluxo
|
||||
</h1>
|
||||
<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
|
||||
Crie e gerencie templates de fluxo de trabalho. Templates definem os passos e
|
||||
responsabilidades que serão instanciados para projetos ou contratos.
|
||||
Acompanhe e gerencie as execuções de fluxos de trabalho. Visualize o progresso, documentos
|
||||
e responsáveis de cada etapa.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
<!-- Filtro de status -->
|
||||
<select class="select select-bordered" bind:value={statusFilter}>
|
||||
<option value={undefined}>Todos os status</option>
|
||||
<option value="draft">Rascunho</option>
|
||||
<option value="published">Publicado</option>
|
||||
<option value="archived">Arquivado</option>
|
||||
<option value="active">Em Andamento</option>
|
||||
<option value="completed">Concluído</option>
|
||||
<option value="cancelled">Cancelado</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-secondary shadow-lg" onclick={openCreateModal}>
|
||||
<button class="btn btn-info shadow-lg" onclick={openCreateModal}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
@@ -179,19 +164,19 @@
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Novo Template
|
||||
Nova Instância
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lista de Templates -->
|
||||
<!-- Lista de Instâncias -->
|
||||
<section class="bg-base-100 rounded-2xl border p-6 shadow-lg">
|
||||
{#if templatesQuery.isLoading}
|
||||
{#if instancesQuery.isLoading}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-secondary"></span>
|
||||
<span class="loading loading-spinner loading-lg text-info"></span>
|
||||
</div>
|
||||
{:else if !templatesQuery.data || templatesQuery.data.length === 0}
|
||||
{:else if !instancesQuery.data || instancesQuery.data.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -205,180 +190,107 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">Nenhum template encontrado</h3>
|
||||
<p class="text-base-content/50 mt-2">
|
||||
{statusFilter
|
||||
? 'Não há templates com este status.'
|
||||
: 'Clique em "Novo Template" para criar o primeiro.'}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each templatesQuery.data as template (template._id)}
|
||||
{@const statusBadge = getStatusBadge(template.status)}
|
||||
<article
|
||||
class="card bg-base-200/50 hover:bg-base-200 border transition-all duration-200 hover:shadow-md"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<h2 class="card-title text-lg">{template.name}</h2>
|
||||
<span class="badge {statusBadge.class}">{statusBadge.label}</span>
|
||||
</div>
|
||||
|
||||
{#if template.description}
|
||||
<p class="text-base-content/60 line-clamp-2 text-sm">
|
||||
{template.description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="text-base-content/50 mt-2 flex flex-wrap gap-4 text-xs">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
/>
|
||||
</svg>
|
||||
{template.stepsCount} passos
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
{formatDate(template.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-actions mt-4 justify-between">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost btn-sm" aria-label="Alterar status">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow"
|
||||
role="menu"
|
||||
>
|
||||
{#if template.status !== 'draft'}
|
||||
<li>
|
||||
<button onclick={() => handleStatusChange(template._id, 'draft')}>
|
||||
Voltar para Rascunho
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if template.status !== 'published'}
|
||||
<li>
|
||||
<button onclick={() => handleStatusChange(template._id, 'published')}>
|
||||
Publicar
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if template.status !== 'archived'}
|
||||
<li>
|
||||
<button onclick={() => handleStatusChange(template._id, 'archived')}>
|
||||
Arquivar
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
<li class="mt-2 border-t pt-2">
|
||||
<button class="text-error" onclick={() => openDeleteModal(template)}>
|
||||
Excluir
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="/fluxos/{template._id}/editor" class="btn btn-secondary btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
Editar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Link para Instâncias -->
|
||||
<section class="flex justify-center">
|
||||
<a href="/licitacoes/fluxos" class="btn btn-outline btn-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
||||
/>
|
||||
</svg>
|
||||
Ver Fluxos de Trabalho
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">
|
||||
Nenhuma instância encontrada
|
||||
</h3>
|
||||
<p class="text-base-content/50 mt-2">
|
||||
{statusFilter
|
||||
? 'Não há instâncias com este status.'
|
||||
: 'Clique em "Nova Instância" para iniciar um fluxo.'}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Template</th>
|
||||
<th>Contrato</th>
|
||||
<th>Gerente</th>
|
||||
<th>Progresso</th>
|
||||
<th>Status</th>
|
||||
<th>Iniciado em</th>
|
||||
<th class="text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each instancesQuery.data as instance (instance._id)}
|
||||
{@const statusBadge = getStatusBadge(instance.status)}
|
||||
{@const progressPercent = getProgressPercentage(
|
||||
instance.progress.completed,
|
||||
instance.progress.total
|
||||
)}
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="font-medium">{instance.templateName ?? 'Template desconhecido'}</div>
|
||||
</td>
|
||||
<td>
|
||||
{#if instance.contratoId}
|
||||
<span class="badge badge-outline badge-sm">{instance.contratoId}</span>
|
||||
{:else}
|
||||
<span class="text-base-content/40 text-sm">-</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-base-content/70">{instance.managerName ?? '-'}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<progress class="progress progress-info w-20" value={progressPercent} max="100"
|
||||
></progress>
|
||||
<span class="text-base-content/60 text-xs">
|
||||
{instance.progress.completed}/{instance.progress.total}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {statusBadge.class}">{statusBadge.label}</span>
|
||||
</td>
|
||||
<td class="text-base-content/60 text-sm">{formatDate(instance.startedAt)}</td>
|
||||
<td class="text-right">
|
||||
<a
|
||||
href={resolve(`/fluxos/instancias/${instance._id}`)}
|
||||
class="btn btn-ghost btn-sm"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
Ver
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal de Criação -->
|
||||
{#if showCreateModal}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">Novo Template de Fluxo</h3>
|
||||
<div class="modal-box max-w-2xl">
|
||||
<h3 class="text-lg font-bold">Nova Instância de Fluxo</h3>
|
||||
|
||||
{#if createError}
|
||||
<div class="alert alert-error mt-4">
|
||||
@@ -408,41 +320,82 @@
|
||||
class="mt-4 space-y-4"
|
||||
>
|
||||
<div class="form-control">
|
||||
<label class="label" for="template-name">
|
||||
<span class="label-text">Nome do Template</span>
|
||||
<label class="label" for="template-select">
|
||||
<span class="label-text">Template de Fluxo</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="template-name"
|
||||
bind:value={newTemplateName}
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Ex: Fluxo de Aprovação de Contrato"
|
||||
<select
|
||||
id="template-select"
|
||||
bind:value={selectedTemplateId}
|
||||
class="select select-bordered w-full"
|
||||
required
|
||||
/>
|
||||
>
|
||||
<option value="">Selecione um template</option>
|
||||
{#if publishedTemplatesQuery.data}
|
||||
{#each publishedTemplatesQuery.data as template (template._id)}
|
||||
<option value={template._id}>{template.name}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<p class="label">
|
||||
<span class="label-text-alt text-base-content/60"
|
||||
>Apenas templates publicados podem ser instanciados</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="template-description">
|
||||
<span class="label-text">Descrição (opcional)</span>
|
||||
<label class="label" for="contrato-select">
|
||||
<span class="label-text">Contrato (Opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="template-description"
|
||||
bind:value={newTemplateDescription}
|
||||
class="textarea textarea-bordered w-full"
|
||||
placeholder="Descreva o propósito deste fluxo..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<select
|
||||
id="contrato-select"
|
||||
bind:value={contratoId}
|
||||
class="select select-bordered w-full"
|
||||
>
|
||||
<option value="">Nenhum contrato</option>
|
||||
{#if contratosQuery.data}
|
||||
{#each contratosQuery.data as contrato (contrato._id)}
|
||||
<option value={contrato._id}>
|
||||
{contrato.numeroContrato}/{contrato.anoContrato}
|
||||
</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<p class="label">
|
||||
<span class="label-text-alt text-base-content/60"
|
||||
>Opcional: vincule este fluxo a um contrato específico</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="manager-select">
|
||||
<span class="label-text">Gerente Responsável</span>
|
||||
</label>
|
||||
<select
|
||||
id="manager-select"
|
||||
bind:value={managerId}
|
||||
class="select select-bordered w-full"
|
||||
required
|
||||
>
|
||||
<option value="">Selecione um gerente</option>
|
||||
{#if usuariosQuery.data}
|
||||
{#each usuariosQuery.data as usuario (usuario._id)}
|
||||
<option value={usuario._id}>{usuario.nome}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={closeCreateModal} disabled={isCreating}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-secondary" disabled={isCreating}>
|
||||
<button type="submit" class="btn btn-info" disabled={isCreating}>
|
||||
{#if isCreating}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Criar e Editar
|
||||
Iniciar Fluxo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -455,56 +408,3 @@
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
{#if showDeleteModal && templateToDelete}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-error text-lg font-bold">Confirmar Exclusão</h3>
|
||||
|
||||
{#if deleteError}
|
||||
<div class="alert alert-error mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{deleteError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="py-4">
|
||||
Tem certeza que deseja excluir o template <strong>{templateToDelete.name}</strong>?
|
||||
</p>
|
||||
<p class="text-base-content/60 text-sm">
|
||||
Esta ação não pode ser desfeita. Templates com instâncias vinculadas não podem ser
|
||||
excluídos.
|
||||
</p>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={closeDeleteModal} disabled={isDeleting}> Cancelar </button>
|
||||
<button class="btn btn-error" onclick={handleDelete} disabled={isDeleting}>
|
||||
{#if isDeleting}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Excluir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeDeleteModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,947 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
const client = useConvexClient();
|
||||
let instanceId = $derived($page.params.id as Id<'flowInstances'>);
|
||||
|
||||
// Query da instância com passos
|
||||
const instanceQuery = useQuery(api.flows.getInstanceWithSteps, () => ({
|
||||
id: instanceId
|
||||
}));
|
||||
|
||||
// Query de usuários (para reatribuição) - será filtrado por setor no modal
|
||||
const usuariosQuery = useQuery(api.usuarios.listar, {});
|
||||
|
||||
// Query de usuários por setor para atribuição
|
||||
let usuariosPorSetorQuery = $state<ReturnType<
|
||||
typeof useQuery<typeof api.flows.getUsuariosBySetorForAssignment>
|
||||
> | null>(null);
|
||||
|
||||
// Estado de operações
|
||||
let isProcessing = $state(false);
|
||||
let processingError = $state<string | null>(null);
|
||||
|
||||
// Modal de reatribuição
|
||||
let showReassignModal = $state(false);
|
||||
let stepToReassign = $state<{
|
||||
_id: Id<'flowInstanceSteps'>;
|
||||
stepName: string;
|
||||
} | null>(null);
|
||||
let newAssigneeId = $state<Id<'usuarios'> | ''>('');
|
||||
|
||||
// Modal de notas
|
||||
let showNotesModal = $state(false);
|
||||
let stepForNotes = $state<{
|
||||
_id: Id<'flowInstanceSteps'>;
|
||||
stepName: string;
|
||||
notes: string;
|
||||
} | null>(null);
|
||||
let editedNotes = $state('');
|
||||
|
||||
// Modal de upload
|
||||
let showUploadModal = $state(false);
|
||||
let stepForUpload = $state<{
|
||||
_id: Id<'flowInstanceSteps'>;
|
||||
stepName: string;
|
||||
} | null>(null);
|
||||
let uploadFile = $state<File | null>(null);
|
||||
let isUploading = $state(false);
|
||||
|
||||
// Modal de confirmação de cancelamento
|
||||
let showCancelModal = $state(false);
|
||||
|
||||
async function handleStartStep(stepId: Id<'flowInstanceSteps'>) {
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.updateStepStatus, {
|
||||
instanceStepId: stepId,
|
||||
status: 'in_progress'
|
||||
});
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao iniciar passo';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCompleteStep(stepId: Id<'flowInstanceSteps'>) {
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.completeStep, {
|
||||
instanceStepId: stepId
|
||||
});
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao completar passo';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBlockStep(stepId: Id<'flowInstanceSteps'>) {
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.updateStepStatus, {
|
||||
instanceStepId: stepId,
|
||||
status: 'blocked'
|
||||
});
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao bloquear passo';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openReassignModal(step: {
|
||||
_id: Id<'flowInstanceSteps'>;
|
||||
stepName: string;
|
||||
assignedToId?: Id<'usuarios'>;
|
||||
}) {
|
||||
stepToReassign = step;
|
||||
newAssigneeId = step.assignedToId ?? '';
|
||||
showReassignModal = true;
|
||||
}
|
||||
|
||||
function closeReassignModal() {
|
||||
showReassignModal = false;
|
||||
stepToReassign = null;
|
||||
newAssigneeId = '';
|
||||
}
|
||||
|
||||
async function handleReassign() {
|
||||
if (!stepToReassign || !newAssigneeId) return;
|
||||
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.reassignStep, {
|
||||
instanceStepId: stepToReassign._id,
|
||||
assignedToId: newAssigneeId as Id<'usuarios'>
|
||||
});
|
||||
closeReassignModal();
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao reatribuir passo';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openNotesModal(step: {
|
||||
_id: Id<'flowInstanceSteps'>;
|
||||
stepName: string;
|
||||
notes?: string;
|
||||
}) {
|
||||
stepForNotes = { ...step, notes: step.notes ?? '' };
|
||||
editedNotes = step.notes ?? '';
|
||||
showNotesModal = true;
|
||||
}
|
||||
|
||||
function closeNotesModal() {
|
||||
showNotesModal = false;
|
||||
stepForNotes = null;
|
||||
editedNotes = '';
|
||||
}
|
||||
|
||||
async function handleSaveNotes() {
|
||||
if (!stepForNotes) return;
|
||||
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.updateStepNotes, {
|
||||
instanceStepId: stepForNotes._id,
|
||||
notes: editedNotes
|
||||
});
|
||||
closeNotesModal();
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao salvar notas';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openUploadModal(step: { _id: Id<'flowInstanceSteps'>; stepName: string }) {
|
||||
stepForUpload = step;
|
||||
uploadFile = null;
|
||||
showUploadModal = true;
|
||||
}
|
||||
|
||||
function closeUploadModal() {
|
||||
showUploadModal = false;
|
||||
stepForUpload = null;
|
||||
uploadFile = null;
|
||||
}
|
||||
|
||||
function handleFileSelect(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) {
|
||||
uploadFile = input.files[0];
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpload() {
|
||||
if (!stepForUpload || !uploadFile) return;
|
||||
|
||||
isUploading = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
// Gerar URL de upload
|
||||
const uploadUrl = await client.mutation(api.flows.generateUploadUrl, {});
|
||||
|
||||
// Fazer upload do arquivo
|
||||
const response = await fetch(uploadUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': uploadFile.type },
|
||||
body: uploadFile
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Falha no upload do arquivo');
|
||||
}
|
||||
|
||||
const { storageId } = await response.json();
|
||||
|
||||
// Registrar o documento
|
||||
await client.mutation(api.flows.registerDocument, {
|
||||
flowInstanceStepId: stepForUpload._id,
|
||||
storageId,
|
||||
name: uploadFile.name
|
||||
});
|
||||
|
||||
closeUploadModal();
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao fazer upload';
|
||||
} finally {
|
||||
isUploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteDocument(documentId: Id<'flowInstanceDocuments'>) {
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.deleteDocument, { id: documentId });
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao excluir documento';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancelInstance() {
|
||||
isProcessing = true;
|
||||
processingError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.cancelInstance, { id: instanceId });
|
||||
showCancelModal = false;
|
||||
} catch (e) {
|
||||
processingError = e instanceof Error ? e.message : 'Erro ao cancelar instância';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status: 'pending' | 'in_progress' | 'completed' | 'blocked') {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return { class: 'badge-ghost', label: 'Pendente', icon: 'clock' };
|
||||
case 'in_progress':
|
||||
return { class: 'badge-info', label: 'Em Progresso', icon: 'play' };
|
||||
case 'completed':
|
||||
return { class: 'badge-success', label: 'Concluído', icon: 'check' };
|
||||
case 'blocked':
|
||||
return { class: 'badge-error', label: 'Bloqueado', icon: 'x' };
|
||||
}
|
||||
}
|
||||
|
||||
function getInstanceStatusBadge(status: 'active' | 'completed' | 'cancelled') {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return { class: 'badge-info', label: 'Em Andamento' };
|
||||
case 'completed':
|
||||
return { class: 'badge-success', label: 'Concluído' };
|
||||
case 'cancelled':
|
||||
return { class: 'badge-error', label: 'Cancelado' };
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number | undefined): string {
|
||||
if (!timestamp) return '-';
|
||||
return new Date(timestamp).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function isStepCurrent(stepId: Id<'flowInstanceSteps'>): boolean {
|
||||
return instanceQuery.data?.instance.currentStepId === stepId;
|
||||
}
|
||||
|
||||
function isOverdue(dueDate: number | undefined): boolean {
|
||||
if (!dueDate) return false;
|
||||
return Date.now() > dueDate;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-10">
|
||||
{#if instanceQuery.isLoading}
|
||||
<div class="flex items-center justify-center py-24">
|
||||
<span class="loading loading-spinner loading-lg text-info"></span>
|
||||
</div>
|
||||
{:else if !instanceQuery.data}
|
||||
<div class="flex flex-col items-center justify-center py-24 text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="text-base-content/30 h-16 w-16"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">Fluxo não encontrado</h3>
|
||||
<a href={resolve('/(dashboard)/licitacoes/fluxos')} class="btn btn-ghost mt-4"
|
||||
>Voltar para lista</a
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
{@const instance = instanceQuery.data.instance}
|
||||
{@const steps = instanceQuery.data.steps}
|
||||
{@const statusBadge = getInstanceStatusBadge(instance.status)}
|
||||
|
||||
<!-- Header -->
|
||||
<section
|
||||
class="border-info/25 from-info/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
|
||||
>
|
||||
<div class="bg-info/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
||||
<div
|
||||
class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"
|
||||
></div>
|
||||
<div class="relative z-10">
|
||||
<div class="mb-6 flex items-center gap-4">
|
||||
<a href={resolve('/(dashboard)/licitacoes/fluxos')} class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
Voltar
|
||||
</a>
|
||||
<span class="badge {statusBadge.class} badge-lg">{statusBadge.label}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<h1 class="text-base-content text-3xl leading-tight font-black sm:text-4xl">
|
||||
{instance.templateName ?? 'Fluxo'}
|
||||
</h1>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{#if instance.contratoId}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="badge badge-outline">Contrato</span>
|
||||
<span class="text-base-content/70 font-medium">{instance.contratoId}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="text-base-content/60 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
Gerente: {instance.managerName ?? '-'}
|
||||
</div>
|
||||
<div class="text-base-content/60 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
Iniciado: {formatDate(instance.startedAt)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if instance.status === 'active'}
|
||||
<button class="btn btn-error btn-outline" onclick={() => (showCancelModal = true)}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
Cancelar Fluxo
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Erro global -->
|
||||
{#if processingError}
|
||||
<div class="alert alert-error">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{processingError}</span>
|
||||
<button class="btn btn-ghost btn-sm" onclick={() => (processingError = null)}>Fechar</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Timeline de Passos -->
|
||||
<section class="bg-base-100 rounded-2xl border p-6 shadow-lg">
|
||||
<h2 class="mb-6 text-xl font-bold">Timeline do Fluxo</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
{#each steps as step, index (step._id)}
|
||||
{@const stepStatus = getStatusBadge(step.status)}
|
||||
{@const isCurrent = isStepCurrent(step._id)}
|
||||
{@const overdue = step.status !== 'completed' && isOverdue(step.dueDate)}
|
||||
|
||||
<div class="relative flex gap-6 {index < steps.length - 1 ? 'pb-6' : ''}">
|
||||
<!-- Linha conectora -->
|
||||
{#if index < steps.length - 1}
|
||||
<div
|
||||
class="absolute top-10 bottom-0 left-5 w-0.5 {step.status === 'completed'
|
||||
? 'bg-success'
|
||||
: 'bg-base-300'}"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<!-- Indicador de status -->
|
||||
<div
|
||||
class="z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full {step.status ===
|
||||
'completed'
|
||||
? 'bg-success text-success-content'
|
||||
: isCurrent
|
||||
? 'bg-info text-info-content'
|
||||
: step.status === 'blocked'
|
||||
? 'bg-error text-error-content'
|
||||
: 'bg-base-300 text-base-content'}"
|
||||
>
|
||||
{#if step.status === 'completed'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
{:else if step.status === 'blocked'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<span class="text-sm font-bold">{index + 1}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo do passo -->
|
||||
<div
|
||||
class="flex-1 rounded-xl border {isCurrent
|
||||
? 'border-info bg-info/5'
|
||||
: 'bg-base-200/50'} p-4"
|
||||
>
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="font-semibold">{step.stepName}</h3>
|
||||
<span class="badge {stepStatus.class} badge-sm">{stepStatus.label}</span>
|
||||
{#if overdue}
|
||||
<span class="badge badge-warning badge-sm">Atrasado</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if step.stepDescription}
|
||||
<p class="text-base-content/60 mt-1 text-sm">{step.stepDescription}</p>
|
||||
{/if}
|
||||
<div class="text-base-content/50 mt-2 flex flex-wrap gap-4 text-xs">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5"
|
||||
/>
|
||||
</svg>
|
||||
{step.setorNome ?? 'Setor não definido'}
|
||||
</span>
|
||||
{#if step.assignedToName}
|
||||
<span class="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
{step.assignedToName}
|
||||
</span>
|
||||
{/if}
|
||||
{#if step.dueDate}
|
||||
<span class="flex items-center gap-1 {overdue ? 'text-warning' : ''}">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
Prazo: {formatDate(step.dueDate)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ações do passo -->
|
||||
{#if instance.status === 'active'}
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#if step.status === 'pending'}
|
||||
<button
|
||||
class="btn btn-info btn-sm"
|
||||
onclick={() => handleStartStep(step._id)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Iniciar
|
||||
</button>
|
||||
{:else if step.status === 'in_progress'}
|
||||
<button
|
||||
class="btn btn-success btn-sm"
|
||||
onclick={() => handleCompleteStep(step._id)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Concluir
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-warning btn-sm"
|
||||
onclick={() => handleBlockStep(step._id)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Bloquear
|
||||
</button>
|
||||
{:else if step.status === 'blocked'}
|
||||
<button
|
||||
class="btn btn-info btn-sm"
|
||||
onclick={() => handleStartStep(step._id)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Desbloquear
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => openReassignModal(step)}
|
||||
aria-label="Reatribuir responsável"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => openNotesModal(step)}
|
||||
aria-label="Editar notas"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => openUploadModal(step)}
|
||||
aria-label="Upload de documento"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Notas -->
|
||||
{#if step.notes}
|
||||
<div class="bg-base-300/50 mt-4 rounded-lg p-3">
|
||||
<p class="text-base-content/70 text-sm whitespace-pre-wrap">{step.notes}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Documentos -->
|
||||
{#if step.documents && step.documents.length > 0}
|
||||
<div class="mt-4">
|
||||
<h4 class="text-base-content/70 mb-2 text-xs font-semibold uppercase">
|
||||
Documentos
|
||||
</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each step.documents as doc (doc._id)}
|
||||
<div class="badge badge-outline gap-2 py-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
{doc.name}
|
||||
<button
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
onclick={() => handleDeleteDocument(doc._id)}
|
||||
aria-label="Excluir documento {doc.name}"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Datas de início/fim -->
|
||||
{#if step.startedAt || step.finishedAt}
|
||||
<div class="text-base-content/40 mt-4 flex gap-4 text-xs">
|
||||
{#if step.startedAt}
|
||||
<span>Iniciado: {formatDate(step.startedAt)}</span>
|
||||
{/if}
|
||||
{#if step.finishedAt}
|
||||
<span>Concluído: {formatDate(step.finishedAt)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<!-- Modal de Reatribuição -->
|
||||
{#if showReassignModal && stepToReassign}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">Reatribuir Responsável</h3>
|
||||
<p class="text-base-content/60 mt-2">
|
||||
Selecione o novo responsável pelo passo <strong>{stepToReassign.stepName}</strong>
|
||||
</p>
|
||||
|
||||
<div class="form-control mt-4">
|
||||
<label class="label" for="assignee-select">
|
||||
<span class="label-text">Responsável</span>
|
||||
</label>
|
||||
<select
|
||||
id="assignee-select"
|
||||
bind:value={newAssigneeId}
|
||||
class="select select-bordered w-full"
|
||||
>
|
||||
<option value="">Selecione um usuário</option>
|
||||
{#if usuariosQuery.data}
|
||||
{#each usuariosQuery.data as usuario (usuario._id)}
|
||||
<option value={usuario._id}>{usuario.nome}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={closeReassignModal} disabled={isProcessing}> Cancelar </button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick={handleReassign}
|
||||
disabled={isProcessing || !newAssigneeId}
|
||||
>
|
||||
{#if isProcessing}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Reatribuir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeReassignModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal de Notas -->
|
||||
{#if showNotesModal && stepForNotes}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">Notas do Passo</h3>
|
||||
<p class="text-base-content/60 mt-2">
|
||||
Adicione ou edite notas para o passo <strong>{stepForNotes.stepName}</strong>
|
||||
</p>
|
||||
|
||||
<div class="form-control mt-4">
|
||||
<label class="label" for="notes-textarea">
|
||||
<span class="label-text">Notas</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="notes-textarea"
|
||||
bind:value={editedNotes}
|
||||
class="textarea textarea-bordered w-full"
|
||||
rows="5"
|
||||
placeholder="Adicione observações, comentários ou informações relevantes..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={closeNotesModal} disabled={isProcessing}> Cancelar </button>
|
||||
<button class="btn btn-primary" onclick={handleSaveNotes} disabled={isProcessing}>
|
||||
{#if isProcessing}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Salvar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="modal-backdrop" onclick={closeNotesModal} aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal de Upload -->
|
||||
{#if showUploadModal && stepForUpload}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">Upload de Documento</h3>
|
||||
<p class="text-base-content/60 mt-2">
|
||||
Anexe um documento ao passo <strong>{stepForUpload.stepName}</strong>
|
||||
</p>
|
||||
|
||||
<div class="form-control mt-4">
|
||||
<label class="label" for="file-input">
|
||||
<span class="label-text">Arquivo</span>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
class="file-input file-input-bordered w-full"
|
||||
onchange={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if uploadFile}
|
||||
<p class="text-base-content/60 mt-2 text-sm">
|
||||
Arquivo selecionado: <strong>{uploadFile.name}</strong>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={closeUploadModal} disabled={isUploading}> Cancelar </button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick={handleUpload}
|
||||
disabled={isUploading || !uploadFile}
|
||||
>
|
||||
{#if isUploading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeUploadModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal de Cancelamento -->
|
||||
{#if showCancelModal}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-error text-lg font-bold">Cancelar Fluxo</h3>
|
||||
<p class="py-4">Tem certeza que deseja cancelar este fluxo?</p>
|
||||
<p class="text-base-content/60 text-sm">
|
||||
Esta ação não pode ser desfeita. Todos os passos pendentes serão marcados como cancelados.
|
||||
</p>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={() => (showCancelModal = false)} disabled={isProcessing}>
|
||||
Voltar
|
||||
</button>
|
||||
<button class="btn btn-error" onclick={handleCancelInstance} disabled={isProcessing}>
|
||||
{#if isProcessing}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Cancelar Fluxo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={() => (showCancelModal = false)}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,410 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Estado dos filtros
|
||||
let statusFilter = $state<'active' | 'completed' | 'cancelled' | undefined>(undefined);
|
||||
|
||||
// Query de instâncias
|
||||
const instancesQuery = useQuery(api.flows.listInstances, () =>
|
||||
statusFilter ? { status: statusFilter } : {}
|
||||
);
|
||||
|
||||
// Query de templates publicados (para o modal de criação)
|
||||
const publishedTemplatesQuery = useQuery(api.flows.listTemplates, {
|
||||
status: 'published'
|
||||
});
|
||||
|
||||
// Modal de criação
|
||||
let showCreateModal = $state(false);
|
||||
let selectedTemplateId = $state<Id<'flowTemplates'> | ''>('');
|
||||
let targetType = $state('');
|
||||
let targetId = $state('');
|
||||
let managerId = $state<Id<'usuarios'> | ''>('');
|
||||
let isCreating = $state(false);
|
||||
let createError = $state<string | null>(null);
|
||||
|
||||
// Query de usuários (para seleção de gerente)
|
||||
const usuariosQuery = useQuery(api.usuarios.listar, {});
|
||||
|
||||
function openCreateModal() {
|
||||
selectedTemplateId = '';
|
||||
targetType = '';
|
||||
targetId = '';
|
||||
managerId = '';
|
||||
createError = null;
|
||||
showCreateModal = true;
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
showCreateModal = false;
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
if (!selectedTemplateId || !targetType.trim() || !targetId.trim() || !managerId) {
|
||||
createError = 'Todos os campos são obrigatórios';
|
||||
return;
|
||||
}
|
||||
|
||||
isCreating = true;
|
||||
createError = null;
|
||||
|
||||
try {
|
||||
const instanceId = await client.mutation(api.flows.instantiateFlow, {
|
||||
flowTemplateId: selectedTemplateId as Id<'flowTemplates'>,
|
||||
targetType: targetType.trim(),
|
||||
targetId: targetId.trim(),
|
||||
managerId: managerId as Id<'usuarios'>
|
||||
});
|
||||
closeCreateModal();
|
||||
goto(`/licitacoes/fluxos/${instanceId}`);
|
||||
} catch (e) {
|
||||
createError = e instanceof Error ? e.message : 'Erro ao criar instância';
|
||||
} finally {
|
||||
isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status: 'active' | 'completed' | 'cancelled') {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return { class: 'badge-info', label: 'Em Andamento' };
|
||||
case 'completed':
|
||||
return { class: 'badge-success', label: 'Concluído' };
|
||||
case 'cancelled':
|
||||
return { class: 'badge-error', label: 'Cancelado' };
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function getProgressPercentage(completed: number, total: number): number {
|
||||
if (total === 0) return 0;
|
||||
return Math.round((completed / total) * 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-10">
|
||||
<!-- Header -->
|
||||
<section
|
||||
class="border-info/25 from-info/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
|
||||
>
|
||||
<div class="bg-info/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
||||
<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/fluxos" class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
Templates
|
||||
</a>
|
||||
<span
|
||||
class="border-info/40 bg-info/10 text-info inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
|
||||
>
|
||||
Execução
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
|
||||
Instâncias de Fluxo
|
||||
</h1>
|
||||
<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
|
||||
Acompanhe e gerencie as execuções de fluxos de trabalho. Visualize o progresso, documentos
|
||||
e responsáveis de cada etapa.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
<!-- Filtro de status -->
|
||||
<select class="select select-bordered" bind:value={statusFilter}>
|
||||
<option value={undefined}>Todos os status</option>
|
||||
<option value="active">Em Andamento</option>
|
||||
<option value="completed">Concluído</option>
|
||||
<option value="cancelled">Cancelado</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-info shadow-lg" onclick={openCreateModal}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Nova Instância
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lista de Instâncias -->
|
||||
<section class="bg-base-100 rounded-2xl border p-6 shadow-lg">
|
||||
{#if instancesQuery.isLoading}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-info"></span>
|
||||
</div>
|
||||
{:else if !instancesQuery.data || instancesQuery.data.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="text-base-content/30 h-16 w-16"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">
|
||||
Nenhuma instância encontrada
|
||||
</h3>
|
||||
<p class="text-base-content/50 mt-2">
|
||||
{statusFilter
|
||||
? 'Não há instâncias com este status.'
|
||||
: 'Clique em "Nova Instância" para iniciar um fluxo.'}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Template</th>
|
||||
<th>Alvo</th>
|
||||
<th>Gerente</th>
|
||||
<th>Progresso</th>
|
||||
<th>Status</th>
|
||||
<th>Iniciado em</th>
|
||||
<th class="text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each instancesQuery.data as instance (instance._id)}
|
||||
{@const statusBadge = getStatusBadge(instance.status)}
|
||||
{@const progressPercent = getProgressPercentage(
|
||||
instance.progress.completed,
|
||||
instance.progress.total
|
||||
)}
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="font-medium">{instance.templateName ?? 'Template desconhecido'}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm">
|
||||
<span class="badge badge-outline badge-sm">{instance.targetType}</span>
|
||||
<span class="text-base-content/60 ml-1">{instance.targetId}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-base-content/70">{instance.managerName ?? '-'}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<progress class="progress progress-info w-20" value={progressPercent} max="100"
|
||||
></progress>
|
||||
<span class="text-base-content/60 text-xs">
|
||||
{instance.progress.completed}/{instance.progress.total}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {statusBadge.class}">{statusBadge.label}</span>
|
||||
</td>
|
||||
<td class="text-base-content/60 text-sm">{formatDate(instance.startedAt)}</td>
|
||||
<td class="text-right">
|
||||
<a href="/licitacoes/fluxos/{instance._id}" class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
Ver
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal de Criação -->
|
||||
{#if showCreateModal}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-2xl">
|
||||
<h3 class="text-lg font-bold">Nova Instância de Fluxo</h3>
|
||||
|
||||
{#if createError}
|
||||
<div class="alert alert-error mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{createError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}}
|
||||
class="mt-4 space-y-4"
|
||||
>
|
||||
<div class="form-control">
|
||||
<label class="label" for="template-select">
|
||||
<span class="label-text">Template de Fluxo</span>
|
||||
</label>
|
||||
<select
|
||||
id="template-select"
|
||||
bind:value={selectedTemplateId}
|
||||
class="select select-bordered w-full"
|
||||
required
|
||||
>
|
||||
<option value="">Selecione um template</option>
|
||||
{#if publishedTemplatesQuery.data}
|
||||
{#each publishedTemplatesQuery.data as template (template._id)}
|
||||
<option value={template._id}>{template.name}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<p class="label">
|
||||
<span class="label-text-alt text-base-content/60"
|
||||
>Apenas templates publicados podem ser instanciados</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="form-control">
|
||||
<label class="label" for="target-type">
|
||||
<span class="label-text">Tipo do Alvo</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="target-type"
|
||||
bind:value={targetType}
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Ex: contrato, projeto"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="target-id">
|
||||
<span class="label-text">Identificador do Alvo</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="target-id"
|
||||
bind:value={targetId}
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Ex: CT-2024-001"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="manager-select">
|
||||
<span class="label-text">Gerente Responsável</span>
|
||||
</label>
|
||||
<select
|
||||
id="manager-select"
|
||||
bind:value={managerId}
|
||||
class="select select-bordered w-full"
|
||||
required
|
||||
>
|
||||
<option value="">Selecione um gerente</option>
|
||||
{#if usuariosQuery.data}
|
||||
{#each usuariosQuery.data as usuario (usuario._id)}
|
||||
<option value={usuario._id}>{usuario.nome}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={closeCreateModal} disabled={isCreating}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-info" disabled={isCreating}>
|
||||
{#if isCreating}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Iniciar Fluxo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeCreateModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -508,9 +508,7 @@
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">Fluxo não encontrado</h3>
|
||||
<a href={resolve('/(dashboard)/licitacoes/fluxos')} class="btn btn-ghost mt-4"
|
||||
>Voltar para lista</a
|
||||
>
|
||||
<a href={resolve('/fluxos')} class="btn btn-ghost mt-4">Voltar para lista</a>
|
||||
</div>
|
||||
{:else}
|
||||
{@const instance = instanceQuery.data.instance}
|
||||
@@ -534,7 +532,7 @@
|
||||
if (typeof window !== 'undefined' && window.history.length > 1) {
|
||||
window.history.back();
|
||||
} else {
|
||||
goto(resolve('/licitacoes/fluxos'));
|
||||
goto(resolve('/fluxos'));
|
||||
}
|
||||
}}
|
||||
aria-label="Voltar para página anterior"
|
||||
514
apps/web/src/routes/(dashboard)/fluxos/templates/+page.svelte
Normal file
514
apps/web/src/routes/(dashboard)/fluxos/templates/+page.svelte
Normal file
@@ -0,0 +1,514 @@
|
||||
<script lang="ts">
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Estado do filtro
|
||||
let statusFilter = $state<'draft' | 'published' | 'archived' | undefined>(undefined);
|
||||
|
||||
// Query de templates
|
||||
const templatesQuery = useQuery(api.flows.listTemplates, () =>
|
||||
statusFilter ? { status: statusFilter } : {}
|
||||
);
|
||||
|
||||
// Modal de criação
|
||||
let showCreateModal = $state(false);
|
||||
let newTemplateName = $state('');
|
||||
let newTemplateDescription = $state('');
|
||||
let isCreating = $state(false);
|
||||
let createError = $state<string | null>(null);
|
||||
|
||||
// Modal de confirmação de exclusão
|
||||
let showDeleteModal = $state(false);
|
||||
let templateToDelete = $state<{
|
||||
_id: Id<'flowTemplates'>;
|
||||
name: string;
|
||||
} | null>(null);
|
||||
let isDeleting = $state(false);
|
||||
let deleteError = $state<string | null>(null);
|
||||
|
||||
function openCreateModal() {
|
||||
newTemplateName = '';
|
||||
newTemplateDescription = '';
|
||||
createError = null;
|
||||
showCreateModal = true;
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
showCreateModal = false;
|
||||
newTemplateName = '';
|
||||
newTemplateDescription = '';
|
||||
createError = null;
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
if (!newTemplateName.trim()) {
|
||||
createError = 'O nome é obrigatório';
|
||||
return;
|
||||
}
|
||||
|
||||
isCreating = true;
|
||||
createError = null;
|
||||
|
||||
try {
|
||||
const templateId = await client.mutation(api.flows.createTemplate, {
|
||||
name: newTemplateName.trim(),
|
||||
description: newTemplateDescription.trim() || undefined
|
||||
});
|
||||
closeCreateModal();
|
||||
// Navegar para o editor
|
||||
goto(resolve(`/fluxos/${templateId}/editor`));
|
||||
} catch (e) {
|
||||
createError = e instanceof Error ? e.message : 'Erro ao criar template';
|
||||
} finally {
|
||||
isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openDeleteModal(template: { _id: Id<'flowTemplates'>; name: string }) {
|
||||
templateToDelete = template;
|
||||
deleteError = null;
|
||||
showDeleteModal = true;
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
showDeleteModal = false;
|
||||
templateToDelete = null;
|
||||
deleteError = null;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!templateToDelete) return;
|
||||
|
||||
isDeleting = true;
|
||||
deleteError = null;
|
||||
|
||||
try {
|
||||
await client.mutation(api.flows.deleteTemplate, {
|
||||
id: templateToDelete._id
|
||||
});
|
||||
closeDeleteModal();
|
||||
} catch (e) {
|
||||
deleteError = e instanceof Error ? e.message : 'Erro ao excluir template';
|
||||
} finally {
|
||||
isDeleting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStatusChange(
|
||||
templateId: Id<'flowTemplates'>,
|
||||
newStatus: 'draft' | 'published' | 'archived'
|
||||
) {
|
||||
try {
|
||||
await client.mutation(api.flows.updateTemplate, {
|
||||
id: templateId,
|
||||
status: newStatus
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Erro ao atualizar status:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status: 'draft' | 'published' | 'archived') {
|
||||
switch (status) {
|
||||
case 'draft':
|
||||
return { class: 'badge-warning', label: 'Rascunho' };
|
||||
case 'published':
|
||||
return { class: 'badge-success', label: 'Publicado' };
|
||||
case 'archived':
|
||||
return { class: 'badge-neutral', label: 'Arquivado' };
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-10">
|
||||
<!-- Header -->
|
||||
<section
|
||||
class="border-secondary/25 from-secondary/10 via-base-100 to-primary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
|
||||
>
|
||||
<div class="bg-secondary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
||||
<div class="bg-primary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<span
|
||||
class="border-secondary/40 bg-secondary/10 text-secondary inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
|
||||
>
|
||||
Gestão de Fluxos
|
||||
</span>
|
||||
<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
|
||||
Templates de Fluxo
|
||||
</h1>
|
||||
<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
|
||||
Crie e gerencie templates de fluxo de trabalho. Templates definem os passos e
|
||||
responsabilidades que serão instanciados para projetos ou contratos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
<!-- Filtro de status -->
|
||||
<select class="select select-bordered" bind:value={statusFilter}>
|
||||
<option value={undefined}>Todos os status</option>
|
||||
<option value="draft">Rascunho</option>
|
||||
<option value="published">Publicado</option>
|
||||
<option value="archived">Arquivado</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-secondary shadow-lg" onclick={openCreateModal}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Novo Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lista de Templates -->
|
||||
<section class="bg-base-100 rounded-2xl border p-6 shadow-lg">
|
||||
{#if templatesQuery.isLoading}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-secondary"></span>
|
||||
</div>
|
||||
{:else if !templatesQuery.data || templatesQuery.data.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="text-base-content/30 h-16 w-16"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">Nenhum template encontrado</h3>
|
||||
<p class="text-base-content/50 mt-2">
|
||||
{statusFilter
|
||||
? 'Não há templates com este status.'
|
||||
: 'Clique em "Novo Template" para criar o primeiro.'}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each templatesQuery.data as template (template._id)}
|
||||
{@const statusBadge = getStatusBadge(template.status)}
|
||||
<article
|
||||
class="card bg-base-200/50 hover:bg-base-200 border transition-all duration-200 hover:shadow-md"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<h2 class="card-title text-lg">{template.name}</h2>
|
||||
<span class="badge {statusBadge.class}">{statusBadge.label}</span>
|
||||
</div>
|
||||
|
||||
{#if template.description}
|
||||
<p class="text-base-content/60 line-clamp-2 text-sm">
|
||||
{template.description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="text-base-content/50 mt-2 flex flex-wrap gap-4 text-xs">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
/>
|
||||
</svg>
|
||||
{template.stepsCount} passos
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
{formatDate(template.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-actions mt-4 justify-between">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost btn-sm" aria-label="Alterar status">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow"
|
||||
role="menu"
|
||||
>
|
||||
{#if template.status !== 'draft'}
|
||||
<li>
|
||||
<button onclick={() => handleStatusChange(template._id, 'draft')}>
|
||||
Voltar para Rascunho
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if template.status !== 'published'}
|
||||
<li>
|
||||
<button onclick={() => handleStatusChange(template._id, 'published')}>
|
||||
Publicar
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if template.status !== 'archived'}
|
||||
<li>
|
||||
<button onclick={() => handleStatusChange(template._id, 'archived')}>
|
||||
Arquivar
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
<li class="mt-2 border-t pt-2">
|
||||
<button class="text-error" onclick={() => openDeleteModal(template)}>
|
||||
Excluir
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={resolve(`/fluxos/${template._id}/editor`)}
|
||||
class="btn btn-secondary btn-sm"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
Editar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Link para Instâncias -->
|
||||
<section class="flex justify-center">
|
||||
<a href={resolve('/fluxos')} class="btn btn-outline btn-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
||||
/>
|
||||
</svg>
|
||||
Ver Fluxos de Trabalho
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal de Criação -->
|
||||
{#if showCreateModal}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">Novo Template de Fluxo</h3>
|
||||
|
||||
{#if createError}
|
||||
<div class="alert alert-error mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{createError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}}
|
||||
class="mt-4 space-y-4"
|
||||
>
|
||||
<div class="form-control">
|
||||
<label class="label" for="template-name">
|
||||
<span class="label-text">Nome do Template</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="template-name"
|
||||
bind:value={newTemplateName}
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Ex: Fluxo de Aprovação de Contrato"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="template-description">
|
||||
<span class="label-text">Descrição (opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="template-description"
|
||||
bind:value={newTemplateDescription}
|
||||
class="textarea textarea-bordered w-full"
|
||||
placeholder="Descreva o propósito deste fluxo..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={closeCreateModal} disabled={isCreating}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-secondary" disabled={isCreating}>
|
||||
{#if isCreating}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Criar e Editar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeCreateModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
{#if showDeleteModal && templateToDelete}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-error text-lg font-bold">Confirmar Exclusão</h3>
|
||||
|
||||
{#if deleteError}
|
||||
<div class="alert alert-error mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{deleteError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="py-4">
|
||||
Tem certeza que deseja excluir o template <strong>{templateToDelete.name}</strong>?
|
||||
</p>
|
||||
<p class="text-base-content/60 text-sm">
|
||||
Esta ação não pode ser desfeita. Templates com instâncias vinculadas não podem ser
|
||||
excluídos.
|
||||
</p>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={closeDeleteModal} disabled={isDeleting}> Cancelar </button>
|
||||
<button class="btn btn-error" onclick={handleDelete} disabled={isDeleting}>
|
||||
{#if isDeleting}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Excluir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeDeleteModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -105,7 +105,7 @@
|
||||
<!-- Grid de Opções -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<a
|
||||
href={resolve('/licitacoes/fluxos')}
|
||||
href={resolve('/fluxos')}
|
||||
class="group border-base-300 from-secondary/10 to-secondary/20 hover:border-secondary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
>
|
||||
<div class="flex h-full flex-col">
|
||||
@@ -135,7 +135,7 @@
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={resolve('/fluxos')}
|
||||
href={resolve('/fluxos/templates')}
|
||||
class="group border-base-300 from-secondary/10 to-secondary/20 hover:border-secondary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
>
|
||||
<div class="flex h-full flex-col">
|
||||
|
||||
@@ -1,402 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Estado dos filtros
|
||||
let statusFilter = $state<'active' | 'completed' | 'cancelled' | undefined>(undefined);
|
||||
|
||||
// Query de instâncias
|
||||
const instancesQuery = useQuery(api.flows.listInstances, () =>
|
||||
statusFilter ? { status: statusFilter } : {}
|
||||
);
|
||||
|
||||
// Query de templates publicados (para o modal de criação)
|
||||
const publishedTemplatesQuery = useQuery(api.flows.listTemplates, {
|
||||
status: 'published'
|
||||
});
|
||||
|
||||
// Modal de criação
|
||||
let showCreateModal = $state(false);
|
||||
let selectedTemplateId = $state<Id<'flowTemplates'> | ''>('');
|
||||
let contratoId = $state<Id<'contratos'> | ''>('');
|
||||
let managerId = $state<Id<'usuarios'> | ''>('');
|
||||
let isCreating = $state(false);
|
||||
let createError = $state<string | null>(null);
|
||||
|
||||
// Query de usuários (para seleção de gerente)
|
||||
const usuariosQuery = useQuery(api.usuarios.listar, {});
|
||||
|
||||
// Query de contratos (para seleção)
|
||||
const contratosQuery = useQuery(api.contratos.listar, {});
|
||||
|
||||
function openCreateModal() {
|
||||
selectedTemplateId = '';
|
||||
contratoId = '';
|
||||
managerId = '';
|
||||
createError = null;
|
||||
showCreateModal = true;
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
showCreateModal = false;
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
if (!selectedTemplateId || !managerId) {
|
||||
createError = 'Template e gerente são obrigatórios';
|
||||
return;
|
||||
}
|
||||
|
||||
isCreating = true;
|
||||
createError = null;
|
||||
|
||||
try {
|
||||
const instanceId = await client.mutation(api.flows.instantiateFlow, {
|
||||
flowTemplateId: selectedTemplateId as Id<'flowTemplates'>,
|
||||
contratoId: contratoId ? (contratoId as Id<'contratos'>) : undefined,
|
||||
managerId: managerId as Id<'usuarios'>
|
||||
});
|
||||
closeCreateModal();
|
||||
goto(`/licitacoes/fluxos/${instanceId}`);
|
||||
} catch (e) {
|
||||
createError = e instanceof Error ? e.message : 'Erro ao criar fluxo';
|
||||
} finally {
|
||||
isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status: 'active' | 'completed' | 'cancelled') {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return { class: 'badge-info', label: 'Em Andamento' };
|
||||
case 'completed':
|
||||
return { class: 'badge-success', label: 'Concluído' };
|
||||
case 'cancelled':
|
||||
return { class: 'badge-error', label: 'Cancelado' };
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function getProgressPercentage(completed: number, total: number): number {
|
||||
if (total === 0) return 0;
|
||||
return Math.round((completed / total) * 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-10">
|
||||
<!-- Header -->
|
||||
<section
|
||||
class="border-info/25 from-info/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
|
||||
>
|
||||
<div class="bg-info/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
|
||||
<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/fluxos" class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
Templates
|
||||
</a>
|
||||
<span
|
||||
class="border-info/40 bg-info/10 text-info inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
|
||||
>
|
||||
Execução
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
|
||||
Fluxos de Trabalho
|
||||
</h1>
|
||||
<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
|
||||
Acompanhe e gerencie os fluxos de trabalho. Visualize o progresso, documentos e
|
||||
responsáveis de cada etapa.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
<!-- Filtro de status -->
|
||||
<select class="select select-bordered" bind:value={statusFilter}>
|
||||
<option value={undefined}>Todos os status</option>
|
||||
<option value="active">Em Andamento</option>
|
||||
<option value="completed">Concluído</option>
|
||||
<option value="cancelled">Cancelado</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-info shadow-lg" onclick={openCreateModal}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Novo Fluxo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lista de Instâncias -->
|
||||
<section class="bg-base-100 rounded-2xl border p-6 shadow-lg">
|
||||
{#if instancesQuery.isLoading}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-info"></span>
|
||||
</div>
|
||||
{:else if !instancesQuery.data || instancesQuery.data.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="text-base-content/30 h-16 w-16"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="text-base-content/70 mt-4 text-lg font-semibold">Nenhum fluxo encontrado</h3>
|
||||
<p class="text-base-content/50 mt-2">
|
||||
{statusFilter
|
||||
? 'Não há fluxos com este status.'
|
||||
: 'Clique em "Novo Fluxo" para iniciar um fluxo.'}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Template</th>
|
||||
<th>Contrato</th>
|
||||
<th>Gerente</th>
|
||||
<th>Progresso</th>
|
||||
<th>Status</th>
|
||||
<th>Iniciado em</th>
|
||||
<th class="text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each instancesQuery.data as instance (instance._id)}
|
||||
{@const statusBadge = getStatusBadge(instance.status)}
|
||||
{@const progressPercent = getProgressPercentage(
|
||||
instance.progress.completed,
|
||||
instance.progress.total
|
||||
)}
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="font-medium">{instance.templateName ?? 'Template desconhecido'}</div>
|
||||
</td>
|
||||
<td>
|
||||
{#if instance.contratoId}
|
||||
<span class="badge badge-outline badge-sm">{instance.contratoId}</span>
|
||||
{:else}
|
||||
<span class="text-base-content/40 text-sm">-</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-base-content/70">{instance.managerName ?? '-'}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<progress class="progress progress-info w-20" value={progressPercent} max="100"
|
||||
></progress>
|
||||
<span class="text-base-content/60 text-xs">
|
||||
{instance.progress.completed}/{instance.progress.total}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {statusBadge.class}">{statusBadge.label}</span>
|
||||
</td>
|
||||
<td class="text-base-content/60 text-sm">{formatDate(instance.startedAt)}</td>
|
||||
<td class="text-right">
|
||||
<a href="/licitacoes/fluxos/{instance._id}" class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
Ver
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal de Criação -->
|
||||
{#if showCreateModal}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-2xl">
|
||||
<h3 class="text-lg font-bold">Novo Fluxo de Trabalho</h3>
|
||||
|
||||
{#if createError}
|
||||
<div class="alert alert-error mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{createError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}}
|
||||
class="mt-4 space-y-4"
|
||||
>
|
||||
<div class="form-control">
|
||||
<label class="label" for="template-select">
|
||||
<span class="label-text">Template de Fluxo</span>
|
||||
</label>
|
||||
<select
|
||||
id="template-select"
|
||||
bind:value={selectedTemplateId}
|
||||
class="select select-bordered w-full"
|
||||
required
|
||||
>
|
||||
<option value="">Selecione um template</option>
|
||||
{#if publishedTemplatesQuery.data}
|
||||
{#each publishedTemplatesQuery.data as template (template._id)}
|
||||
<option value={template._id}>{template.name}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<p class="label">
|
||||
<span class="label-text-alt text-base-content/60"
|
||||
>Apenas templates publicados podem ser instanciados</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="contrato-select">
|
||||
<span class="label-text">Contrato (Opcional)</span>
|
||||
</label>
|
||||
<select
|
||||
id="contrato-select"
|
||||
bind:value={contratoId}
|
||||
class="select select-bordered w-full"
|
||||
>
|
||||
<option value="">Nenhum contrato</option>
|
||||
{#if contratosQuery.data}
|
||||
{#each contratosQuery.data as contrato (contrato._id)}
|
||||
<option value={contrato._id}>{contrato.numero ?? contrato._id}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<p class="label">
|
||||
<span class="label-text-alt text-base-content/60"
|
||||
>Opcional: vincule este fluxo a um contrato específico</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="manager-select">
|
||||
<span class="label-text">Gerente Responsável</span>
|
||||
</label>
|
||||
<select
|
||||
id="manager-select"
|
||||
bind:value={managerId}
|
||||
class="select select-bordered w-full"
|
||||
required
|
||||
>
|
||||
<option value="">Selecione um gerente</option>
|
||||
{#if usuariosQuery.data}
|
||||
{#each usuariosQuery.data as usuario (usuario._id)}
|
||||
<option value={usuario._id}>{usuario.nome}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={closeCreateModal} disabled={isCreating}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-info" disabled={isCreating}>
|
||||
{#if isCreating}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Iniciar Fluxo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeCreateModal}
|
||||
aria-label="Fechar modal"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,3 +0,0 @@
|
||||
export const load = async ({ parent }) => {
|
||||
await parent();
|
||||
};
|
||||
@@ -4,21 +4,112 @@
|
||||
import Breadcrumbs from '$lib/components/layout/Breadcrumbs.svelte';
|
||||
import PageHeader from '$lib/components/layout/PageHeader.svelte';
|
||||
import PageShell from '$lib/components/layout/PageShell.svelte';
|
||||
import GlassCard from '$lib/components/ui/GlassCard.svelte';
|
||||
import TableCard from '$lib/components/ui/TableCard.svelte';
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { ClipboardList, Eye, Plus, X } from 'lucide-svelte';
|
||||
import { ClipboardList, Eye, Plus, X, Copy, FileText, FileSpreadsheet } from 'lucide-svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
import { goto } from '$app/navigation';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { exportarRelatorioPlanejamentosXLSX } from '$lib/utils/planejamentos/relatorioPlanejamentosExcel';
|
||||
import { gerarRelatorioPlanejamentosPDF } from '$lib/utils/planejamentos/relatorioPlanejamentosPDF';
|
||||
import { endOfDay, startOfDay } from 'date-fns';
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
const planejamentosQuery = useQuery(api.planejamentos.list, {});
|
||||
// Filtros
|
||||
let filtroTexto = $state('');
|
||||
let filtroResponsavel = $state<Id<'funcionarios'> | ''>('');
|
||||
let filtroAcao = $state<Id<'acoes'> | ''>('');
|
||||
let filtroInicio = $state('');
|
||||
let filtroFim = $state('');
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'rascunho', label: 'Rascunho' },
|
||||
{ value: 'gerado', label: 'Gerado' },
|
||||
{ value: 'cancelado', label: 'Cancelado' }
|
||||
] as const;
|
||||
type PlanejamentoStatus = (typeof statusOptions)[number]['value'];
|
||||
|
||||
let statusSelected = $state<Record<PlanejamentoStatus, boolean>>({
|
||||
rascunho: false,
|
||||
gerado: false,
|
||||
cancelado: false
|
||||
});
|
||||
|
||||
function getSelectedStatuses(): PlanejamentoStatus[] | undefined {
|
||||
const selected = (Object.entries(statusSelected) as Array<[PlanejamentoStatus, boolean]>)
|
||||
.filter(([, v]) => v)
|
||||
.map(([k]) => k);
|
||||
return selected.length > 0 ? selected : undefined;
|
||||
}
|
||||
|
||||
function getPeriodoInicio(): number | undefined {
|
||||
if (!filtroInicio) return undefined;
|
||||
return startOfDay(new Date(`${filtroInicio}T00:00:00`)).getTime();
|
||||
}
|
||||
function getPeriodoFim(): number | undefined {
|
||||
if (!filtroFim) return undefined;
|
||||
return endOfDay(new Date(`${filtroFim}T23:59:59`)).getTime();
|
||||
}
|
||||
|
||||
function limparFiltros() {
|
||||
filtroTexto = '';
|
||||
filtroResponsavel = '';
|
||||
filtroAcao = '';
|
||||
filtroInicio = '';
|
||||
filtroFim = '';
|
||||
(Object.keys(statusSelected) as PlanejamentoStatus[]).forEach(
|
||||
(k) => (statusSelected[k] = false)
|
||||
);
|
||||
}
|
||||
|
||||
const filtroArgs = () => ({
|
||||
statuses: getSelectedStatuses(),
|
||||
texto: filtroTexto.trim() || undefined,
|
||||
responsavelId: filtroResponsavel ? filtroResponsavel : undefined,
|
||||
acaoId: filtroAcao ? filtroAcao : undefined,
|
||||
periodoInicio: getPeriodoInicio(),
|
||||
periodoFim: getPeriodoFim()
|
||||
});
|
||||
|
||||
const planejamentosQuery = useQuery(api.planejamentos.list, filtroArgs);
|
||||
const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
|
||||
const acoesQuery = useQuery(api.acoes.list, {});
|
||||
|
||||
let planejamentos = $derived(planejamentosQuery.data || []);
|
||||
|
||||
// Relatórios
|
||||
let generatingPDF = $state(false);
|
||||
let generatingXLSX = $state(false);
|
||||
|
||||
async function gerarPDF() {
|
||||
try {
|
||||
generatingPDF = true;
|
||||
// Passa os mesmos filtros da lista (que é uma função)
|
||||
const dados = await client.query(api.planejamentos.gerarRelatorio, filtroArgs());
|
||||
gerarRelatorioPlanejamentosPDF(dados);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
toast.error('Erro ao gerar PDF.');
|
||||
} finally {
|
||||
generatingPDF = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function exportarXLSX() {
|
||||
try {
|
||||
generatingXLSX = true;
|
||||
const dados = await client.query(api.planejamentos.gerarRelatorio, filtroArgs());
|
||||
await exportarRelatorioPlanejamentosXLSX(dados);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
toast.error('Erro ao gerar Excel.');
|
||||
} finally {
|
||||
generatingXLSX = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatStatus(status: string) {
|
||||
switch (status) {
|
||||
case 'rascunho':
|
||||
@@ -60,11 +151,31 @@
|
||||
descricao: '',
|
||||
data: '',
|
||||
responsavelId: '' as string,
|
||||
acaoId: '' as string
|
||||
acaoId: '' as string,
|
||||
sourcePlanningId: '' as string
|
||||
});
|
||||
|
||||
function openCreate() {
|
||||
form = { titulo: '', descricao: '', data: '', responsavelId: '', acaoId: '' };
|
||||
form = {
|
||||
titulo: '',
|
||||
descricao: '',
|
||||
data: '',
|
||||
responsavelId: '',
|
||||
acaoId: '',
|
||||
sourcePlanningId: ''
|
||||
};
|
||||
showCreate = true;
|
||||
}
|
||||
|
||||
function openClone(planning: (typeof planejamentos)[0]) {
|
||||
form = {
|
||||
titulo: `${planning.titulo} (Cópia)`,
|
||||
descricao: planning.descricao,
|
||||
data: planning.data,
|
||||
responsavelId: planning.responsavelId,
|
||||
acaoId: planning.acaoId || '',
|
||||
sourcePlanningId: planning._id
|
||||
};
|
||||
showCreate = true;
|
||||
}
|
||||
|
||||
@@ -85,7 +196,11 @@
|
||||
descricao: form.descricao,
|
||||
data: form.data,
|
||||
responsavelId: form.responsavelId as Id<'funcionarios'>,
|
||||
acaoId: form.acaoId ? (form.acaoId as Id<'acoes'>) : undefined
|
||||
|
||||
acaoId: form.acaoId ? (form.acaoId as Id<'acoes'>) : undefined,
|
||||
sourcePlanningId: form.sourcePlanningId
|
||||
? (form.sourcePlanningId as Id<'planejamentosPedidos'>)
|
||||
: undefined
|
||||
});
|
||||
toast.success('Planejamento criado.');
|
||||
showCreate = false;
|
||||
@@ -116,6 +231,36 @@
|
||||
{/snippet}
|
||||
|
||||
{#snippet actions()}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost gap-2"
|
||||
onclick={gerarPDF}
|
||||
disabled={generatingPDF || generatingXLSX}
|
||||
title="Gerar PDF"
|
||||
>
|
||||
{#if generatingPDF}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{:else}
|
||||
<FileText class="h-5 w-5" />
|
||||
{/if}
|
||||
{generatingPDF ? 'Gerando...' : 'PDF'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost gap-2"
|
||||
onclick={exportarXLSX}
|
||||
disabled={generatingPDF || generatingXLSX}
|
||||
title="Exportar Excel"
|
||||
>
|
||||
{#if generatingXLSX}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{:else}
|
||||
<FileSpreadsheet class="h-5 w-5" />
|
||||
{/if}
|
||||
{generatingXLSX ? 'Exportando...' : 'Excel'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary gap-2 shadow-md transition-all hover:shadow-lg"
|
||||
@@ -127,6 +272,106 @@
|
||||
{/snippet}
|
||||
</PageHeader>
|
||||
|
||||
<GlassCard class="mb-6">
|
||||
<div class="grid gap-4 sm:grid-cols-[1fr_auto] sm:items-end">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5">
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="filtro_texto">
|
||||
<span class="label-text font-semibold">Busca (título/descrição)</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro_texto"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
type="text"
|
||||
placeholder="Digite para pesquisar..."
|
||||
bind:value={filtroTexto}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="filtro_responsavel">
|
||||
<span class="label-text font-semibold">Responsável</span>
|
||||
</label>
|
||||
<select
|
||||
id="filtro_responsavel"
|
||||
class="select select-bordered focus:select-primary w-full"
|
||||
bind:value={filtroResponsavel}
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
{#each funcionariosQuery.data || [] as f (f._id)}
|
||||
<option value={f._id}>{f.nome}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="filtro_acao">
|
||||
<span class="label-text font-semibold">Ação</span>
|
||||
</label>
|
||||
<select
|
||||
id="filtro_acao"
|
||||
class="select select-bordered focus:select-primary w-full"
|
||||
bind:value={filtroAcao}
|
||||
>
|
||||
<option value="">Todas</option>
|
||||
{#each acoesQuery.data || [] as a (a._id)}
|
||||
<option value={a._id}>{a.nome}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="filtro_inicio">
|
||||
<span class="label-text font-semibold">Período (início)</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro_inicio"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
type="date"
|
||||
bind:value={filtroInicio}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="filtro_fim">
|
||||
<span class="label-text font-semibold">Período (fim)</span>
|
||||
</label>
|
||||
<input
|
||||
id="filtro_fim"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
type="date"
|
||||
bind:value={filtroFim}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full md:col-span-3 lg:col-span-5">
|
||||
<div class="label">
|
||||
<span class="label-text font-semibold">Status</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{#each statusOptions as s (s.value)}
|
||||
<label class="label cursor-pointer justify-start gap-2 py-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary checkbox-sm"
|
||||
checked={statusSelected[s.value]}
|
||||
onchange={(e) =>
|
||||
(statusSelected[s.value] = (e.currentTarget as HTMLInputElement).checked)}
|
||||
/>
|
||||
<span class="label-text">{s.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between gap-3 sm:min-w-max sm:justify-end">
|
||||
<div class="text-base-content/70 text-sm">{planejamentos.length} resultado(s)</div>
|
||||
<button type="button" class="btn btn-ghost" onclick={limparFiltros}>Limpar</button>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{#if planejamentosQuery.isLoading}
|
||||
<div class="flex items-center justify-center py-10">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
@@ -140,23 +385,23 @@
|
||||
<table class="table-zebra table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
|
||||
<th class="text-base-content border-base-300 border-b font-bold whitespace-nowrap"
|
||||
>Título</th
|
||||
>
|
||||
<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
|
||||
<th class="text-base-content border-base-300 border-b font-bold whitespace-nowrap"
|
||||
>Data</th
|
||||
>
|
||||
<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
|
||||
<th class="text-base-content border-base-300 border-b font-bold whitespace-nowrap"
|
||||
>Responsável</th
|
||||
>
|
||||
<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
|
||||
<th class="text-base-content border-base-300 border-b font-bold whitespace-nowrap"
|
||||
>Ação</th
|
||||
>
|
||||
<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
|
||||
<th class="text-base-content border-base-300 border-b font-bold whitespace-nowrap"
|
||||
>Status</th
|
||||
>
|
||||
<th
|
||||
class="text-base-content border-base-400 border-b text-right font-bold whitespace-nowrap"
|
||||
class="text-base-content border-base-300 border-b text-right font-bold whitespace-nowrap"
|
||||
>Ações</th
|
||||
>
|
||||
</tr>
|
||||
@@ -167,7 +412,7 @@
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-base-content/60 flex flex-col items-center gap-2">
|
||||
<p class="text-lg font-semibold">Nenhum planejamento encontrado</p>
|
||||
<p class="text-sm">Clique em “Novo planejamento” para criar o primeiro.</p>
|
||||
<p class="text-sm">Tente ajustar os filtros ou crie um novo planejamento.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -184,6 +429,7 @@
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<a
|
||||
href={resolve(`/pedidos/planejamento/${p._id}`)}
|
||||
class="btn btn-ghost btn-sm gap-2"
|
||||
@@ -192,6 +438,15 @@
|
||||
<Eye class="h-4 w-4" />
|
||||
Abrir
|
||||
</a>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm gap-2"
|
||||
onclick={() => openClone(p)}
|
||||
aria-label="Clonar planejamento"
|
||||
>
|
||||
<Copy class="h-4 w-4" />
|
||||
Clonar
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
@@ -214,7 +469,9 @@
|
||||
<X class="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<h3 class="text-lg font-bold">Novo planejamento</h3>
|
||||
<h3 class="text-lg font-bold">
|
||||
{form.sourcePlanningId ? 'Clonar planejamento' : 'Novo planejamento'}
|
||||
</h3>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="form-control w-full md:col-span-2">
|
||||
@@ -299,7 +556,13 @@
|
||||
{#if creating}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
{creating ? 'Criando...' : 'Criar'}
|
||||
{creating
|
||||
? form.sourcePlanningId
|
||||
? 'Clonando...'
|
||||
: 'Criando...'
|
||||
: form.sourcePlanningId
|
||||
? 'Clonar'
|
||||
: 'Criar'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
import { useConvexClient, useQuery } from 'convex-svelte';
|
||||
import { page } from '$app/state';
|
||||
import { resolve } from '$app/paths';
|
||||
import { goto } from '$app/navigation';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Plus, Trash2, X, Save, Edit } from 'lucide-svelte';
|
||||
import { Plus, Trash2, X, Save, Edit, Copy } from 'lucide-svelte';
|
||||
|
||||
const client = useConvexClient();
|
||||
const planejamentoId = $derived(page.params.id as Id<'planejamentosPedidos'>);
|
||||
@@ -323,6 +324,63 @@
|
||||
gerando = false;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Clone/Create Modal logic (duplicated from list page for now) ---
|
||||
let showCreate = $state(false);
|
||||
let creating = $state(false);
|
||||
let createForm = $state({
|
||||
titulo: '',
|
||||
descricao: '',
|
||||
data: '',
|
||||
responsavelId: '' as string,
|
||||
acaoId: '' as string,
|
||||
sourcePlanningId: '' as string
|
||||
});
|
||||
|
||||
function openClone() {
|
||||
if (!planejamento) return;
|
||||
createForm = {
|
||||
titulo: `${planejamento.titulo} (Cópia)`,
|
||||
descricao: planejamento.descricao,
|
||||
data: planejamento.data,
|
||||
responsavelId: planejamento.responsavelId,
|
||||
acaoId: planejamento.acaoId || '',
|
||||
sourcePlanningId: planejamento._id
|
||||
};
|
||||
showCreate = true;
|
||||
}
|
||||
|
||||
function closeCreate() {
|
||||
showCreate = false;
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
if (!createForm.titulo.trim()) return toast.error('Informe um título.');
|
||||
if (!createForm.descricao.trim()) return toast.error('Informe uma descrição.');
|
||||
if (!createForm.data.trim()) return toast.error('Informe uma data.');
|
||||
if (!createForm.responsavelId) return toast.error('Selecione um responsável.');
|
||||
|
||||
creating = true;
|
||||
try {
|
||||
const id = await client.mutation(api.planejamentos.create, {
|
||||
titulo: createForm.titulo,
|
||||
descricao: createForm.descricao,
|
||||
data: createForm.data,
|
||||
responsavelId: createForm.responsavelId as Id<'funcionarios'>,
|
||||
acaoId: createForm.acaoId ? (createForm.acaoId as Id<'acoes'>) : undefined,
|
||||
sourcePlanningId: createForm.sourcePlanningId
|
||||
? (createForm.sourcePlanningId as Id<'planejamentosPedidos'>)
|
||||
: undefined
|
||||
});
|
||||
toast.success('Planejamento clonado com sucesso.');
|
||||
showCreate = false;
|
||||
await goto(resolve(`/pedidos/planejamento/${id}`));
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message);
|
||||
} finally {
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageShell>
|
||||
@@ -375,6 +433,10 @@
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 flex-col items-end gap-2">
|
||||
<button class="btn btn-ghost btn-sm gap-2" onclick={openClone}>
|
||||
<Copy class="h-4 w-4" />
|
||||
Clonar
|
||||
</button>
|
||||
{#if isRascunho}
|
||||
{#if editingHeader}
|
||||
<div class="flex gap-2">
|
||||
@@ -803,9 +865,9 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={closeAddItemModal} disabled={addingItem}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="button" class="btn" onclick={closeAddItemModal} disabled={addingItem}
|
||||
>Cancelar</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@@ -815,15 +877,123 @@
|
||||
{#if addingItem}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
{addingItem ? 'Adicionando...' : 'Adicionar'}
|
||||
Adicionar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="modal-backdrop" onclick={closeAddItemModal} aria-label="Fechar"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showCreate}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-2xl">
|
||||
<button
|
||||
type="button"
|
||||
class="modal-backdrop"
|
||||
onclick={closeAddItemModal}
|
||||
class="btn btn-sm btn-circle absolute top-2 right-2"
|
||||
onclick={closeCreate}
|
||||
aria-label="Fechar modal"
|
||||
disabled={creating}
|
||||
>
|
||||
<X class="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<h3 class="text-lg font-bold">Clonar planejamento</h3>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="form-control w-full md:col-span-2">
|
||||
<label class="label" for="c_titulo">
|
||||
<span class="label-text font-semibold">Título</span>
|
||||
</label>
|
||||
<input
|
||||
id="c_titulo"
|
||||
type="text"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
bind:value={createForm.titulo}
|
||||
disabled={creating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full md:col-span-2">
|
||||
<label class="label" for="c_descricao">
|
||||
<span class="label-text font-semibold">Descrição</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="c_descricao"
|
||||
class="textarea textarea-bordered focus:textarea-primary w-full"
|
||||
rows="4"
|
||||
bind:value={createForm.descricao}
|
||||
disabled={creating}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="c_data">
|
||||
<span class="label-text font-semibold">Data</span>
|
||||
</label>
|
||||
<input
|
||||
id="c_data"
|
||||
type="date"
|
||||
class="input input-bordered focus:input-primary w-full"
|
||||
bind:value={createForm.data}
|
||||
disabled={creating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="c_responsavel">
|
||||
<span class="label-text font-semibold">Responsável</span>
|
||||
</label>
|
||||
<select
|
||||
id="c_responsavel"
|
||||
class="select select-bordered focus:select-primary w-full"
|
||||
bind:value={createForm.responsavelId}
|
||||
disabled={creating || funcionariosQuery.isLoading}
|
||||
>
|
||||
<option value="">Selecione...</option>
|
||||
{#each funcionariosQuery.data || [] as f (f._id)}
|
||||
<option value={f._id}>{f.nome}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full md:col-span-2">
|
||||
<label class="label" for="c_acao">
|
||||
<span class="label-text font-semibold">Ação (opcional)</span>
|
||||
</label>
|
||||
<select
|
||||
id="c_acao"
|
||||
class="select select-bordered focus:select-primary w-full"
|
||||
bind:value={createForm.acaoId}
|
||||
disabled={creating || acoesQuery.isLoading}
|
||||
>
|
||||
<option value="">Nenhuma</option>
|
||||
{#each acoesQuery.data || [] as a (a._id)}
|
||||
<option value={a._id}>{a.nome}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={closeCreate} disabled={creating}
|
||||
>Cancelar</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onclick={handleCreate}
|
||||
disabled={creating}
|
||||
>
|
||||
{#if creating}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Clonar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="modal-backdrop" onclick={closeCreate} aria-label="Fechar"
|
||||
></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -19,26 +19,47 @@ function normalizeOptionalString(value: string | undefined): string | undefined
|
||||
export const list = query({
|
||||
args: {
|
||||
status: v.optional(v.union(v.literal('rascunho'), v.literal('gerado'), v.literal('cancelado'))),
|
||||
responsavelId: v.optional(v.id('funcionarios'))
|
||||
statuses: v.optional(
|
||||
v.array(v.union(v.literal('rascunho'), v.literal('gerado'), v.literal('cancelado')))
|
||||
),
|
||||
responsavelId: v.optional(v.id('funcionarios')),
|
||||
acaoId: v.optional(v.id('acoes')),
|
||||
texto: v.optional(v.string()),
|
||||
periodoInicio: v.optional(v.number()),
|
||||
periodoFim: v.optional(v.number())
|
||||
},
|
||||
handler: async (ctx, args) => {
|
||||
const status = args.status;
|
||||
const responsavelId = args.responsavelId;
|
||||
const { periodoInicio, periodoFim, texto } = args;
|
||||
|
||||
let base: Doc<'planejamentosPedidos'>[] = [];
|
||||
let base = await ctx.db.query('planejamentosPedidos').collect();
|
||||
|
||||
if (responsavelId) {
|
||||
base = await ctx.db
|
||||
.query('planejamentosPedidos')
|
||||
.withIndex('by_responsavelId', (q) => q.eq('responsavelId', responsavelId))
|
||||
.collect();
|
||||
} else if (status) {
|
||||
base = await ctx.db
|
||||
.query('planejamentosPedidos')
|
||||
.withIndex('by_status', (q) => q.eq('status', status))
|
||||
.collect();
|
||||
} else {
|
||||
base = await ctx.db.query('planejamentosPedidos').collect();
|
||||
// Filtros em memória (devido à complexidade de múltiplos índices)
|
||||
if (args.responsavelId) {
|
||||
base = base.filter((p) => p.responsavelId === args.responsavelId);
|
||||
}
|
||||
if (args.acaoId) {
|
||||
base = base.filter((p) => p.acaoId === args.acaoId);
|
||||
}
|
||||
|
||||
// Status simples ou múltiplo
|
||||
if (args.statuses && args.statuses.length > 0) {
|
||||
base = base.filter((p) => args.statuses!.includes(p.status));
|
||||
} else if (args.status) {
|
||||
base = base.filter((p) => p.status === args.status);
|
||||
}
|
||||
|
||||
if (periodoInicio) {
|
||||
base = base.filter((p) => p.data >= new Date(periodoInicio).toISOString().split('T')[0]);
|
||||
}
|
||||
if (periodoFim) {
|
||||
base = base.filter((p) => p.data <= new Date(periodoFim).toISOString().split('T')[0]);
|
||||
}
|
||||
|
||||
if (texto) {
|
||||
const t = texto.toLowerCase();
|
||||
base = base.filter(
|
||||
(p) => p.titulo.toLowerCase().includes(t) || p.descricao.toLowerCase().includes(t)
|
||||
);
|
||||
}
|
||||
|
||||
base.sort((a, b) => b.criadoEm - a.criadoEm);
|
||||
@@ -59,6 +80,108 @@ export const list = query({
|
||||
}
|
||||
});
|
||||
|
||||
export const gerarRelatorio = query({
|
||||
args: {
|
||||
statuses: v.optional(
|
||||
v.array(v.union(v.literal('rascunho'), v.literal('gerado'), v.literal('cancelado')))
|
||||
),
|
||||
responsavelId: v.optional(v.id('funcionarios')),
|
||||
acaoId: v.optional(v.id('acoes')),
|
||||
texto: v.optional(v.string()),
|
||||
periodoInicio: v.optional(v.number()),
|
||||
periodoFim: v.optional(v.number())
|
||||
},
|
||||
handler: async (ctx, args) => {
|
||||
// Reutilizar lógica de filtro
|
||||
let base = await ctx.db.query('planejamentosPedidos').collect();
|
||||
|
||||
if (args.responsavelId) {
|
||||
base = base.filter((p) => p.responsavelId === args.responsavelId);
|
||||
}
|
||||
if (args.acaoId) {
|
||||
base = base.filter((p) => p.acaoId === args.acaoId);
|
||||
}
|
||||
if (args.statuses && args.statuses.length > 0) {
|
||||
base = base.filter((p) => args.statuses!.includes(p.status));
|
||||
}
|
||||
if (args.periodoInicio) {
|
||||
base = base.filter(
|
||||
(p) => p.data >= new Date(args.periodoInicio!).toISOString().split('T')[0]
|
||||
);
|
||||
}
|
||||
if (args.periodoFim) {
|
||||
base = base.filter((p) => p.data <= new Date(args.periodoFim!).toISOString().split('T')[0]);
|
||||
}
|
||||
if (args.texto) {
|
||||
const t = args.texto.toLowerCase();
|
||||
base = base.filter(
|
||||
(p) => p.titulo.toLowerCase().includes(t) || p.descricao.toLowerCase().includes(t)
|
||||
);
|
||||
}
|
||||
|
||||
base.sort((a, b) => b.criadoEm - a.criadoEm);
|
||||
|
||||
// Enriquecer dados
|
||||
const planejamentosEnriquecidos = await Promise.all(
|
||||
base.map(async (p) => {
|
||||
const [responsavel, acao, itens] = await Promise.all([
|
||||
ctx.db.get(p.responsavelId),
|
||||
p.acaoId ? ctx.db.get(p.acaoId) : Promise.resolve(null),
|
||||
ctx.db
|
||||
.query('planejamentoItens')
|
||||
.withIndex('by_planejamentoId', (q) => q.eq('planejamentoId', p._id))
|
||||
.collect()
|
||||
]);
|
||||
|
||||
let valorEstimadoTotal = 0;
|
||||
for (const item of itens) {
|
||||
// Corrigir string '1.000,00' -> number
|
||||
const val = parseFloat(
|
||||
item.valorEstimado.replace(/\./g, '').replace(',', '.').replace('R$', '').trim()
|
||||
);
|
||||
if (!isNaN(val)) valorEstimadoTotal += val * item.quantidade;
|
||||
}
|
||||
|
||||
return {
|
||||
...p,
|
||||
responsavelNome: responsavel?.nome ?? 'Desconhecido',
|
||||
acaoNome: acao?.nome ?? undefined,
|
||||
itensCount: itens.length,
|
||||
valorEstimadoTotal
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Calcular resumo
|
||||
const totalPlanejamentos = base.length;
|
||||
const totalValorEstimado = planejamentosEnriquecidos.reduce(
|
||||
(acc, curr) => acc + curr.valorEstimadoTotal,
|
||||
0
|
||||
);
|
||||
|
||||
const totalPorStatus = [
|
||||
{ status: 'rascunho', count: 0 },
|
||||
{ status: 'gerado', count: 0 },
|
||||
{ status: 'cancelado', count: 0 }
|
||||
];
|
||||
|
||||
base.forEach((p) => {
|
||||
const st = totalPorStatus.find((s) => s.status === p.status);
|
||||
if (st) st.count++;
|
||||
});
|
||||
|
||||
return {
|
||||
filtros: args,
|
||||
resumo: {
|
||||
totalPlanejamentos,
|
||||
totalValorEstimado,
|
||||
totalPorStatus
|
||||
},
|
||||
planejamentos: planejamentosEnriquecidos
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export const get = query({
|
||||
args: { id: v.id('planejamentosPedidos') },
|
||||
handler: async (ctx, args) => {
|
||||
@@ -177,7 +300,8 @@ export const create = mutation({
|
||||
descricao: v.string(),
|
||||
data: v.string(),
|
||||
responsavelId: v.id('funcionarios'),
|
||||
acaoId: v.optional(v.id('acoes'))
|
||||
acaoId: v.optional(v.id('acoes')),
|
||||
sourcePlanningId: v.optional(v.id('planejamentosPedidos'))
|
||||
},
|
||||
returns: v.id('planejamentosPedidos'),
|
||||
handler: async (ctx, args) => {
|
||||
@@ -192,7 +316,7 @@ export const create = mutation({
|
||||
if (!descricao) throw new Error('Informe uma descrição.');
|
||||
if (!data) throw new Error('Informe uma data.');
|
||||
|
||||
return await ctx.db.insert('planejamentosPedidos', {
|
||||
const newItemId = await ctx.db.insert('planejamentosPedidos', {
|
||||
titulo,
|
||||
descricao,
|
||||
data,
|
||||
@@ -203,6 +327,30 @@ export const create = mutation({
|
||||
criadoEm: now,
|
||||
atualizadoEm: now
|
||||
});
|
||||
|
||||
const sourcePlanningId = args.sourcePlanningId;
|
||||
|
||||
if (sourcePlanningId) {
|
||||
const sourceItems = await ctx.db
|
||||
.query('planejamentoItens')
|
||||
.withIndex('by_planejamentoId', (q) => q.eq('planejamentoId', sourcePlanningId))
|
||||
.collect();
|
||||
|
||||
for (const item of sourceItems) {
|
||||
await ctx.db.insert('planejamentoItens', {
|
||||
planejamentoId: newItemId,
|
||||
objetoId: item.objetoId,
|
||||
quantidade: item.quantidade,
|
||||
valorEstimado: item.valorEstimado,
|
||||
numeroDfd: item.numeroDfd,
|
||||
// Não copiamos o pedidoId pois é um novo planejamento
|
||||
criadoEm: now,
|
||||
atualizadoEm: now
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return newItemId;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user