114:"ExplicitChatIdProvider" 115:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7c","$8d","$7f","$7e","$8e","$87","$82","$8f","$7d","$85","$90","$80","$91","$92","$84","$89","$93","$8a","$88","$94","$83","$95","$86","$96","$97"],"$114"] 116:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7c","$8d","$7f","$7e","$8e","$87","$82","$8f","$7d","$85","$90","$80","$91","$92","$84","$89","$93","$8a","$88","$94","$83","$95","$86","$96","$97"],"SWRDataProvider"] 119:[] 11a:[["b_1YGVCneTxA5",null],["b_RxucR1srxMo",null],["b_lvb6kjPgSgx",null],["b_u8jpkkBvt3n",null],["b_S7IQ37qSbZE",null],["b_P6iF5R1hyMe",null],["b_3J6Cm56zpsW",null],["b_lKHw7ZTgc69",null],["b_37c1zJrqr7t",null],["b_7e3XNHGK73h",null],["b_57KCKei4llO",null],["b_SZ17F6gxq9S",null],["b_FP7BnprTMKq",null],["b_6F52elQAPM7",null]] 11b:[["b_1YGVCneTxA5",{"templateVersionId":null,"templateCanonId":null}],["b_RxucR1srxMo",{"templateVersionId":null,"templateCanonId":null}],["b_lvb6kjPgSgx",{"templateVersionId":null,"templateCanonId":null}],["b_u8jpkkBvt3n",{"templateVersionId":null,"templateCanonId":null}],["b_S7IQ37qSbZE",{"templateVersionId":null,"templateCanonId":null}],["b_P6iF5R1hyMe",{"templateVersionId":null,"templateCanonId":null}],["b_3J6Cm56zpsW",{"templateVersionId":null,"templateCanonId":null}],["b_lKHw7ZTgc69",{"templateVersionId":null,"templateCanonId":null}],["b_37c1zJrqr7t",{"templateVersionId":null,"templateCanonId":null}],["b_7e3XNHGK73h",{"templateVersionId":null,"templateCanonId":null}],["b_57KCKei4llO",{"templateVersionId":null,"templateCanonId":null}],["b_SZ17F6gxq9S",{"templateVersionId":null,"templateCanonId":null}],["b_FP7BnprTMKq",{"templateVersionId":null,"templateCanonId":null}],["b_6F52elQAPM7",{"templateVersionId":null,"templateCanonId":null}]] 11c:[["b_ZjNOgsXeKyT","$D2026-01-09T13:30:16.131Z"],["b_zI84RlyBolL","$D2026-01-09T13:32:00.187Z"],["b_tHOFbuBZAXc","$D2026-01-09T13:32:32.286Z"],["b_JPwsS5XJ8ZL","$D2026-01-09T13:33:26.341Z"],["b_VZVgoPLEBw8","$D2026-01-09T13:34:09.353Z"],["b_xqCNqBBteLL","$D2026-01-09T13:34:53.398Z"],["b_x1ej9rEgolq","$D2026-01-09T14:03:32.202Z"],["b_AOJZo4FvW2H","$D2026-01-09T14:03:40.587Z"],["b_MRCfbkE9RuD","$D2026-01-09T14:03:55.933Z"],["b_qYVFlTJvY05","$D2026-01-09T14:05:17.765Z"],["b_0ur5av1NO8N","$D2026-01-09T14:06:51.896Z"],["b_K3y8jVsOPE2","$D2026-01-09T14:07:51.929Z"],["b_HqM1hI2tYxa","$D2026-01-09T14:08:35.698Z"],["b_Tn8OgGKcd9U","$D2026-01-09T14:09:50.725Z"],["b_8UPLREnvMPe","$D2026-01-09T14:10:32.722Z"],["b_stf9LLws1sI","$D2026-01-09T14:16:47.076Z"],["b_95lm0sOfMot","$D2026-01-09T14:17:14.317Z"],["b_TPTJqxCKOnl","$D2026-01-09T14:18:20.149Z"],["b_xvE8LzHzPky","$D2026-01-09T14:19:14.950Z"],["b_jTPWl3W219p","$D2026-01-09T14:20:36.376Z"],["b_a1OHIymxJWM","$D2026-01-09T14:20:48.418Z"],["b_Xs78NzjZwiM","$D2026-01-09T14:21:25.710Z"],["b_ZZa0wTK8w5C","$D2026-01-09T14:22:05.253Z"],["b_aklqovxob97","$D2026-01-11T00:51:30.228Z"],["b_N0ScDxfkgHj","$D2026-01-11T00:54:09.222Z"],["b_9H1o9AG1cU8","$D2026-01-11T00:55:37.780Z"],["b_dW2SM47ucEa","$D2026-01-11T00:55:39.900Z"],["b_9GdNHM87JC4","$D2026-01-11T00:55:53.495Z"],["b_2sTKHs6hT6J","$D2026-01-11T00:56:04.482Z"],["b_7VwxvjxTrTe","$D2026-01-11T00:56:26.542Z"],["b_tZSAgFcOtB2","$D2026-01-11T00:56:39.520Z"],["b_Q34R43sxSLC","$D2026-01-11T00:57:41.676Z"],["b_ZbaZ7QMlZ4d","$D2026-01-11T00:58:35.715Z"],["b_Ec6cNQN5IIH","$D2026-01-11T00:59:13.506Z"],["b_FP9T3gvYtZl","$D2026-01-11T01:00:02.713Z"],["b_xgZWE9sclwm","$D2026-01-11T01:01:14.409Z"],["b_SUei813fu5Z","$D2026-01-11T01:01:34.950Z"],["b_FweeqpmOD9M","$D2026-01-11T01:12:47.252Z"],["b_dqvR1x2i4vF","$D2026-01-11T01:13:07.683Z"],["b_4YxiehPDumT","$D2026-01-11T01:22:45.827Z"],["b_TL4aBE1dEcb","$D2026-01-11T01:23:58.406Z"],["b_aX7nhbTSITP","$D2026-01-11T01:39:48.181Z"],["b_PlxByQZ5tCr","$D2026-01-11T01:40:33.873Z"],["b_oYinhpAJ8Of","$D2026-01-11T01:48:08.846Z"],["b_1T6eqxiEY86","$D2026-01-11T01:48:53.476Z"],["b_EuWhhcMYo92","$D2026-01-11T01:49:40.071Z"],["b_fZWfWRmlGm6","$D2026-01-11T02:02:47.215Z"],["b_In0STCEVdHq","$D2026-01-11T02:03:32.724Z"],["b_TqSRGmFZlC1","$D2026-01-11T02:04:29.475Z"],["b_1It9TRWj6MK","$D2026-01-11T02:06:24.626Z"],["b_2EQsHqJOe6c","$D2026-01-11T02:08:16.464Z"],["b_XcwTS9F9Nb9","$D2026-01-11T02:10:34.559Z"],["b_dxPlKPnLG2B","$D2026-01-11T02:19:18.469Z"],["b_ipmDbCQsl2z","$D2026-01-11T02:19:28.826Z"],["b_MAdVc9P45Zl","$D2026-01-11T02:20:35.523Z"],["b_d6KkffwBMPc","$D2026-01-11T02:22:05.654Z"],["b_SDxbH85qXgv","$D2026-01-11T02:36:00.335Z"],["b_B3WzDAOlWLF","$D2026-01-11T02:36:32.919Z"],["b_2LwN7uVAnLQ","$D2026-01-11T02:38:10.224Z"],["b_QfTtlME4jms","$D2026-01-11T02:58:52.677Z"],["b_7qWcKW3TCl8","$D2026-01-11T03:02:22.745Z"],["b_ZGx9HKRZY5w","$D2026-01-11T16:55:08.781Z"],["b_jDHhcRqUXKc","$D2026-01-11T16:58:04.212Z"],["b_lPsxLU9JC8M","$D2026-01-11T16:59:59.486Z"],["b_9zCUNiUeViB","$D2026-01-11T17:15:45.391Z"],["b_9PNpiIO8rUj","$D2026-01-11T17:28:20.807Z"],["b_yWm5dDOW8TZ","$D2026-01-11T17:49:47.491Z"],["b_TvD6aNnmOgd","$D2026-01-11T17:50:53.793Z"],["b_S8FL6znPGol","$D2026-01-11T18:11:19.517Z"],["b_43iGHWMLlwC","$D2026-01-11T18:18:04.412Z"],["b_lCzwiZrh9SN","$D2026-01-27T12:41:09.346Z"],["b_HDnxeqNQKuO","$D2026-01-27T12:41:31.865Z"],["b_aNQVVf3ZVXm","$D2026-01-27T12:42:09.052Z"],["b_La89jYsTFxm","$D2026-01-27T12:42:27.523Z"],["b_kYrwgC2d2Cs","$D2026-01-27T12:42:42.758Z"],["b_bSuiQt8TnvT","$D2026-01-27T12:43:16.860Z"],["b_R6KajmoNCjc","$D2026-01-27T12:43:30.064Z"],["b_xz016Yi8lKY","$D2026-01-27T12:43:53.246Z"],["b_QXfAvlCUaBT","$D2026-01-27T12:44:31.123Z"],["b_EBuO8AQZO51","$D2026-01-27T12:44:56.043Z"],["b_nXF1QKVqwNU","$D2026-01-27T12:45:23.202Z"],["b_1YGVCneTxA5","$D2026-01-27T12:53:19.641Z"],["b_RxucR1srxMo","$D2026-01-27T12:53:41.460Z"],["b_lvb6kjPgSgx","$D2026-01-27T12:54:14.763Z"],["b_u8jpkkBvt3n","$D2026-01-27T13:41:58.515Z"],["b_S7IQ37qSbZE","$D2026-01-27T13:42:21.677Z"],["b_P6iF5R1hyMe","$D2026-01-27T13:42:32.537Z"],["b_3J6Cm56zpsW","$D2026-01-27T13:42:41.665Z"],["b_lKHw7ZTgc69","$D2026-01-27T13:42:53.798Z"],["b_37c1zJrqr7t","$D2026-01-27T13:43:20.324Z"],["b_7e3XNHGK73h","$D2026-01-27T13:43:45.187Z"],["b_57KCKei4llO","$D2026-01-27T13:44:06.818Z"],["b_SZ17F6gxq9S","$D2026-01-27T13:44:23.611Z"],["b_FP7BnprTMKq","$D2026-01-27T13:44:39.249Z"],["b_6F52elQAPM7","$D2026-01-27T13:45:11.318Z"]] 11d:[["b_1YGVCneTxA5",false],["b_RxucR1srxMo",false],["b_lvb6kjPgSgx",false],["b_u8jpkkBvt3n",false],["b_S7IQ37qSbZE",false],["b_P6iF5R1hyMe",false],["b_3J6Cm56zpsW",false],["b_lKHw7ZTgc69",false],["b_37c1zJrqr7t",false],["b_7e3XNHGK73h",false],["b_57KCKei4llO",false],["b_SZ17F6gxq9S",false],["b_FP7BnprTMKq",false],["b_6F52elQAPM7",false]] 11e:[["b_1YGVCneTxA5","$undefined"],["b_RxucR1srxMo","$undefined"],["b_lvb6kjPgSgx","$undefined"],["b_u8jpkkBvt3n","$undefined"],["b_S7IQ37qSbZE","$undefined"],["b_P6iF5R1hyMe","$undefined"],["b_3J6Cm56zpsW","$undefined"],["b_lKHw7ZTgc69","$undefined"],["b_37c1zJrqr7t","$undefined"],["b_7e3XNHGK73h","$undefined"],["b_57KCKei4llO","$undefined"],["b_SZ17F6gxq9S","$undefined"],["b_FP7BnprTMKq","$undefined"],["b_6F52elQAPM7",{"git":{"ref":"main","sha":"150c21927ef369e3002e080d3a8527f07fa2e79e","type":"github","repoId":0,"repoName":"v0-1-ZcLRuMGA1VhviHfHXVcvCVjN-svxgnkmERNN","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] 11f:[["b_1YGVCneTxA5",null],["b_RxucR1srxMo",null],["b_lvb6kjPgSgx",null],["b_u8jpkkBvt3n",null],["b_S7IQ37qSbZE",null],["b_P6iF5R1hyMe",null],["b_3J6Cm56zpsW",null],["b_lKHw7ZTgc69",null],["b_37c1zJrqr7t",null],["b_7e3XNHGK73h",null],["b_57KCKei4llO",null],["b_SZ17F6gxq9S",null],["b_FP7BnprTMKq",null],["b_6F52elQAPM7",null]] 120:[["b_1YGVCneTxA5",true],["b_RxucR1srxMo",true],["b_lvb6kjPgSgx",true],["b_u8jpkkBvt3n",true],["b_S7IQ37qSbZE",true],["b_P6iF5R1hyMe",true],["b_3J6Cm56zpsW",true],["b_lKHw7ZTgc69",true],["b_37c1zJrqr7t",true],["b_7e3XNHGK73h",true],["b_57KCKei4llO",true],["b_SZ17F6gxq9S",true],["b_FP7BnprTMKq",true],["b_6F52elQAPM7",true]] 121:[["b_1YGVCneTxA5",true],["b_RxucR1srxMo",true],["b_lvb6kjPgSgx",true],["b_u8jpkkBvt3n",true],["b_S7IQ37qSbZE",true],["b_P6iF5R1hyMe",true],["b_3J6Cm56zpsW",true],["b_lKHw7ZTgc69",true],["b_37c1zJrqr7t",true],["b_7e3XNHGK73h",true],["b_57KCKei4llO",true],["b_SZ17F6gxq9S",true],["b_FP7BnprTMKq",true],["b_6F52elQAPM7",true]] 122:[] 123:Tb4433,[V0_FILE]javascript:file="server.js" isEdit="true" isMerged="true" // ============================================ // TEXTILMANAGER ERP - Sistema de Gestão Têxtil // Backend: Node.js + Express + SQLite3 // ============================================ const express = require("express") const sqlite3 = require("sqlite3").verbose() const bodyParser = require("body-parser") const session = require("express-session") const path = require("path") const app = express() const PORT = 3000 // ============================================ // CONFIGURAÇÃO DO MIDDLEWARE // ============================================ app.use(bodyParser.urlencoded({ extended: true })) app.use(bodyParser.json()) app.use(express.static("public")) // Configuração de sessão para autenticação app.use( session({ secret: "textil-erp-secret-key-2024", resave: false, saveUninitialized: false, cookie: { maxAge: 24 * 60 * 60 * 1000 }, // 24 horas }), ) // Configuração do EJS app.set("view engine", "ejs") app.set("views", path.join(__dirname, "views")) // ============================================ // CONFIGURAÇÃO DO BANCO DE DADOS SQLite // ============================================ const db = new sqlite3.Database("./textil_erp.db", (err) => { if (err) { console.error("❌ Erro ao conectar ao banco de dados:", err.message) } else { console.log("✓ Conectado ao banco de dados SQLite (textil_erp.db)") } }) // Função para inicializar as tabelas function inicializarBancoDeDados() { db.serialize(() => { // Tabela de Usuários db.run( ` CREATE TABLE IF NOT EXISTS usuarios ( id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL UNIQUE, password TEXT NOT NULL, nome TEXT NOT NULL, email TEXT, nivel TEXT DEFAULT 'operador', created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela usuarios:", err) else console.log('✓ Tabela "usuarios" verificada/criada') // Inserir usuário admin padrão db.run(` INSERT OR IGNORE INTO usuarios (username, password, nome, nivel) VALUES ('admin', 'admin', 'Administrador', 'admin') `) }, ) // Tabela de Locais/Salas db.run( ` CREATE TABLE IF NOT EXISTS locais ( id INTEGER PRIMARY KEY AUTOINCREMENT, nome TEXT NOT NULL UNIQUE, descricao TEXT, tipo TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela locais:", err) else console.log('✓ Tabela "locais" verificada/criada') }, ) // Tabela de Produtos Gerais (Almoxarifado) db.run( ` CREATE TABLE IF NOT EXISTS produtos ( id INTEGER PRIMARY KEY AUTOINCREMENT, codigo TEXT UNIQUE, nome TEXT NOT NULL, descricao TEXT, categoria TEXT, unidade TEXT NOT NULL, estoque_minimo INTEGER DEFAULT 0, estoque_atual INTEGER DEFAULT 0, valor_unitario REAL DEFAULT 0, local_id INTEGER, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (local_id) REFERENCES locais (id) ) `, (err) => { if (err) console.error("Erro ao criar tabela produtos:", err) else console.log('✓ Tabela "produtos" verificada/criada') }, ) // Tabela de Agulhas db.run( ` CREATE TABLE IF NOT EXISTS agulhas ( id INTEGER PRIMARY KEY AUTOINCREMENT, codigo TEXT UNIQUE NOT NULL, tipo TEXT NOT NULL, bitola TEXT, comprimento TEXT, quantidade_atual INTEGER DEFAULT 0, quantidade_minima INTEGER DEFAULT 5, localizacao TEXT, maquina TEXT, observacoes TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela agulhas:", err) else console.log('✓ Tabela "agulhas" verificada/criada') }, ) // Tabela de Fios db.run( ` CREATE TABLE IF NOT EXISTS fios ( id INTEGER PRIMARY KEY AUTOINCREMENT, codigo TEXT UNIQUE NOT NULL, fornecedor TEXT, cor TEXT, lote TEXT, peso_bruto REAL, peso_liquido REAL, peso_cone REAL, peso_atual REAL, maquina TEXT, op TEXT, status TEXT DEFAULT 'PROCESSO', data_entrada DATE, data_retorno DATE, observacoes TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela fios:", err) else console.log('✓ Tabela "fios" verificada/criada') }, ) // Tabela de Malhas de Segunda (Qualidade) db.run( ` CREATE TABLE IF NOT EXISTS malhas_segunda ( id INTEGER PRIMARY KEY AUTOINCREMENT, codigo TEXT UNIQUE, tipo_malha TEXT, cor TEXT, peso_kg REAL, defeito TEXT, op TEXT, destino TEXT, status TEXT DEFAULT 'ESTOQUE', data_entrada DATE, valor_estimado REAL, observacoes TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela malhas_segunda:", err) else console.log('✓ Tabela "malhas_segunda" verificada/criada') }, ) // Tabela de Reciclados db.run( ` CREATE TABLE IF NOT EXISTS reciclados ( id INTEGER PRIMARY KEY AUTOINCREMENT, tipo_material TEXT NOT NULL, descricao TEXT, peso_kg REAL, quantidade INTEGER, origem TEXT, data_coleta DATE, comprador TEXT, valor_venda REAL, status TEXT DEFAULT 'ESTOQUE', observacoes TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela reciclados:", err) else console.log('✓ Tabela "reciclados" verificada/criada') }, ) // Tabela de Expedição/Coletas db.run( ` CREATE TABLE IF NOT EXISTS expedicao ( id INTEGER PRIMARY KEY AUTOINCREMENT, numero_nf TEXT NOT NULL, cliente TEXT NOT NULL, destino TEXT, cidade TEXT, estado TEXT, telefone TEXT, peso_total REAL, valor_total REAL, transportadora TEXT, data_expedicao DATE, status TEXT DEFAULT 'PENDENTE', observacoes TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela expedicao:", err) else console.log('✓ Tabela "expedicao" verificada/criada') }, ) // Tabela de Movimentações Gerais db.run( ` CREATE TABLE IF NOT EXISTS movimentacoes ( id INTEGER PRIMARY KEY AUTOINCREMENT, tipo TEXT NOT NULL CHECK(tipo IN ('ENTRADA', 'SAIDA')), modulo TEXT NOT NULL, item_id INTEGER NOT NULL, item_nome TEXT, quantidade REAL, usuario TEXT, observacoes TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `, (err) => { if (err) console.error("Erro ao criar tabela movimentacoes:", err) else console.log('✓ Tabela "movimentacoes" verificada/criada') }, ) }) } inicializarBancoDeDados() // ============================================ // FUNÇÕES AUXILIARES // ============================================ function formatarDataBrasileira(dataISO) { if (!dataISO) return "" const data = new Date(dataISO) const dia = String(data.getDate()).padStart(2, "0") const mes = String(data.getMonth() + 1).padStart(2, "0") const ano = data.getFullYear() const hora = String(data.getHours()).padStart(2, "0") const minuto = String(data.getMinutes()).padStart(2, "0") return `${dia}/${mes}/${ano} ${hora}:${minuto}` } function formatarMoeda(valor) { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(valor || 0) } // Middleware de autenticação function verificarAutenticacao(req, res, next) { if (req.session && req.session.usuario) { return next() } res.redirect("/login") } // ============================================ // ROTAS DE AUTENTICAÇÃO // ============================================ app.get("/login", (req, res) => { if (req.session && req.session.usuario) { return res.redirect("/") } res.render("login", { erro: null }) }) app.post("/login", (req, res) => { const { username, password } = req.body db.get("SELECT * FROM usuarios WHERE username = ? AND password = ?", [username, password], (err, usuario) => { if (err) { console.error("Erro no login:", err) return res.render("login", { erro: "Erro no servidor" }) } if (!usuario) { return res.render("login", { erro: "Usuário ou senha inválidos" }) } req.session.usuario = { id: usuario.id, username: usuario.username, nome: usuario.nome, nivel: usuario.nivel, } res.redirect("/") }) }) app.get("/logout", (req, res) => { req.session.destroy() res.redirect("/login") }) // ============================================ // ROTAS - DASHBOARD // ============================================ app.get("/", verificarAutenticacao, (req, res) => { const queries = { valorEstoque: new Promise((resolve, reject) => { db.get("SELECT SUM(estoque_atual * valor_unitario) as total FROM produtos", (err, row) => { if (err) reject(err) else resolve(row?.total || 0) }) }), agulhasCriticas: new Promise((resolve, reject) => { db.get("SELECT COUNT(*) as total FROM agulhas WHERE quantidade_atual <= quantidade_minima", (err, row) => { if (err) reject(err) else resolve(row?.total || 0) }) }), fiosProcesso: new Promise((resolve, reject) => { db.get('SELECT COUNT(*) as total FROM fios WHERE status = "PROCESSO"', (err, row) => { if (err) reject(err) else resolve(row?.total || 0) }) }), totalVendido: new Promise((resolve, reject) => { db.get( `SELECT SUM(valor_total) as total FROM expedicao WHERE status = 'CONCLUIDO' AND strftime('%Y-%m', data_expedicao) = strftime('%Y-%m', 'now')`, (err, row) => { if (err) reject(err) else resolve(row?.total || 0) }, ) }), distribuicaoEstoque: new Promise((resolve, reject) => { db.all( ` SELECT 'Almoxarifado' as setor, SUM(estoque_atual * valor_unitario) as valor FROM produtos UNION ALL SELECT 'Fios' as setor, COUNT(*) * 500 as valor FROM fios WHERE status = 'PROCESSO' UNION ALL SELECT 'Segunda' as setor, SUM(valor_estimado) as valor FROM malhas_segunda WHERE status = 'ESTOQUE' UNION ALL SELECT 'Reciclados' as setor, SUM(valor_venda) as valor FROM reciclados WHERE status = 'ESTOQUE' `, (err, rows) => { if (err) reject(err) else resolve(rows) }, ) }), top5Produtos: new Promise((resolve, reject) => { db.all( ` SELECT item_nome as nome, SUM(quantidade) as total FROM movimentacoes WHERE created_at >= date('now', '-30 days') GROUP BY item_nome ORDER BY total DESC LIMIT 5 `, (err, rows) => { if (err) reject(err) else resolve(rows) }, ) }), alertas: new Promise((resolve, reject) => { db.all( ` SELECT codigo, tipo, quantidade_atual, quantidade_minima FROM agulhas WHERE quantidade_atual <= quantidade_minima ORDER BY quantidade_atual ASC LIMIT 5 `, (err, rows) => { if (err) reject(err) else resolve(rows) }, ) }), } Promise.all([ queries.valorEstoque, queries.agulhasCriticas, queries.fiosProcesso, queries.totalVendido, queries.distribuicaoEstoque, queries.top5Produtos, queries.alertas, ]) .then(([valorEstoque, agulhasCriticas, fiosProcesso, totalVendido, distribuicao, top5, alertas]) => { res.render("dashboard", { pagina: "Dashboard", usuario: req.session.usuario, valorEstoque: formatarMoeda(valorEstoque), agulhasCriticas, fiosProcesso, totalVendido: formatarMoeda(totalVendido), distribuicaoEstoque: JSON.stringify(distribuicao), top5Produtos: JSON.stringify(top5), alertas, formatarMoeda, }) }) .catch((err) => { console.error("Erro ao carregar dashboard:", err) res.status(500).send("Erro ao carregar dashboard") }) }) // ============================================ // ROTAS - ALMOXARIFADO // ============================================ app.get("/almoxarifado", verificarAutenticacao, (req, res) => { db.all( ` SELECT p.*, l.nome as local_nome FROM produtos p LEFT JOIN locais l ON p.local_id = l.id ORDER BY p.nome `, (err, produtos) => { if (err) { console.error("Erro ao buscar produtos:", err) return res.status(500).send("Erro ao buscar produtos") } db.all("SELECT * FROM locais ORDER BY nome", (err, locais) => { if (err) { console.error("Erro ao buscar locais:", err) return res.status(500).send("Erro ao buscar locais") } res.render("almoxarifado", { pagina: "Almoxarifado Geral", usuario: req.session.usuario, produtos, locais, formatarMoeda, }) }) }, ) }) app.post("/almoxarifado/criar", verificarAutenticacao, (req, res) => { const { codigo, nome, descricao, categoria, unidade, estoque_minimo, estoque_atual, valor_unitario, local_id } = req.body db.run( ` INSERT INTO produtos (codigo, nome, descricao, categoria, unidade, estoque_minimo, estoque_atual, valor_unitario, local_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) `, [ codigo, nome, descricao, categoria, unidade, estoque_minimo || 0, estoque_atual || 0, valor_unitario || 0, local_id || null, ], (err) => { if (err) { console.error("Erro ao criar produto:", err) return res.status(500).send("Erro ao criar produto") } res.redirect("/almoxarifado") }, ) }) app.post("/almoxarifado/editar/:id", verificarAutenticacao, (req, res) => { const { id } = req.params const { codigo, nome, descricao, categoria, unidade, estoque_minimo, valor_unitario, local_id } = req.body db.run( ` UPDATE produtos SET codigo = ?, nome = ?, descricao = ?, categoria = ?, unidade = ?, estoque_minimo = ?, valor_unitario = ?, local_id = ? WHERE id = ? `, [codigo, nome, descricao, categoria, unidade, estoque_minimo, valor_unitario, local_id || null, id], (err) => { if (err) { console.error("Erro ao editar produto:", err) return res.status(500).send("Erro ao editar produto") } res.redirect("/almoxarifado") }, ) }) app.post("/almoxarifado/deletar/:id", verificarAutenticacao, (req, res) => { const { id } = req.params db.run("DELETE FROM produtos WHERE id = ?", [id], (err) => { if (err) { console.error("Erro ao deletar produto:", err) return res.status(500).send("Erro ao deletar produto") } res.redirect("/almoxarifado") }) }) // ============================================ // ROTAS - AGULHAS // ============================================ app.get("/agulhas", verificarAutenticacao, (req, res) => { db.all("SELECT * FROM agulhas ORDER BY codigo", (err, agulhas) => { if (err) { console.error("Erro ao buscar agulhas:", err) return res.status(500).send("Erro ao buscar agulhas") } res.render("agulhas", { pagina: "Controle de Agulhas", usuario: req.session.usuario, agulhas, }) }) }) app.post("/agulhas/criar", verificarAutenticacao, (req, res) => { const { codigo, tipo, bitola, comprimento, quantidade_atual, quantidade_minima, localizacao, maquina, observacoes } = req.body db.run( ` INSERT INTO agulhas (codigo, tipo, bitola, comprimento, quantidade_atual, quantidade_minima, localizacao, maquina, observacoes) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) `, [ codigo, tipo, bitola, comprimento, quantidade_atual || 0, quantidade_minima || 5, localizacao, maquina, observacoes, ], (err) => { if (err) { console.error("Erro ao criar agulha:", err) return res.status(500).send("Erro ao criar agulha") } res.redirect("/agulhas") }, ) }) // ============================================ // ROTAS - FIOS // ============================================ app.get("/fios", verificarAutenticacao, (req, res) => { db.all("SELECT * FROM fios ORDER BY created_at DESC", (err, fios) => { if (err) { console.error("Erro ao buscar fios:", err) return res.status(500).send("Erro ao buscar fios") } res.render("fios", { pagina: "Fios & Saldos", usuario: req.session.usuario, fios, formatarDataBrasileira, }) }) }) app.post("/fios/criar", verificarAutenticacao, (req, res) => { const { codigo, fornecedor, cor, lote, peso_bruto, peso_liquido, peso_cone, maquina, op, observacoes } = req.body db.run( ` INSERT INTO fios (codigo, fornecedor, cor, lote, peso_bruto, peso_liquido, peso_cone, peso_atual, maquina, op, data_entrada, observacoes) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, date('now'), ?) `, [codigo, fornecedor, cor, lote, peso_bruto, peso_liquido, peso_cone, peso_liquido, maquina, op, observacoes], (err) => { if (err) { console.error("Erro ao criar fio:", err) return res.status(500).send("Erro ao criar fio") } res.redirect("/fios") }, ) }) // ============================================ // ROTAS - QUALIDADE (MALHAS DE SEGUNDA) // ============================================ app.get("/qualidade", verificarAutenticacao, (req, res) => { db.all("SELECT * FROM malhas_segunda ORDER BY created_at DESC", (err, malhas) => { if (err) { console.error("Erro ao buscar malhas:", err) return res.status(500).send("Erro ao buscar malhas") } res.render("qualidade", { pagina: "Qualidade - Segunda", usuario: req.session.usuario, malhas, formatarMoeda, formatarDataBrasileira, }) }) }) app.post("/qualidade/criar", verificarAutenticacao, (req, res) => { const { codigo, tipo_malha, cor, peso_kg, defeito, op, destino, valor_estimado, observacoes } = req.body db.run( ` INSERT INTO malhas_segunda (codigo, tipo_malha, cor, peso_kg, defeito, op, destino, data_entrada, valor_estimado, observacoes) VALUES (?, ?, ?, ?, ?, ?, ?, date('now'), ?, ?) `, [codigo, tipo_malha, cor, peso_kg, defeito, op, destino, valor_estimado || 0, observacoes], (err) => { if (err) { console.error("Erro ao criar malha:", err) return res.status(500).send("Erro ao criar malha") } res.redirect("/qualidade") }, ) }) // ============================================ // ROTAS - EXPEDIÇÃO // ============================================ app.get("/expedicao", verificarAutenticacao, (req, res) => { db.all("SELECT * FROM expedicao ORDER BY created_at DESC", (err, expedicoes) => { if (err) { console.error("Erro ao buscar expedições:", err) return res.status(500).send("Erro ao buscar expedições") } res.render("expedicao", { pagina: "Expedição & Coletas", usuario: req.session.usuario, expedicoes, formatarMoeda, formatarDataBrasileira, }) }) }) app.post("/expedicao/criar", verificarAutenticacao, (req, res) => { const { numero_nf, cliente, destino, cidade, estado, telefone, peso_total, valor_total, transportadora, observacoes, } = req.body db.run( ` INSERT INTO expedicao (numero_nf, cliente, destino, cidade, estado, telefone, peso_total, valor_total, transportadora, data_expedicao, observacoes) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, date('now'), ?) `, [numero_nf, cliente, destino, cidade, estado, telefone, peso_total, valor_total, transportadora, observacoes], (err) => { if (err) { console.error("Erro ao criar expedição:", err) return res.status(500).send("Erro ao criar expedição") } res.redirect("/expedicao") }, ) }) // ============================================ // ROTAS - RECICLADOS // ============================================ app.get("/reciclados", verificarAutenticacao, (req, res) => { db.all("SELECT * FROM reciclados ORDER BY created_at DESC", (err, reciclados) => { if (err) { console.error("Erro ao buscar reciclados:", err) return res.status(500).send("Erro ao buscar reciclados") } res.render("reciclados", { pagina: "Reciclados", usuario: req.session.usuario, reciclados, formatarMoeda, formatarDataBrasileira, }) }) }) app.post("/reciclados/criar", verificarAutenticacao, (req, res) => { const { tipo_material, descricao, peso_kg, quantidade, origem, comprador, valor_venda, observacoes } = req.body db.run( ` INSERT INTO reciclados (tipo_material, descricao, peso_kg, quantidade, origem, data_coleta, comprador, valor_venda, observacoes) VALUES (?, ?, ?, ?, ?, date('now'), ?, ?, ?) `, [tipo_material, descricao, peso_kg, quantidade, origem, comprador, valor_venda || 0, observacoes], (err) => { if (err) { console.error("Erro ao criar reciclado:", err) return res.status(500).send("Erro ao criar reciclado") } res.redirect("/reciclados") }, ) }) // ============================================ // INICIAR SERVIDOR // ============================================ app.listen(PORT, () => { console.log("===========================================") console.log("🏭 TEXTILMANAGER ERP - SISTEMA TÊXTIL") console.log("===========================================") console.log(`✓ Servidor rodando na porta ${PORT}`) console.log(`✓ Acesse: http://localhost:${PORT}`) console.log(`✓ Login padrão: admin / admin`) console.log("===========================================") }) // Fechar conexão ao encerrar process.on("SIGINT", () => { db.close((err) => { if (err) console.error("Erro ao fechar banco:", err) else console.log("✓ Banco de dados fechado") process.exit(0) }) }) [V0_FILE]plaintext:file="views/layout.ejs" isEdit="true" isMerged="true" <%= pagina %> - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<%- body %>

[V0_FILE]plaintext:file="views/index.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Valor Total em Estoque

<%= valorTotal %>

Total de Produtos

<%= totalProdutos %>

Alertas Críticos

<%= alertasCriticos %>

Top 5 Produtos com Menor Estoque

Distribuição de Valor por Sala

<% if (produtosBaixoEstoque.length > 0) { %>

Produtos com Estoque Baixo

Os produtos abaixo estão com estoque igual ou abaixo do mínimo definido:

<% produtosBaixoEstoque.forEach(produto => { %> <% }); %>

Produto	Categoria	Localização	Estoque Atual	Estoque Mínimo	Valor Unit.	Status
<%= produto.nome %>	<%= produto.categoria \|\| '-' %>	<%= produto.sala_nome \|\| 'Sem localização' %>	<%= produto.estoque_atual %>	<%= produto.estoque_minimo %>	<%= formatarMoeda(produto.valor_unitario) %>	<% if (produto.estoque_atual === 0) { %> ESGOTADO <% } else if (produto.estoque_atual <= produto.estoque_minimo) { %> CRÍTICO <% } %>

<% } else { %>

Nenhum produto com estoque crítico no momento!

<% } %>

[V0_FILE]plaintext:file="views/salas.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Salas/Locais

Gerencie os locais de armazenamento

<% if (salas.length === 0) { %>

Nenhuma sala cadastrada ainda.

<% } else { %>

<% salas.forEach(sala => { %> <% }); %>

ID	Nome	Descrição	Data de Criação	Ações
#<%= sala.id %>	<%= sala.nome %>	<%= sala.descricao \|\| '-' %>	<%= formatarDataBrasileira(sala.created_at) %>

<% } %>

[V0_FILE]plaintext:file="views/produtos.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Produtos

Gerencie o catálogo de produtos

<% if (produtos.length === 0) { %>

<% if (busca) { %> Nenhum produto encontrado com o termo "<%= busca %>". <% } else { %> Nenhum produto cadastrado ainda. <% } %>

<% } else { %>

<% produtos.forEach(produto => { %> <% }); %>

ID	Nome	Categoria	Unidade	Localização	Estoque Atual	Estoque Mínimo	Valor Unit.	Status	Ações
#<%= produto.id %>	<%= produto.nome %>	<%= produto.categoria \|\| '-' %>	<%= produto.unidade %>	<%= produto.sala_nome \|\| 'Sem localização' %>	<% if (produto.estoque_atual === 0) { %> <%= produto.estoque_atual %> <% } else if (produto.estoque_atual <= produto.estoque_minimo) { %> <%= produto.estoque_atual %> <% } else { %> <%= produto.estoque_atual %> <% } %>	<%= produto.estoque_minimo %>	<%= formatarMoeda(produto.valor_unitario) %>	<% if (produto.estoque_atual === 0) { %> ESGOTADO <% } else if (produto.estoque_atual <= produto.estoque_minimo) { %> CRÍTICO <% } else { %> OK <% } %>

Total: <%= produtos.length %> produto(s) encontrado(s)

<% } %>

[V0_FILE]plaintext:file="views/movimentacoes.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Informações Importantes

Entrada: Use para registrar recebimento de fornecedores, devoluções ou ajustes positivos de estoque.
Saída: Use para registrar consumo interno, transferências ou ajustes negativos de estoque.
Validação: O sistema não permite saídas maiores que o estoque disponível.
Histórico: Todas as movimentações são registradas e podem ser consultadas na página de Relatórios.

[V0_FILE]plaintext:file="views/relatorios.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Filtros

<% if (movimentacoes.length === 0) { %>

Nenhuma movimentação registrada ainda.

Ir para Movimentações

<% } else { %>

<% movimentacoes.forEach(mov => { %> <% }); %>

ID	Data/Hora	Tipo	Produto	Quantidade	Detalhes	Ações
#<%= mov.id %>	<%= formatarDataBrasileira(mov.created_at) %>	<% if (mov.tipo === 'ENTRADA') { %> ENTRADA <% } else { %> SAÍDA <% } %>	<%= mov.produto_nome %>	<%= mov.quantidade %>	<% if (mov.tipo === 'ENTRADA') { %> <% if (mov.fornecedor) { %> Fornecedor: <%= mov.fornecedor %> <% } %> <% if (mov.numero_nf) { %> NF: <%= mov.numero_nf %> <% } %> <% if (mov.lote) { %> Lote: <%= mov.lote %> <% } %> <% } else { %> <% if (mov.solicitante) { %> Solicitante: <%= mov.solicitante %> <% } %> <% if (mov.destino) { %> Destino: <%= mov.destino %> <% } %> <% } %>

Exibindo <%= movimentacoes.length %> movimentação(ões) <% if (tipo) { %> do tipo <%= tipo %> <% } %>

<% } %>

[V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "textilmanager-erp", "version": "1.0.0", "description": "Sistema ERP completo para gestão de indústria têxtil com UX/UI premium", "main": "server.js", "scripts": { "start": "node server.js", "dev": "node server.js" }, "keywords": [ "erp", "textil", "nodejs", "express", "sqlite", "datatables" ], "author": "", "license": "MIT", "dependencies": { "express": "^4.18.2", "sqlite3": "^5.1.7", "ejs": "^3.1.9", "body-parser": "^1.20.2", "express-session": "^1.17.3", "dotenv": "17.2.3", "express-async-errors": "3.1.1", "cors": "2.8.5", "helmet": "8.1.0", "@prisma/client": "7.2.0", "jsonwebtoken": "9.0.3", "multer": "2.0.2", "uuid": "13.0.0", "bcryptjs": "3.0.3", "next": "16.1.1", "react": "19.2.3", "react-dom": "19.2.3", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.562.0", "tailwind-merge": "3.4.0", "tailwindcss-animate": "1.0.7", "vite": "7.3.1", "@vitejs/plugin-react": "5.1.2", "react-router-dom": "7.12.0", "@tanstack/react-query": "5.90.16", "react-hot-toast": "2.6.0", "axios": "1.13.2", "zustand": "5.0.9", "framer-motion": "12.25.0", "recharts": "3.6.0", "react-dropzone": "14.3.8" }, "devDependencies": { "@types/react": "19.2.8", "@types/react-dom": "19.2.3", "@types/node": "25.0.6", "typescript": "5.9.3", "tailwindcss": "4.1.18", "postcss": "8.5.6" } } [V0_FILE]plaintext:file="views/login.ejs" isMerged="true" Login - TextilManager ERP

<% if (erro) { %>

<%= erro %>

<% } %>

[V0_FILE]plaintext:file="views/dashboard.ejs" isEdit="true" isMerged="true" Dashboard - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Valor em Estoque

<%= valorEstoque %>

Agulhas Críticas

<%= agulhasCriticas %>

Fios em Processo

<%= fiosProcesso %>

Total Vendido (Mês)

<%= totalVendido %>

Distribuição de Estoque por Setor

Top 5 Produtos Mais Movimentados

Alertas de Estoque Crítico

<% if (alertas.length === 0) { %>

Nenhum alerta no momento. Tudo sob controle!

<% } else { %>

<% alertas.forEach(item => { %> <% }) %>

Código	Tipo	Qtd. Atual	Qtd. Mínima	Status
<%= item.codigo %>	<%= item.tipo %>	<%= item.quantidade_atual %>	<%= item.quantidade_minima %>	CRÍTICO

<% } %>

[V0_FILE]plaintext:file="views/almoxarifado.ejs" isEdit="true" isMerged="true" Almoxarifado - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<% produtos.forEach(produto => { let statusClass = 'badge-ok'; let statusTexto = 'OK'; if (produto.estoque_atual === 0) { statusClass = 'badge-esgotado'; statusTexto = 'ESGOTADO'; } else if (produto.estoque_atual <= produto.estoque_minimo) { statusClass = 'badge-critico'; statusTexto = 'CRÍTICO'; } %> <% }) %>

Código	Nome	Categoria	Unidade	Estoque Atual	Estoque Mínimo	Valor Unit.	Local	Status	Ações
<%= produto.codigo \|\| '-' %>	<%= produto.nome %>	<%= produto.categoria \|\| '-' %>	<%= produto.unidade %>	<%= produto.estoque_atual %>	<%= produto.estoque_minimo %>	<%= formatarMoeda(produto.valor_unitario) %>	<%= produto.local_nome \|\| '-' %>	<%= statusTexto %>

[V0_FILE]plaintext:file="views/agulhas.ejs" isEdit="true" isMerged="true" Agulhas - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<% agulhas.forEach(agulha => { let statusClass = 'badge-ok'; let statusTexto = 'OK'; if (agulha.quantidade_atual === 0) { statusClass = 'badge-esgotado'; statusTexto = 'ESGOTADO'; } else if (agulha.quantidade_atual <= agulha.quantidade_minima) { statusClass = 'badge-critico'; statusTexto = 'CRÍTICO'; } %> <% }) %>

Código	Tipo	Bitola	Comprimento	Qtd. Atual	Qtd. Mínima	Localização	Máquina	Status
<%= agulha.codigo %>	<%= agulha.tipo %>	<%= agulha.bitola \|\| '-' %>	<%= agulha.comprimento \|\| '-' %>	<%= agulha.quantidade_atual %>	<%= agulha.quantidade_minima %>	<%= agulha.localizacao \|\| '-' %>	<%= agulha.maquina \|\| '-' %>	<%= statusTexto %>

[V0_FILE]plaintext:file="views/fios.ejs" isEdit="true" isMerged="true" Fios & Saldos - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<% fios.forEach(fio => { let statusClass = 'bg-warning'; let statusTexto = fio.status || 'PROCESSO'; if (fio.status === 'CONCLUIDO') { statusClass = 'bg-success'; } else if (fio.status === 'RETORNADO') { statusClass = 'bg-info'; } %> <% }) %>

Código	Fornecedor	Cor	Lote	Peso Atual	Máquina	OP	Status	Data Entrada
<%= fio.codigo %>	<%= fio.fornecedor \|\| '-' %>	<%= fio.cor \|\| '-' %>	<%= fio.lote \|\| '-' %>	<%= fio.peso_atual \|\| '-' %> kg	<%= fio.maquina \|\| '-' %>	<%= fio.op \|\| '-' %>	<%= statusTexto %>	<%= formatarDataBrasileira(fio.data_entrada) %>

[V0_FILE]plaintext:file="views/expedicao.ejs" isEdit="true" isMerged="true" Expedição - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<% expedicoes.forEach(exp => { let statusClass = 'bg-warning'; let statusTexto = exp.status || 'PENDENTE'; if (exp.status === 'CONCLUIDO') { statusClass = 'bg-success'; } else if (exp.status === 'EM_TRANSITO') { statusClass = 'bg-info'; } const telefoneNumeros = exp.telefone ? exp.telefone.replace(/\D/g, '') : ''; const clienteEncoded = encodeURIComponent(exp.cliente); const destinoEncoded = encodeURIComponent(exp.destino || exp.cidade || ''); %> <% }) %>

NF	Cliente	Cidade/Estado	Telefone	Peso (kg)	Valor	Transportadora	Status	Ações
<%= exp.numero_nf %>	<%= exp.cliente %>	<%= exp.cidade \|\| '-' %> / <%= exp.estado \|\| '-' %>	<%= exp.telefone \|\| '-' %>	<%= exp.peso_total \|\| '-' %>	<%= formatarMoeda(exp.valor_total) %>	<%= exp.transportadora \|\| '-' %>	<%= statusTexto %>	<% if (telefoneNumeros && exp.status === 'PENDENTE') { %> <% } %>

[V0_FILE]plaintext:file="views/qualidade.ejs" isEdit="true" isMerged="true" Qualidade - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<% malhas.forEach(malha => { let statusClass = 'bg-warning'; let statusTexto = malha.status || 'ESTOQUE'; if (malha.status === 'VENDIDO') { statusClass = 'bg-success'; } else if (malha.status === 'SEPARADO') { statusClass = 'bg-info'; } %> <% }) %>

Código	Tipo de Malha	Cor	Peso (kg)	Defeito	OP	Destino	Valor Estimado	Status
<%= malha.codigo \|\| '-' %>	<%= malha.tipo_malha \|\| '-' %>	<%= malha.cor \|\| '-' %>	<%= malha.peso_kg \|\| 0 %> kg	<%= malha.defeito \|\| '-' %>	<%= malha.op \|\| '-' %>	<%= malha.destino \|\| '-' %>	<%= formatarMoeda(malha.valor_estimado) %>	<%= statusTexto %>

[V0_FILE]plaintext:file="views/reciclados.ejs" isEdit="true" isMerged="true" Reciclados - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

<% reciclados.forEach(rec => { let statusClass = 'bg-warning'; let statusTexto = rec.status || 'ESTOQUE'; if (rec.status === 'VENDIDO') { statusClass = 'bg-success'; } else if (rec.status === 'SEPARADO') { statusClass = 'bg-info'; } %> <% }) %>

Tipo de Material	Descrição	Peso (kg)	Quantidade	Origem	Comprador	Valor Venda	Status
<%= rec.tipo_material %>	<%= rec.descricao \|\| '-' %>	<%= rec.peso_kg \|\| '-' %> kg	<%= rec.quantidade \|\| '-' %>	<%= rec.origem \|\| '-' %>	<%= rec.comprador \|\| '-' %>	<%= formatarMoeda(rec.valor_venda) %>	<%= statusTexto %>

[V0_FILE]json:file="server/package.json" isEdit="true" isMerged="true" { "name": "textilmanager-api", "version": "1.0.0", "description": "TextilManager ERP Pro - Backend API", "main": "dist/server.js", "type": "module", "scripts": { "dev": "tsx watch src/server.ts", "build": "tsc", "start": "node dist/server.js", "db:generate": "prisma generate", "db:push": "prisma db push", "db:seed": "tsx prisma/seed.ts", "db:studio": "prisma studio", "db:reset": "prisma db push --force-reset && tsx prisma/seed.ts", "init": "npm install && prisma generate && prisma db push && tsx prisma/seed.ts" }, "dependencies": { "@prisma/client": "^5.10.0", "bcryptjs": "^2.4.3", "cors": "^2.8.5", "dotenv": "^16.4.5", "express": "^4.18.3", "express-async-errors": "^3.1.1", "helmet": "^7.1.0", "jsonwebtoken": "^9.0.2", "multer": "^1.4.5-lts.1", "uuid": "^9.0.1", "zod": "^3.22.4" }, "devDependencies": { "@types/bcryptjs": "^2.4.6", "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/jsonwebtoken": "^9.0.6", "@types/multer": "^1.4.11", "@types/node": "^20.11.24", "@types/uuid": "^9.0.8", "prisma": "^5.10.0", "tsx": "^4.7.1", "typescript": "^5.3.3" }, "prisma": { "seed": "tsx prisma/seed.ts" } } [V0_FILE]plaintext:file="server/.env.example" isMerged="true" # Database DATABASE_URL="file:./dev.db" # JWT JWT_SECRET="textilmanager-secret-key-change-in-production" JWT_EXPIRES_IN="7d" # Server PORT=3001 NODE_ENV=development # Upload UPLOAD_DIR="./uploads" MAX_FILE_SIZE=10485760 [V0_FILE]json:file="server/tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2022", "module": "NodeNext", "moduleResolution": "NodeNext", "lib": ["ES2022"], "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "declaration": true, "declarationMap": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*", "prisma/seed.ts"], "exclude": ["node_modules", "dist"] } [V0_FILE]typescript:file="server/src/server.ts" isEdit="true" isMerged="true" import "dotenv/config" import "express-async-errors" import express from "express" import cors from "cors" import helmet from "helmet" import path from "path" import { fileURLToPath } from "url" import { errorHandler } from "./middlewares/errorHandler.js" import { authRoutes } from "./routes/auth.routes.js" import { productRoutes } from "./routes/product.routes.js" import { categoryRoutes } from "./routes/category.routes.js" import { locationRoutes } from "./routes/location.routes.js" import { needleRoutes } from "./routes/needle.routes.js" import { threadRoutes } from "./routes/thread.routes.js" import { qualityRoutes } from "./routes/quality.routes.js" import { shipmentRoutes } from "./routes/shipment.routes.js" import { recycledRoutes } from "./routes/recycled.routes.js" import { dashboardRoutes } from "./routes/dashboard.routes.js" import { uploadRoutes } from "./routes/upload.routes.js" import { branchRoutes } from "./routes/branch.routes.js" import { warehouseRoutes } from "./routes/warehouse.routes.js" import { customerRoutes } from "./routes/customer.routes.js" import { thirdPartyRoutes } from "./routes/thirdparty.routes.js" import { notificationRoutes } from "./routes/notification.routes.js" const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) const app = express() const PORT = process.env.PORT || 3001 console.log("========================================") console.log(" TextilManager ERP Pro - Backend") console.log("========================================") console.log("[Server] NODE_ENV:", process.env.NODE_ENV || "development") console.log("[Server] PORT:", PORT) console.log("[Server] DATABASE_URL:", process.env.DATABASE_URL ? "Configurado" : "NAO CONFIGURADO!") console.log("[Server] JWT_SECRET:", process.env.JWT_SECRET ? "Configurado" : "Usando default") console.log("========================================") // Middlewares de segurança app.use(helmet({ crossOriginResourcePolicy: { policy: "cross-origin" } })) app.use( cors({ origin: ["http://localhost:5173", "http://localhost:3000", "http://127.0.0.1:5173"], credentials: true, }), ) app.use(express.json()) app.use(express.urlencoded({ extended: true })) app.use((req, res, next) => { console.log(`[${new Date().toISOString()}] ${req.method} ${req.path}`) next() }) // Servir arquivos estáticos (uploads) app.use("/uploads", express.static(path.join(__dirname, "../uploads"))) // Rotas da API app.use("/api/auth", authRoutes) app.use("/api/products", productRoutes) app.use("/api/categories", categoryRoutes) app.use("/api/locations", locationRoutes) app.use("/api/needles", needleRoutes) app.use("/api/threads", threadRoutes) app.use("/api/quality", qualityRoutes) app.use("/api/shipments", shipmentRoutes) app.use("/api/recycled", recycledRoutes) app.use("/api/dashboard", dashboardRoutes) app.use("/api/upload", uploadRoutes) app.use("/api/branches", branchRoutes) app.use("/api/warehouses", warehouseRoutes) app.use("/api/customers", customerRoutes) app.use("/api/thirdparties", thirdPartyRoutes) app.use("/api/notifications", notificationRoutes) // Health check app.get("/api/health", (req, res) => { res.json({ status: "ok", timestamp: new Date().toISOString() }) }) // Error handler app.use(errorHandler) app.listen(PORT, () => { console.log(`[Server] API rodando em http://localhost:${PORT}`) console.log("[Server] Aguardando conexões...") }) [V0_FILE]typescript:file="server/src/lib/prisma.ts" isEdit="true" isMerged="true" import { PrismaClient } from "@prisma/client" const globalForPrisma = globalThis as unknown as { prisma: PrismaClient } function createPrismaClient() { console.log("[Prisma] Criando cliente Prisma...") console.log("[Prisma] DATABASE_URL:", process.env.DATABASE_URL || "NAO DEFINIDA") const client = new PrismaClient({ log: process.env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"], }) return client } export const prisma = globalForPrisma.prisma || createPrismaClient() if (process.env.NODE_ENV !== "production") { globalForPrisma.prisma = prisma } // Testar conexão prisma .$connect() .then(() => { console.log("[Prisma] Conectado ao banco de dados com sucesso!") }) .catch((err: Error) => { console.error("[Prisma] ERRO ao conectar:", err.message) }) [V0_FILE]typescript:file="server/src/middlewares/errorHandler.ts" isEdit="true" isMerged="true" import type { Request, Response, NextFunction } from "express" export class AppError extends Error { public readonly statusCode: number public readonly isOperational: boolean constructor(message: string, statusCode = 400) { super(message) this.statusCode = statusCode this.isOperational = true Error.captureStackTrace(this, this.constructor) } } export function errorHandler(err: Error, req: Request, res: Response, next: NextFunction) { console.error("[ErrorHandler] Erro capturado:") console.error(" - Mensagem:", err.message) console.error(" - Stack:", err.stack) console.error(" - Rota:", req.method, req.path) console.error(" - Body:", JSON.stringify(req.body)) if (err instanceof AppError) { return res.status(err.statusCode).json({ success: false, error: err.message, }) } // Erros do Prisma if (err.name === "PrismaClientKnownRequestError") { console.error("[ErrorHandler] Erro do Prisma:", err) return res.status(400).json({ success: false, error: "Erro de banco de dados", }) } return res.status(500).json({ success: false, error: "Erro interno do servidor", ...(process.env.NODE_ENV === "development" && { details: err.message }), }) } [V0_FILE]typescript:file="server/src/middlewares/auth.ts" isMerged="true" import type { Request, Response, NextFunction } from "express" import jwt from "jsonwebtoken" import { AppError } from "./errorHandler.js" interface TokenPayload { id: string email: string role: string } declare global { namespace Express { interface Request { user?: TokenPayload } } } export function authMiddleware(req: Request, res: Response, next: NextFunction) { const authHeader = req.headers.authorization if (!authHeader) { throw new AppError("Token não fornecido", 401) } const [, token] = authHeader.split(" ") try { const decoded = jwt.verify(token, process.env.JWT_SECRET!) as TokenPayload req.user = decoded return next() } catch { throw new AppError("Token inválido", 401) } } export function adminMiddleware(req: Request, res: Response, next: NextFunction) { if (req.user?.role !== "admin") { throw new AppError("Acesso não autorizado", 403) } return next() } [V0_FILE]typescript:file="server/src/middlewares/upload.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import multer from "multer" import path from "path" import { v4 as uuidv4 } from "uuid" import fs from "fs" import type express from "express" // Added import for Express const uploadDir = process.env.UPLOAD_DIR || "./uploads" // Criar diretório se não existir if (!fs.existsSync(uploadDir)) { fs.mkdirSync(uploadDir, { recursive: true }) } const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, uploadDir) }, filename: (req, file, cb) => { const uniqueName = `${uuidv4()}${path.extname(file.originalname)}` cb(null, uniqueName) }, }) const fileFilter = (req: any, file: express.Multer.File, cb: multer.FileFilterCallback) => { // Updated Express.Multer.File to express.Multer.File const allowedTypes = [ "image/jpeg", "image/png", "image/gif", "image/webp", "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", ] if (allowedTypes.includes(file.mimetype)) { cb(null, true) } else { cb(new Error("Tipo de arquivo não permitido")) } } export const upload = multer({ storage, fileFilter, limits: { fileSize: Number.parseInt(process.env.MAX_FILE_SIZE || "10485760"), // 10MB }, }) [V0_FILE]typescript:file="server/src/routes/auth.routes.ts" isEdit="true" isMerged="true" import { Router } from "express" import bcrypt from "bcryptjs" import jwt from "jsonwebtoken" import { prisma } from "../lib/prisma.js" import { AppError } from "../middlewares/errorHandler.js" import { authMiddleware } from "../middlewares/auth.js" export const authRoutes = Router() // Login authRoutes.post("/login", async (req, res) => { try { const { email, password } = req.body console.log("[Auth] Tentativa de login para:", email) if (!email || !password) { throw new AppError("Email e senha são obrigatórios", 400) } const user = await prisma.user.findUnique({ where: { email } }) if (!user) { console.log("[Auth] Usuário não encontrado:", email) throw new AppError("Credenciais inválidas", 401) } if (!user.isActive) { console.log("[Auth] Usuário inativo:", email) throw new AppError("Usuário inativo", 401) } const passwordMatch = await bcrypt.compare(password, user.password) if (!passwordMatch) { console.log("[Auth] Senha incorreta para:", email) throw new AppError("Credenciais inválidas", 401) } const jwtSecret = process.env.JWT_SECRET || "textilmanager-default-secret-key" const token = jwt.sign({ id: user.id, email: user.email, role: user.role }, jwtSecret, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) // Log da atividade await prisma.activityLog.create({ data: { action: "LOGIN", entity: "User", entityId: user.id, userId: user.id, ipAddress: req.ip || "unknown", }, }) console.log("[Auth] Login bem-sucedido para:", email) res.json({ success: true, data: { token, user: { id: user.id, email: user.email, name: user.name, role: user.role, avatar: user.avatar, }, }, }) } catch (error) { console.error("[Auth] Erro no login:", error) throw error } }) // Registro authRoutes.post("/register", async (req, res) => { try { const { email, password, name } = req.body if (!email || !password || !name) { throw new AppError("Todos os campos são obrigatórios", 400) } const existingUser = await prisma.user.findUnique({ where: { email } }) if (existingUser) { throw new AppError("Email já cadastrado", 400) } const hashedPassword = await bcrypt.hash(password, 10) const user = await prisma.user.create({ data: { email, password: hashedPassword, name, }, }) const jwtSecret = process.env.JWT_SECRET || "textilmanager-default-secret-key" const token = jwt.sign({ id: user.id, email: user.email, role: user.role }, jwtSecret, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) console.log("[Auth] Registro bem-sucedido para:", email) res.status(201).json({ success: true, data: { token, user: { id: user.id, email: user.email, name: user.name, role: user.role, }, }, }) } catch (error) { console.error("[Auth] Erro no registro:", error) throw error } }) // Perfil do usuário authRoutes.get("/me", authMiddleware, async (req, res) => { try { const user = await prisma.user.findUnique({ where: { id: req.user!.id }, select: { id: true, email: true, name: true, role: true, avatar: true, createdAt: true, }, }) if (!user) { throw new AppError("Usuário não encontrado", 404) } res.json({ success: true, data: user }) } catch (error) { console.error("[Auth] Erro ao buscar perfil:", error) throw error } }) [V0_FILE]typescript:file="server/src/routes/dashboard.routes.ts" isEdit="true" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { authMiddleware } from "../middlewares/auth.js" export const dashboardRoutes = Router() dashboardRoutes.use(authMiddleware) // KPIs e estatísticas gerais dashboardRoutes.get("/stats", async (req, res) => { const [ totalProducts, lowStockProducts, totalNeedles, lowStockNeedles, totalThreads, lowWeightThreads, pendingShipments, sentShipments, deliveredShipments, pendingQuality, totalRecycled, recentMovements, totalCustomers, totalThirdParties, pendingThirdPartyOrders, ] = await Promise.all([ prisma.product.count({ where: { isActive: true } }), prisma.product.count({ where: { isActive: true, quantity: { lte: 10 } } }), prisma.needle.aggregate({ where: { isActive: true }, _sum: { quantity: true } }), prisma.needle.count({ where: { isActive: true, quantity: { lte: 5 } } }), prisma.thread.count({ where: { isActive: true } }), prisma.thread.count({ where: { isActive: true, currentWeight: { lte: 1 } } }), prisma.shipment.count({ where: { status: "pendente", isActive: true } }), prisma.shipment.count({ where: { status: "enviado", isActive: true } }), prisma.shipment.count({ where: { status: "entregue", isActive: true } }), prisma.qualityRecord.count({ where: { status: "pendente", isActive: true } }), prisma.recycledMaterial.aggregate({ where: { isActive: true }, _sum: { weight: true } }), prisma.movement.count({ where: { createdAt: { gte: new Date(Date.now() - 24 * 60 * 60 * 1000) } } }), prisma.customer.count({ where: { isActive: true } }), prisma.thirdParty.count({ where: { isActive: true } }), prisma.thirdPartyOrder.count({ where: { status: "pendente", isActive: true } }), ]) // Produtos com estoque crítico const criticalProducts = await prisma.product.findMany({ where: { isActive: true, quantity: { lte: 10 }, }, orderBy: { quantity: "asc" }, take: 10, include: { category: true, location: true, warehouse: true }, }) // Fios com peso crítico const criticalThreads = await prisma.thread.findMany({ where: { isActive: true, currentWeight: { lte: 2 } }, orderBy: { currentWeight: "asc" }, take: 5, include: { warehouse: true }, }) // Movimentações recentes (últimas 20) const latestMovements = await prisma.movement.findMany({ orderBy: { createdAt: "desc" }, take: 20, include: { product: { select: { code: true, name: true } }, user: { select: { name: true } }, }, }) // Movimentações de fios recentes const latestThreadMovements = await prisma.threadMovement.findMany({ orderBy: { createdAt: "desc" }, take: 10, include: { thread: { select: { code: true, name: true, color: true } }, }, }) // Expedições recentes const latestShipments = await prisma.shipment.findMany({ orderBy: { createdAt: "desc" }, take: 10, include: { customer: true, branch: true, warehouse: true }, }) // Distribuição por categoria const categoryDistribution = await prisma.product.groupBy({ by: ["categoryId"], where: { isActive: true }, _count: { id: true }, _sum: { quantity: true }, }) const categories = await prisma.category.findMany({ where: { id: { in: categoryDistribution.map((c) => c.categoryId).filter(Boolean) as string[] } }, }) const distributionWithNames = categoryDistribution.map((item) => ({ category: categories.find((c) => c.id === item.categoryId)?.name || "Sem categoria", count: item._count.id, totalQuantity: item._sum.quantity || 0, })) // Movimentações por dia (últimos 7 dias) const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) const movementsByDay = await prisma.movement.groupBy({ by: ["type"], where: { createdAt: { gte: sevenDaysAgo } }, _count: { id: true }, }) // Expedições por status const shipmentsByStatus = [ { status: "Pendente", count: pendingShipments, color: "#f59e0b" }, { status: "Enviado", count: sentShipments, color: "#3b82f6" }, { status: "Entregue", count: deliveredShipments, color: "#10b981" }, ] // Valor total em estoque (produtos) const stockValue = await prisma.product.aggregate({ where: { isActive: true }, _sum: { costPrice: true }, }) // Peso total de fios const totalThreadWeight = await prisma.thread.aggregate({ where: { isActive: true }, _sum: { currentWeight: true }, }) res.json({ success: true, data: { kpis: { totalProducts, lowStockProducts, totalNeedles: totalNeedles._sum.quantity || 0, lowStockNeedles, totalThreads, lowWeightThreads, pendingShipments, sentShipments, deliveredShipments, pendingQuality, totalRecycled: totalRecycled._sum.weight || 0, recentMovements, totalCustomers, totalThirdParties, pendingThirdPartyOrders, stockValue: stockValue._sum.costPrice || 0, totalThreadWeight: totalThreadWeight._sum.currentWeight || 0, }, criticalProducts, criticalThreads, latestMovements, latestThreadMovements, latestShipments, categoryDistribution: distributionWithNames, movementsByDay, shipmentsByStatus, }, }) }) // Alertas do sistema dashboardRoutes.get("/alerts", async (req, res) => { const alerts = [] // Produtos com estoque crítico const criticalProducts = await prisma.product.findMany({ where: { isActive: true, quantity: { lte: 5 } }, select: { id: true, code: true, name: true, quantity: true, minQuantity: true }, }) criticalProducts.forEach((p) => { alerts.push({ id: `prod-${p.id}`, type: "critical", priority: "alta", module: "almoxarifado", title: "Estoque Crítico", message: `${p.code} - ${p.name}: ${p.quantity} un`, createdAt: new Date(), }) }) // Agulhas com estoque baixo const lowNeedles = await prisma.needle.findMany({ where: { isActive: true, quantity: { lte: 5 } }, select: { id: true, code: true, type: true, quantity: true }, }) lowNeedles.forEach((n) => { alerts.push({ id: `needle-${n.id}`, type: "warning", priority: "media", module: "agulhas", title: "Agulhas Baixas", message: `${n.code} (${n.type}): ${n.quantity} un`, createdAt: new Date(), }) }) // Fios com peso baixo const lowThreads = await prisma.thread.findMany({ where: { isActive: true, currentWeight: { lte: 1 } }, select: { id: true, code: true, name: true, currentWeight: true }, }) lowThreads.forEach((t) => { alerts.push({ id: `thread-${t.id}`, type: "warning", priority: "media", module: "fios", title: "Fio com Peso Baixo", message: `${t.code} - ${t.name}: ${t.currentWeight}kg`, createdAt: new Date(), }) }) // Ordens de terceiros pendentes const pendingOrders = await prisma.thirdPartyOrder.findMany({ where: { status: "pendente", isActive: true }, include: { thirdParty: { select: { name: true } } }, }) pendingOrders.forEach((o) => { alerts.push({ id: `order-${o.id}`, type: "info", priority: "normal", module: "terceiros", title: "Ordem Pendente", message: `${o.code} - ${o.thirdParty.name}`, createdAt: o.createdAt, }) }) // Expedições pendentes const pendingShipments = await prisma.shipment.findMany({ where: { status: "pendente", isActive: true }, select: { id: true, code: true, customer: true }, take: 5, }) pendingShipments.forEach((s) => { alerts.push({ id: `ship-${s.id}`, type: "info", priority: "normal", module: "expedicao", title: "Expedição Pendente", message: `${s.code} - ${s.customer?.name || "Sem cliente"}`, createdAt: new Date(), }) }) // Qualidade pendente const pendingQuality = await prisma.qualityRecord.findMany({ where: { status: "pendente", isActive: true }, select: { id: true, code: true, productName: true, defectType: true }, }) pendingQuality.forEach((q) => { alerts.push({ id: `quality-${q.id}`, type: "warning", priority: "media", module: "qualidade", title: "Avaliação Pendente", message: `${q.code} - ${q.productName} (${q.defectType})`, createdAt: new Date(), }) }) // Ordenar por prioridade e data const priorityOrder = { alta: 0, media: 1, normal: 2 } alerts.sort((a, b) => { const priorityDiff = priorityOrder[a.priority as keyof typeof priorityOrder] - priorityOrder[b.priority as keyof typeof priorityOrder] if (priorityDiff !== 0) return priorityDiff return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() }) res.json({ success: true, data: alerts }) }) // Atividades recentes (timeline) dashboardRoutes.get("/activities", async (req, res) => { const { limit = "30" } = req.query as Record const activities = await prisma.activityLog.findMany({ orderBy: { createdAt: "desc" }, take: Number(limit), include: { user: { select: { name: true, avatar: true } } }, }) res.json({ success: true, data: activities }) }) // Notificações do usuário dashboardRoutes.get("/notifications", async (req, res) => { const userId = req.user?.id const notifications = await prisma.notification.findMany({ where: { OR: [{ userId }, { userId: null }] }, orderBy: { createdAt: "desc" }, take: 20, }) const unreadCount = await prisma.notification.count({ where: { OR: [{ userId }, { userId: null }], isRead: false }, }) res.json({ success: true, data: { notifications, unreadCount } }) }) [V0_FILE]typescript:file="server/src/routes/category.routes.ts" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { authMiddleware } from "../middlewares/auth.js" export const categoryRoutes = Router() categoryRoutes.use(authMiddleware) categoryRoutes.get("/", async (req, res) => { const categories = await prisma.category.findMany({ where: { isActive: true }, orderBy: { name: "asc" }, include: { _count: { select: { products: true } } }, }) res.json({ success: true, data: categories }) }) categoryRoutes.post("/", async (req, res) => { const { name, description, color, icon } = req.body const category = await prisma.category.create({ data: { name, description, color, icon }, }) res.status(201).json({ success: true, data: category }) }) categoryRoutes.put("/:id", async (req, res) => { const category = await prisma.category.update({ where: { id: req.params.id }, data: req.body, }) res.json({ success: true, data: category }) }) categoryRoutes.delete("/:id", async (req, res) => { await prisma.category.update({ where: { id: req.params.id }, data: { isActive: false }, }) res.json({ success: true, message: "Categoria removida" }) }) [V0_FILE]typescript:file="server/src/routes/location.routes.ts" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { authMiddleware } from "../middlewares/auth.js" export const locationRoutes = Router() locationRoutes.use(authMiddleware) locationRoutes.get("/", async (req, res) => { const locations = await prisma.location.findMany({ where: { isActive: true }, orderBy: { name: "asc" }, include: { _count: { select: { products: true } } }, }) res.json({ success: true, data: locations }) }) locationRoutes.post("/", async (req, res) => { const { name, description, capacity } = req.body const location = await prisma.location.create({ data: { name, description, capacity }, }) res.status(201).json({ success: true, data: location }) }) locationRoutes.put("/:id", async (req, res) => { const location = await prisma.location.update({ where: { id: req.params.id }, data: req.body, }) res.json({ success: true, data: location }) }) locationRoutes.delete("/:id", async (req, res) => { await prisma.location.update({ where: { id: req.params.id }, data: { isActive: false }, }) res.json({ success: true, message: "Local removido" }) }) [V0_FILE]typescript:file="server/src/routes/needle.routes.ts" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { AppError } from "../middlewares/errorHandler.js" import { authMiddleware } from "../middlewares/auth.js" export const needleRoutes = Router() needleRoutes.use(authMiddleware) needleRoutes.get("/", async (req, res) => { const { page = "1", limit = "20", search = "", status } = req.query const pageNum = Number.parseInt(page as string) const limitNum = Number.parseInt(limit as string) const skip = (pageNum - 1) * limitNum const where: any = { isActive: true } if (search) { where.OR = [ { code: { contains: search as string } }, { type: { contains: search as string } }, { machine: { contains: search as string } }, { gauge: { contains: search as string } }, ] } // Buscar todas as agulhas primeiro let allNeedles = await prisma.needle.findMany({ where, orderBy: { createdAt: "desc" } }) // Filtrar por status calculado (baseado em quantity vs minQuantity) if (status === "empty") { allNeedles = allNeedles.filter(n => n.quantity === 0) } else if (status === "critical") { allNeedles = allNeedles.filter(n => n.quantity > 0 && n.quantity <= n.minQuantity) } else if (status === "ok") { allNeedles = allNeedles.filter(n => n.quantity > n.minQuantity) } // Aplicar paginacao apos o filtro const total = allNeedles.length const needles = allNeedles.slice(skip, skip + limitNum) res.json({ success: true, data: needles, pagination: { page: pageNum, limit: limitNum, total, totalPages: Math.ceil(total / limitNum) }, }) }) needleRoutes.get("/:id", async (req, res) => { const needle = await prisma.needle.findUnique({ where: { id: req.params.id }, include: { movements: { orderBy: { createdAt: "desc" }, take: 20 } }, }) if (!needle) throw new AppError("Agulha não encontrada", 404) res.json({ success: true, data: needle }) }) needleRoutes.post("/", async (req, res) => { const needle = await prisma.needle.create({ data: req.body }) res.status(201).json({ success: true, data: needle }) }) needleRoutes.put("/:id", async (req, res) => { const needle = await prisma.needle.update({ where: { id: req.params.id }, data: req.body }) res.json({ success: true, data: needle }) }) needleRoutes.delete("/:id", async (req, res) => { await prisma.needle.update({ where: { id: req.params.id }, data: { isActive: false } }) res.json({ success: true, message: "Agulha removida" }) }) needleRoutes.post("/:id/movement", async (req, res) => { const { id } = req.params const { type, quantity, machine, reason, operator } = req.body const needle = await prisma.needle.findUnique({ where: { id } }) if (!needle) throw new AppError("Agulha não encontrada", 404) if (type === "saida" && needle.quantity < quantity) throw new AppError("Quantidade insuficiente", 400) const newQuantity = type === "entrada" ? needle.quantity + quantity : needle.quantity - quantity const [updated, movement] = await prisma.$transaction([ prisma.needle.update({ where: { id }, data: { quantity: newQuantity, lastChange: new Date() } }), prisma.needleMovement.create({ data: { type, quantity, machine, reason, operator, needleId: id } }), ]) res.json({ success: true, data: { needle: updated, movement } }) }) [V0_FILE]typescript:file="server/src/routes/quality.routes.ts" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { AppError } from "../middlewares/errorHandler.js" import { authMiddleware } from "../middlewares/auth.js" export const qualityRoutes = Router() qualityRoutes.use(authMiddleware) qualityRoutes.get("/", async (req, res) => { const { page = "1", limit = "20", search = "", status, severity } = req.query const pageNum = Number.parseInt(page as string) const limitNum = Number.parseInt(limit as string) const skip = (pageNum - 1) * limitNum const where: any = { isActive: true } if (search) { where.OR = [ { code: { contains: search as string } }, { productName: { contains: search as string } }, { defectType: { contains: search as string } }, ] } if (status) where.status = status if (severity) where.severity = severity const [records, total] = await Promise.all([ prisma.qualityRecord.findMany({ where, skip, take: limitNum, orderBy: { createdAt: "desc" } }), prisma.qualityRecord.count({ where }), ]) res.json({ success: true, data: records, pagination: { page: pageNum, limit: limitNum, total, totalPages: Math.ceil(total / limitNum) }, }) }) qualityRoutes.get("/:id", async (req, res) => { const record = await prisma.qualityRecord.findUnique({ where: { id: req.params.id } }) if (!record) throw new AppError("Registro não encontrado", 404) res.json({ success: true, data: record }) }) qualityRoutes.post("/", async (req, res) => { const record = await prisma.qualityRecord.create({ data: req.body }) res.status(201).json({ success: true, data: record }) }) qualityRoutes.put("/:id", async (req, res) => { const record = await prisma.qualityRecord.update({ where: { id: req.params.id }, data: req.body }) res.json({ success: true, data: record }) }) qualityRoutes.delete("/:id", async (req, res) => { await prisma.qualityRecord.update({ where: { id: req.params.id }, data: { isActive: false } }) res.json({ success: true, message: "Registro removido" }) }) qualityRoutes.patch("/:id/status", async (req, res) => { const { status } = req.body const record = await prisma.qualityRecord.update({ where: { id: req.params.id }, data: { status }, }) res.json({ success: true, data: record }) }) [V0_FILE]typescript:file="server/src/routes/recycled.routes.ts" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { AppError } from "../middlewares/errorHandler.js" import { authMiddleware } from "../middlewares/auth.js" export const recycledRoutes = Router() recycledRoutes.use(authMiddleware) recycledRoutes.get("/", async (req, res) => { const { page = "1", limit = "20", search = "", status, type } = req.query const pageNum = Number.parseInt(page as string) const limitNum = Number.parseInt(limit as string) const skip = (pageNum - 1) * limitNum const where: any = { isActive: true } if (search) { where.OR = [ { code: { contains: search as string } }, { type: { contains: search as string } }, { origin: { contains: search as string } }, ] } if (status) where.status = status if (type) where.type = type const [materials, total] = await Promise.all([ prisma.recycledMaterial.findMany({ where, skip, take: limitNum, orderBy: { createdAt: "desc" } }), prisma.recycledMaterial.count({ where }), ]) res.json({ success: true, data: materials, pagination: { page: pageNum, limit: limitNum, total, totalPages: Math.ceil(total / limitNum) }, }) }) recycledRoutes.get("/:id", async (req, res) => { const material = await prisma.recycledMaterial.findUnique({ where: { id: req.params.id } }) if (!material) throw new AppError("Material não encontrado", 404) res.json({ success: true, data: material }) }) recycledRoutes.post("/", async (req, res) => { const material = await prisma.recycledMaterial.create({ data: req.body }) res.status(201).json({ success: true, data: material }) }) recycledRoutes.put("/:id", async (req, res) => { const material = await prisma.recycledMaterial.update({ where: { id: req.params.id }, data: req.body }) res.json({ success: true, data: material }) }) recycledRoutes.delete("/:id", async (req, res) => { await prisma.recycledMaterial.update({ where: { id: req.params.id }, data: { isActive: false } }) res.json({ success: true, message: "Material removido" }) }) recycledRoutes.patch("/:id/status", async (req, res) => { const { status } = req.body const updateData: any = { status } if (status === "processado") updateData.processedAt = new Date() const material = await prisma.recycledMaterial.update({ where: { id: req.params.id }, data: updateData, }) res.json({ success: true, data: material }) }) [V0_FILE]typescript:file="server/src/routes/upload.routes.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Router } from "express" import { prisma } from "../lib/prisma.js" import { authMiddleware } from "../middlewares/auth.js" import { upload } from "../middlewares/upload.js" import type { Express } from "express" export const uploadRoutes = Router() uploadRoutes.use(authMiddleware) uploadRoutes.post("/", upload.single("file"), async (req, res) => { const file = req.file if (!file) { return res.status(400).json({ success: false, error: "Nenhum arquivo enviado" }) } const attachment = await prisma.attachment.create({ data: { filename: file.filename, originalName: file.originalname, mimeType: file.mimetype, size: file.size, path: `/uploads/${file.filename}`, productId: req.body.productId || null, }, }) res.json({ success: true, data: attachment }) }) uploadRoutes.post("/multiple", upload.array("files", 10), async (req, res) => { const files = req.files as Express.Multer.File[] if (!files || files.length === 0) { return res.status(400).json({ success: false, error: "Nenhum arquivo enviado" }) } const attachments = await Promise.all( files.map((file) => prisma.attachment.create({ data: { filename: file.filename, originalName: file.originalname, mimeType: file.mimetype, size: file.size, path: `/uploads/${file.filename}`, productId: req.body.productId || null, }, }), ), ) res.json({ success: true, data: attachments }) }) uploadRoutes.delete("/:id", async (req, res) => { await prisma.attachment.delete({ where: { id: req.params.id } }) res.json({ success: true, message: "Arquivo removido" }) }) [V0_FILE]json:file="client/package.json" isMerged="true" { "name": "textilmanager-client", "version": "1.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "preview": "vite preview" }, "dependencies": { "@hookform/resolvers": "^3.3.4", "@tanstack/react-query": "^5.24.1", "axios": "^1.6.7", "clsx": "^2.1.0", "date-fns": "^3.3.1", "framer-motion": "^11.0.8", "lucide-react": "^0.344.0", "react": "^18.3.0", "react-dom": "^18.3.0", "react-dropzone": "^14.2.3", "react-hook-form": "^7.50.1", "react-hot-toast": "^2.4.1", "react-router-dom": "^6.22.2", "recharts": "^2.12.2", "tailwind-merge": "^2.2.1", "zod": "^3.22.4", "zustand": "^4.5.1" }, "devDependencies": { "@types/react": "^18.2.64", "@types/react-dom": "^18.2.21", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.18", "postcss": "^8.4.35", "tailwindcss": "^3.4.1", "typescript": "^5.3.3", "vite": "^5.1.4" } } [V0_FILE]typescript:file="client/vite.config.ts" isMerged="true" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import path from "path" export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, server: { port: 5173, proxy: { "/api": { target: "http://localhost:3001", changeOrigin: true, }, }, }, }) [V0_FILE]json:file="client/tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } [V0_FILE]json:file="client/tsconfig.node.json" isMerged="true" { "compilerOptions": { "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", "allowSyntheticDefaultImports": true, "strict": true }, "include": ["vite.config.ts"] } [V0_FILE]javascript:file="client/tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { colors: { primary: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81", 950: "#1e1b4b", }, dark: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617", }, }, fontFamily: { sans: ["Inter", "system-ui", "sans-serif"], }, }, }, plugins: [], } [V0_FILE]javascript:file="client/postcss.config.js" isMerged="true" export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]html:file="client/index.html" isMerged="true" TextilManager ERP Pro

[V0_FILE]css:file="client/src/index.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f1f5f9; } /* Scrollbar customizada */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Animações */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.3s ease-out; } /* Focus styles */ *:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; } /* Loader */ .loader { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Cards hover effect */ .card-hover { transition: all 0.2s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Table styles */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Mobile menu animation */ .sidebar-mobile { transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar-mobile.open { transform: translateX(0); } /* Badge pulse */ .badge-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } [V0_FILE]typescriptreact:file="client/src/main.tsx" isMerged="true" import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { Toaster } from "react-hot-toast" import App from "./App" import "./index.css" const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5, retry: 1, refetchOnWindowFocus: false, }, }, }) ReactDOM.createRoot(document.getElementById("root")!).render( , ) [V0_FILE]typescript:file="client/src/lib/api.ts" isMerged="true" import axios from "axios" import { useAuthStore } from "../store/authStore" const api = axios.create({ baseURL: "/api", headers: { "Content-Type": "application/json", }, }) // Interceptor para adicionar token api.interceptors.request.use((config) => { const token = useAuthStore.getState().token if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // Interceptor para tratar erros api.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { useAuthStore.getState().logout() window.location.href = "/login" } return Promise.reject(error) }, ) export default api [V0_FILE]typescript:file="client/src/lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function formatCurrency(value: number): string { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(value) } export function formatDate(date: string | Date): string { return new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric", }).format(new Date(date)) } export function formatDateTime(date: string | Date): string { return new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", }).format(new Date(date)) } export function debounce unknown>( fn: T, delay: number, ): (...args: Parameters) => void { let timeoutId: ReturnType return (...args: Parameters) => { clearTimeout(timeoutId) timeoutId = setTimeout(() => fn(...args), delay) } } export function getStatusColor(status: string): string { const colors: Record = { disponivel: "bg-emerald-100 text-emerald-800", em_uso: "bg-blue-100 text-blue-800", pendente: "bg-amber-100 text-amber-800", enviado: "bg-sky-100 text-sky-800", entregue: "bg-emerald-100 text-emerald-800", processado: "bg-emerald-100 text-emerald-800", armazenado: "bg-slate-100 text-slate-800", critical: "bg-red-100 text-red-800", ok: "bg-emerald-100 text-emerald-800", } return colors[status] || "bg-slate-100 text-slate-800" } export function getStockStatus(quantity: number, minQuantity: number): { status: string; color: string } { if (quantity === 0) return { status: "Esgotado", color: "bg-red-100 text-red-800" } if (quantity <= minQuantity) return { status: "Crítico", color: "bg-amber-100 text-amber-800" } return { status: "OK", color: "bg-emerald-100 text-emerald-800" } } [V0_FILE]typescript:file="client/src/store/authStore.ts" isMerged="true" import { create } from "zustand" import { persist } from "zustand/middleware" import api from "../lib/api" interface User { id: string email: string name: string role: string avatar?: string } interface AuthState { user: User | null token: string | null isAuthenticated: boolean isLoading: boolean login: (email: string, password: string) => Promise register: (email: string, password: string, name: string) => Promise logout: () => void checkAuth: () => Promise } export const useAuthStore = create()( persist( (set, get) => ({ user: null, token: null, isAuthenticated: false, isLoading: false, login: async (email: string, password: string) => { set({ isLoading: true }) try { const { data } = await api.post("/auth/login", { email, password }) set({ user: data.data.user, token: data.data.token, isAuthenticated: true, isLoading: false, }) } catch (error) { set({ isLoading: false }) throw error } }, register: async (email: string, password: string, name: string) => { set({ isLoading: true }) try { const { data } = await api.post("/auth/register", { email, password, name }) set({ user: data.data.user, token: data.data.token, isAuthenticated: true, isLoading: false, }) } catch (error) { set({ isLoading: false }) throw error } }, logout: () => { set({ user: null, token: null, isAuthenticated: false, }) }, checkAuth: async () => { const token = get().token if (!token) return try { const { data } = await api.get("/auth/me") set({ user: data.data, isAuthenticated: true }) } catch { set({ user: null, token: null, isAuthenticated: false }) } }, }), { name: "textilmanager-auth", partialize: (state) => ({ token: state.token, user: state.user, isAuthenticated: state.isAuthenticated }), }, ), ) [V0_FILE]typescriptreact:file="client/src/pages/Login.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useNavigate } from "react-router-dom" import { motion } from "framer-motion" import { Package, Mail, Lock, Eye, EyeOff, Loader2 } from "lucide-react" import { useAuthStore } from "../store/authStore" import toast from "react-hot-toast" export default function Login() { const [email, setEmail] = useState("admin@textilmanager.com") const [password, setPassword] = useState("admin123") const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const navigate = useNavigate() const { login } = useAuthStore() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await login(email, password) toast.success("Login realizado com sucesso!") navigate("/dashboard") } catch (error: unknown) { const err = error as { response?: { data?: { error?: string } } } toast.error(err.response?.data?.error || "Erro ao fazer login") } finally { setIsLoading(false) } } return (

{/* Left side - Form */}

TextilManager

ERP Pro

Bem-vindo de volta!

Entre com suas credenciais para acessar o sistema.

setEmail(e.target.value)} className="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all" placeholder="seu@email.com" required />

Senha

setPassword(e.target.value)} className="w-full pl-10 pr-12 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all" placeholder="********" required />

Credenciais de teste:
admin@textilmanager.com / admin123

{/* Right side - Image */}

Gestão Têxtil Completa

Controle total do seu almoxarifado, fios, agulhas, qualidade e expedição em um único sistema.

100%

Responsivo

Módulos

24/7

Disponível

) } [V0_FILE]typescriptreact:file="client/src/pages/Dashboard.tsx" isEdit="true" isMerged="true" "use client" import { useQuery } from "@tanstack/react-query" import { motion } from "framer-motion" import { Package, Scissors, Layers, Truck, AlertTriangle, ArrowUpRight, ArrowDownRight, RefreshCw, Users, Building2, Clock, CheckCircle2, XCircle, Bell, ChevronRight, FileText, } from "lucide-react" import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts" import { Link } from "react-router-dom" import api from "../lib/api" import { formatDateTime, getStockStatus } from "../lib/utils" const COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"] export default function Dashboard() { const { data, isLoading, refetch } = useQuery({ queryKey: ["dashboard-stats"], queryFn: async () => { const { data } = await api.get("/dashboard/stats") return data.data }, refetchInterval: 60000, }) const { data: alerts } = useQuery({ queryKey: ["dashboard-alerts"], queryFn: async () => { const { data } = await api.get("/dashboard/alerts") return data.data }, refetchInterval: 60000, }) const { data: activities } = useQuery({ queryKey: ["dashboard-activities"], queryFn: async () => { const { data } = await api.get("/dashboard/activities") return data.data }, refetchInterval: 60000, }) if (isLoading) { return (

) } const kpis = data?.kpis || {} const criticalProducts = data?.criticalProducts || [] const criticalThreads = data?.criticalThreads || [] const latestMovements = data?.latestMovements || [] const latestShipments = data?.latestShipments || [] const categoryDistribution = data?.categoryDistribution || [] const shipmentsByStatus = data?.shipmentsByStatus || [] // KPI Cards principais const mainKpiCards = [ { title: "Produtos em Estoque", value: kpis.totalProducts || 0, subtitle: `${kpis.lowStockProducts || 0} com estoque baixo`, icon: Package, color: "from-blue-500 to-blue-600", trend: kpis.lowStockProducts > 0 ? "down" : "up", link: "/almoxarifado", }, { title: "Fios Cadastrados", value: kpis.totalThreads || 0, subtitle: `${(kpis.totalThreadWeight || 0).toFixed(1)} kg total`, icon: Layers, color: "from-indigo-500 to-indigo-600", trend: kpis.lowWeightThreads > 0 ? "down" : "up", link: "/fios", }, { title: "Expedições Pendentes", value: kpis.pendingShipments || 0, subtitle: `${kpis.sentShipments || 0} em trânsito`, icon: Truck, color: "from-amber-500 to-amber-600", trend: kpis.pendingShipments > 3 ? "down" : "up", link: "/expedicao", }, { title: "Clientes Ativos", value: kpis.totalCustomers || 0, subtitle: `${kpis.totalThirdParties || 0} terceiros`, icon: Users, color: "from-emerald-500 to-emerald-600", trend: "up", link: "/clientes", }, ] // KPIs secundários const secondaryKpis = [ { label: "Agulhas", value: kpis.totalNeedles || 0, icon: Scissors, alert: kpis.lowStockNeedles > 0 }, { label: "Qualidade Pendente", value: kpis.pendingQuality || 0, icon: CheckCircle2, alert: kpis.pendingQuality > 0, }, { label: "Reciclados (kg)", value: (kpis.totalRecycled || 0).toFixed(1), icon: RefreshCw, alert: false }, { label: "Terceiros Pendentes", value: kpis.pendingThirdPartyOrders || 0, icon: Building2, alert: kpis.pendingThirdPartyOrders > 0, }, ] // Agrupar alertas por prioridade const criticalAlerts = (alerts || []).filter((a: Record) => a.priority === "alta") const warningAlerts = (alerts || []).filter((a: Record) => a.priority === "media") const infoAlerts = (alerts || []).filter((a: Record) => a.priority === "normal") return (

{/* Header */}

Dashboard

Visao geral do sistema TextilManager

{/* Main KPI Cards */}

{mainKpiCards.map((kpi, index) => (

{kpi.trend === "up" ? : }

{kpi.value}

{kpi.title}

{kpi.subtitle}

Ver detalhes

))}

{/* Secondary KPIs */} {secondaryKpis.map((kpi) => (

{kpi.value}

{kpi.label}

))} {/* Alerts Section */} {(criticalAlerts.length > 0 || warningAlerts.length > 0) && ( {/* Critical Alerts */} {criticalAlerts.length > 0 && (

Alertas Criticos ({criticalAlerts.length})

{criticalAlerts.slice(0, 6).map((alert: Record) => (

{alert.title as string}

{alert.message as string}

))}

)} {/* Warning Alerts */} {warningAlerts.length > 0 && (

Atencao ({warningAlerts.length})

{warningAlerts.slice(0, 8).map((alert: Record) => (

{alert.title as string}

{alert.message as string}

))}

)} )} {/* Charts Row */}

{/* Category Distribution */}

Distribuicao por Categoria

{categoryDistribution.length > 0 ? ( `${category} (${(percent * 100).toFixed(0)}%)`} labelLine={false} > {categoryDistribution.map((_: unknown, index: number) => ( ))} [`${value} produtos`, name]} contentStyle={{ backgroundColor: "#1e293b", border: "none", borderRadius: "8px", color: "#f8fafc", }} /> ) : (

Nenhum dado disponível

)}

{/* Shipments by Status */}

Status das Expedicoes

{shipmentsByStatus.length > 0 ? ( {shipmentsByStatus.map((entry: Record, index: number) => ( ))} ) : (

Nenhum dado disponível

)}

{/* Tables Row */}

{/* Critical Products */}

Produtos com Estoque Critico

Ver todos

{criticalProducts.length > 0 ? ( criticalProducts.slice(0, 8).map((product: Record) => { const status = getStockStatus(product.quantity as number, product.minQuantity as number) return ( ) }) ) : ( )}

Codigo	Produto	Local	Qtd	Status
{product.code as string}	{product.name as string}	{((product.warehouse as Record)?.name as string) \|\| ((product.location as Record)?.name as string) \|\| "-"}	{product.quantity as number}	{status.status}
Nenhum produto com estoque critico

{/* Recent Activities Timeline */}

Atividades Recentes

{(activities || []).length > 0 ? ( (activities || []).slice(0, 10).map((activity: Record) => (

{activity.action as string} - {activity.entity as string}

{activity.entityName as string}

{((activity.user as Record)?.name as string) || "Sistema"} -{" "} {formatDateTime(activity.createdAt as string)}

)) ) : (

Nenhuma atividade recente

)}

{/* Shipments and Threads Row */}

{/* Latest Shipments */}

Ultimas Expedicoes

Ver todas

{latestShipments.length > 0 ? ( latestShipments.slice(0, 5).map((shipment: Record) => (

{shipment.code as string}

{((shipment.customer as Record)?.name as string) || "Sem cliente"}

{shipment.status as string}

)) ) : (

Nenhuma expedicao recente

)}

{/* Critical Threads */}

Fios com Peso Baixo

Ver todos

{criticalThreads.length > 0 ? ( criticalThreads.map((thread: Record) => (

{thread.name as string}

{thread.code as string}

{(thread.currentWeight as number).toFixed(2)} kg

Min: {(thread.minWeight as number).toFixed(2)} kg

)) ) : (

Nenhum fio com peso critico

)}

{/* Info Alerts (less prominent) */} {infoAlerts.length > 0 && (

Informacoes ({infoAlerts.length})

{infoAlerts.slice(0, 6).map((alert: Record) => ( {alert.message as string} ))}

)}

) } [V0_FILE]typescriptreact:file="client/src/components/ui/Modal.tsx" isMerged="true" "use client" import type React from "react" import { useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { X } from "lucide-react" import { cn } from "../../lib/utils" interface ModalProps { isOpen: boolean onClose: () => void title: string children: React.ReactNode size?: "sm" | "md" | "lg" | "xl" } const sizeClasses = { sm: "max-w-md", md: "max-w-lg", lg: "max-w-2xl", xl: "max-w-4xl", } export default function Modal({ isOpen, onClose, title, children, size = "md" }: ModalProps) { useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "auto" } return () => { document.body.style.overflow = "auto" } }, [isOpen]) useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") onClose() } window.addEventListener("keydown", handleEscape) return () => window.removeEventListener("keydown", handleEscape) }, [onClose]) return ( {isOpen && (

{title}

{children}

)} ) } [V0_FILE]typescriptreact:file="client/src/components/ui/DataTable.tsx" isMerged="true" "use client" import type React from "react" import { useState, useMemo } from "react" import { Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Download, Filter, ArrowUpDown, } from "lucide-react" import { cn, debounce } from "../../lib/utils" interface Column { key: string header: string render?: (item: T) => React.ReactNode sortable?: boolean className?: string } interface DataTableProps { data: T[] columns: Column[] searchPlaceholder?: string onSearch?: (query: string) => void pagination?: { page: number limit: number total: number totalPages: number } onPageChange?: (page: number) => void onExport?: (format: "csv" | "pdf") => void loading?: boolean actions?: (item: T) => React.ReactNode filters?: React.ReactNode emptyMessage?: string } export default function DataTable({ data, columns, searchPlaceholder = "Buscar...", onSearch, pagination, onPageChange, onExport, loading = false, actions, filters, emptyMessage = "Nenhum registro encontrado", }: DataTableProps) { const [searchQuery, setSearchQuery] = useState("") const [sortKey, setSortKey] = useState(null) const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc") const debouncedSearch = useMemo( () => debounce((query: string) => { onSearch?.(query) }, 300), [onSearch], ) const handleSearch = (e: React.ChangeEvent) => { const query = e.target.value setSearchQuery(query) debouncedSearch(query) } const handleSort = (key: string) => { if (sortKey === key) { setSortOrder(sortOrder === "asc" ? "desc" : "asc") } else { setSortKey(key) setSortOrder("asc") } } const sortedData = useMemo(() => { if (!sortKey) return data return [...data].sort((a, b) => { const aVal = (a as Record)[sortKey] const bVal = (b as Record)[sortKey] if (aVal < bVal) return sortOrder === "asc" ? -1 : 1 if (aVal > bVal) return sortOrder === "asc" ? 1 : -1 return 0 }) }, [data, sortKey, sortOrder]) return (

{/* Header */}

{/* Search */}

{/* Actions */}

{filters && (

{filters}

)} {onExport && (

)}

{/* Table */}

{columns.map((column) => ( ))} {actions && } {loading ? ( ) : sortedData.length === 0 ? ( ) : ( sortedData.map((item) => ( {columns.map((column) => ( ))} {actions && } )) )}

column.sortable && handleSort(column.key)} > {column.header} {column.sortable && ( )}	Ações
Carregando...
{emptyMessage}
{column.render ? column.render(item) : ((item as Record)[column.key] as React.ReactNode) \|\| "-"}	{actions(item)}

{/* Pagination */} {pagination && pagination.totalPages > 1 && (

Mostrando {(pagination.page - 1) * pagination.limit + 1} a{" "} {Math.min(pagination.page * pagination.limit, pagination.total)} de {pagination.total} registros

{pagination.page} / {pagination.totalPages}

)}

) } [V0_FILE]typescriptreact:file="client/src/pages/Almoxarifado.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query" import { motion } from "framer-motion" import { Plus, Edit2, Trash2, Eye, ArrowUpRight, ArrowDownRight, Package, FileText, FolderPlus, MapPin, Download, Printer, } from "lucide-react" import toast from "react-hot-toast" import api from "../lib/api" import { formatCurrency, getStockStatus, formatDateTime } from "../lib/utils" import DataTable from "../components/ui/DataTable" import Modal from "../components/ui/Modal" import ExportButtons from "../components/ui/ExportButtons" // Import ExportButtons import PrintReport from "../components/ui/PrintReport" // Import PrintReport interface Product { id: string code: string name: string description: string unit: string quantity: number minQuantity: number costPrice: number category?: { id: string; name: string } location?: { id: string; name: string } createdAt?: string updatedAt?: string } interface Category { id: string name: string description?: string } interface Location { id: string name: string description?: string } export default function Almoxarifado() { const [page, setPage] = useState(1) const [search, setSearch] = useState("") const [statusFilter, setStatusFilter] = useState("") const [categoryFilter, setCategoryFilter] = useState("") const [isCreateModalOpen, setIsCreateModalOpen] = useState(false) const [isEditModalOpen, setIsEditModalOpen] = useState(false) const [isDetailModalOpen, setIsDetailModalOpen] = useState(false) const [isMovementModalOpen, setIsMovementModalOpen] = useState(false) const [isReportModalOpen, setIsReportModalOpen] = useState(false) const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false) const [isLocationModalOpen, setIsLocationModalOpen] = useState(false) const [selectedProduct, setSelectedProduct] = useState(null) const [movementType, setMovementType] = useState<"entrada" | "saida">("entrada") const queryClient = useQueryClient() const { data, isLoading } = useQuery({ queryKey: ["products", page, search, statusFilter, categoryFilter], queryFn: async () => { const params = new URLSearchParams({ page: String(page), limit: "15", search, ...(statusFilter && { status: statusFilter }), ...(categoryFilter && { categoryId: categoryFilter }), }) const { data } = await api.get(`/products?${params}`) return data }, }) const { data: categories, refetch: refetchCategories } = useQuery({ queryKey: ["categories"], queryFn: async () => { const { data } = await api.get("/categories") return data.data || [] }, }) const { data: locations, refetch: refetchLocations } = useQuery({ queryKey: ["locations"], queryFn: async () => { const { data } = await api.get("/locations") return data.data || [] }, }) const stats = { total: data?.pagination?.total || 0, critical: data?.data?.filter((p: Product) => p.quantity > 0 && p.quantity <= p.minQuantity).length || 0, empty: data?.data?.filter((p: Product) => p.quantity === 0).length || 0, ok: data?.data?.filter((p: Product) => p.quantity > p.minQuantity).length || 0, } const createMutation = useMutation({ mutationFn: (data: Partial) => api.post("/products", data), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["products"] }) toast.success("Produto criado com sucesso!") setIsCreateModalOpen(false) }, onError: (error: { response?: { data?: { error?: string } } }) => { toast.error(error.response?.data?.error || "Erro ao criar produto") }, }) const updateMutation = useMutation({ mutationFn: ({ id, data }: { id: string; data: Partial }) => api.put(`/products/${id}`, data), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["products"] }) toast.success("Produto atualizado com sucesso!") setIsEditModalOpen(false) }, onError: (error: { response?: { data?: { error?: string } } }) => { toast.error(error.response?.data?.error || "Erro ao atualizar produto") }, }) const deleteMutation = useMutation({ mutationFn: (id: string) => api.delete(`/products/${id}`), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["products"] }) toast.success("Produto removido com sucesso!") }, onError: (error: { response?: { data?: { error?: string } } }) => { toast.error(error.response?.data?.error || "Erro ao remover produto") }, }) const movementMutation = useMutation({ mutationFn: ({ id, data, }: { id: string data: { type: string; quantity: number; reason: string } }) => api.post(`/products/${id}/movement`, data), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["products"] }) toast.success("Movimentacao registrada com sucesso!") setIsMovementModalOpen(false) }, onError: (error: { response?: { data?: { error?: string } } }) => { toast.error(error.response?.data?.error || "Erro ao registrar movimentacao") }, }) const createCategoryMutation = useMutation({ mutationFn: (data: { name: string; description?: string }) => api.post("/categories", data), onSuccess: () => { refetchCategories() toast.success("Categoria criada com sucesso!") setIsCategoryModalOpen(false) }, onError: () => toast.error("Erro ao criar categoria"), }) const createLocationMutation = useMutation({ mutationFn: (data: { name: string; description?: string }) => api.post("/locations", data), onSuccess: () => { refetchLocations() toast.success("Local criado com sucesso!") setIsLocationModalOpen(false) }, onError: () => toast.error("Erro ao criar local"), }) const handleCreate = (e: React.FormEvent) => { e.preventDefault() const formData = new FormData(e.currentTarget) createMutation.mutate({ code: formData.get("code") as string, name: formData.get("name") as string, description: formData.get("description") as string, unit: formData.get("unit") as string, quantity: Number(formData.get("quantity")), minQuantity: Number(formData.get("minQuantity")), costPrice: Number(formData.get("costPrice")), categoryId: (formData.get("categoryId") as string) || undefined, locationId: (formData.get("locationId") as string) || undefined, } as Partial & { categoryId?: string; locationId?: string }) } const handleEdit = (e: React.FormEvent) => { e.preventDefault() if (!selectedProduct) return const formData = new FormData(e.currentTarget) updateMutation.mutate({ id: selectedProduct.id, data: { name: formData.get("name") as string, description: formData.get("description") as string, unit: formData.get("unit") as string, minQuantity: Number(formData.get("minQuantity")), costPrice: Number(formData.get("costPrice")), categoryId: (formData.get("categoryId") as string) || undefined, locationId: (formData.get("locationId") as string) || undefined, } as Partial & { categoryId?: string; locationId?: string }, }) } const handleMovement = (e: React.FormEvent) => { e.preventDefault() if (!selectedProduct) return const formData = new FormData(e.currentTarget) movementMutation.mutate({ id: selectedProduct.id, data: { type: movementType, quantity: Number(formData.get("quantity")), reason: formData.get("reason") as string, }, }) } const handleDelete = (product: Product) => { if (confirm(`Tem certeza que deseja remover o produto ${product.name}?`)) { deleteMutation.mutate(product.id) } } const handleCreateCategory = (e: React.FormEvent) => { e.preventDefault() const formData = new FormData(e.currentTarget) createCategoryMutation.mutate({ name: formData.get("name") as string, description: formData.get("description") as string, }) } const handleCreateLocation = (e: React.FormEvent) => { e.preventDefault() const formData = new FormData(e.currentTarget) createLocationMutation.mutate({ name: formData.get("name") as string, description: formData.get("description") as string, }) } const exportToExcel = () => { const dataToExport = data?.data || [] if (dataToExport.length === 0) { toast.error("Nenhum dado para exportar") return } const headers = ["Codigo", "Nome", "Categoria", "Local", "Quantidade", "Unidade", "Qtd Minima", "Custo Unit.", "Valor Total", "Status", "Data Cadastro"] const rows = dataToExport.map((p: Product) => [ p.code, p.name, p.category?.name || "-", p.location?.name || "-", p.quantity, p.unit, p.minQuantity, p.costPrice?.toFixed(2) || "0.00", (p.costPrice * p.quantity)?.toFixed(2) || "0.00", getStockStatus(p.quantity, p.minQuantity).status, p.createdAt ? formatDateTime(p.createdAt) : "-", ]) // Criar conteudo CSV compativel com Excel const BOM = "\uFEFF" const csvContent = BOM + [headers.join("\t"), ...rows.map((row) => row.join("\t"))].join("\r\n") const blob = new Blob([csvContent], { type: "application/vnd.ms-excel;charset=utf-8" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `almoxarifado_${new Date().toISOString().split("T")[0]}.xls` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) toast.success("Arquivo Excel exportado com sucesso!") } const exportToCSV = () => { const dataToExport = data?.data || [] if (dataToExport.length === 0) { toast.error("Nenhum dado para exportar") return } const headers = ["Codigo", "Nome", "Categoria", "Local", "Quantidade", "Unidade", "Qtd Minima", "Custo", "Valor Total", "Status"] const rows = dataToExport.map((p: Product) => [ p.code, p.name, p.category?.name || "-", p.location?.name || "-", p.quantity, p.unit, p.minQuantity, p.costPrice, (p.costPrice * p.quantity).toFixed(2), getStockStatus(p.quantity, p.minQuantity).status, ]) const BOM = "\uFEFF" const csvContent = BOM + [headers.join(";"), ...rows.map((row) => row.join(";"))].join("\r\n") const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `almoxarifado_${new Date().toISOString().split("T")[0]}.csv` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) toast.success("Arquivo CSV exportado com sucesso!") } const printReport = () => { const dataToExport = data?.data || [] if (dataToExport.length === 0) { toast.error("Nenhum dado para imprimir") return } const totalValue = dataToExport.reduce((sum: number, p: Product) => sum + p.costPrice * p.quantity, 0) const printWindow = window.open("", "_blank") if (!printWindow) { toast.error("Popup bloqueado. Permita popups para imprimir.") return } const html = ` Relatorio Almoxarifado - TextilManager

${stats.total}Total Produtos

${stats.ok}Estoque OK

${stats.critical}Critico

${stats.empty}Esgotado

R$ ${totalValue.toFixed(2)}Valor Total

${dataToExport.map((p: Product) => { const status = getStockStatus(p.quantity, p.minQuantity) const statusClass = status.status === "OK" ? "status-ok" : status.status === "Critico" ? "status-critico" : "status-esgotado" return ` ` }).join("")}

Codigo	Produto	Categoria	Local	Qtd	Unid.	Min.	Custo Unit.	Valor Total	Status
${p.code}	${p.name}	${p.category?.name \|\| "-"}	${p.location?.name \|\| "-"}	${p.quantity}	${p.unit}	${p.minQuantity}	R$ ${p.costPrice?.toFixed(2) \|\| "0.00"}	R$ ${(p.costPrice * p.quantity)?.toFixed(2) \|\| "0.00"}	${status.status}
TOTAL GERAL:								R$ ${totalValue.toFixed(2)}

` printWindow.document.write(html) printWindow.document.close() toast.success("Relatorio enviado para impressao!") } const handleExport = (format: "csv" | "pdf" | "excel") => { if (format === "excel") { exportToExcel() } else if (format === "csv") { exportToCSV() } else { printReport() } } const columns = [ { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" }, { key: "name", header: "Produto", sortable: true, className: "font-medium text-slate-900" }, { key: "category", header: "Categoria", render: (item: Product) => item.category?.name || "-" }, { key: "location", header: "Local", render: (item: Product) => item.location?.name || "-" }, { key: "quantity", header: "Qtd", sortable: true, className: "font-medium" }, { key: "unit", header: "Unidade" }, { key: "costPrice", header: "Custo", render: (item: Product) => formatCurrency(item.costPrice), }, { key: "status", header: "Status", render: (item: Product) => { const status = getStockStatus(item.quantity, item.minQuantity) return {status.status} }, }, ] // Dados para o relatorio const reportData = (data?.data || []).map((p: Product) => ({ Codigo: p.code, Produto: p.name, Categoria: p.category?.name || "-", Local: p.location?.name || "-", Quantidade: p.quantity, Unidade: p.unit, "Qtd Minima": p.minQuantity, "Custo Unitario": formatCurrency(p.costPrice), "Valor Total": formatCurrency(p.costPrice * p.quantity), Status: getStockStatus(p.quantity, p.minQuantity).status, })) const reportSummary = { "Total de Produtos": stats.total, "Estoque OK": stats.ok, "Estoque Critico": stats.critical, Esgotados: stats.empty, "Valor Total em Estoque": formatCurrency( (data?.data || []).reduce((sum: number, p: Product) => sum + p.costPrice * p.quantity, 0), ), } return (

{/* Header */}

Almoxarifado

Gestao de produtos e estoque

{/* Stats Cards */}

{stats.total}

Total de Produtos

{stats.ok}

Estoque OK

{stats.critical}

Estoque Critico

{stats.empty}

Esgotados

{/* Data Table */}

} actions={(item: Product) => (

)} /> {/* Create Modal */} setIsCreateModalOpen(false)} title="Novo Produto" size="lg">

Codigo *

Nome *

Descricao

</div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Unidade</label>
              <select
                name="unit"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              >
                <option value="UN">Unidade (UN)</option>
                <option value="KG">Quilograma (KG)</option>
                <option value="MT">Metro (MT)</option>
                <option value="PC">Peca (PC)</option>
                <option value="CX">Caixa (CX)</option>
                <option value="LT">Litro (LT)</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade Inicial</label>
              <input
                name="quantity"
                type="number"
                min="0"
                defaultValue="0"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade Minima</label>
              <input
                name="minQuantity"
                type="number"
                min="0"
                defaultValue="0"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Custo (R$)</label>
              <input
                name="costPrice"
                type="number"
                min="0"
                step="0.01"
                defaultValue="0"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <div className="flex items-center justify-between mb-1">
                <label className="block text-sm font-medium text-slate-700">Categoria</label>
                <button
                  type="button"
                  onClick={() => setIsCategoryModalOpen(true)}
                  className="text-xs text-primary-600 hover:text-primary-700 flex items-center gap-1"
                >
                  <FolderPlus className="w-3 h-3" />
                  Nova
                </button>
              </div>
              <select
                name="categoryId"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              >
                <option value="">Selecione uma categoria...</option>
                {(categories || []).map((cat: Category) => (
                  <option key={cat.id} value={cat.id}>
                    {cat.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <div className="flex items-center justify-between mb-1">
                <label className="block text-sm font-medium text-slate-700">Local de Armazenagem</label>
                <button
                  type="button"
                  onClick={() => setIsLocationModalOpen(true)}
                  className="text-xs text-primary-600 hover:text-primary-700 flex items-center gap-1"
                >
                  <MapPin className="w-3 h-3" />
                  Novo
                </button>
              </div>
              <select
                name="locationId"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              >
                <option value="">Selecione um local...</option>
                {(locations || []).map((loc: Location) => (
                  <option key={loc.id} value={loc.id}>
                    {loc.name}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Produto" size="lg">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo</label>
              <input
                value={selectedProduct?.code || ""}
                disabled
                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-50"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                defaultValue={selectedProduct?.name}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Descricao</label>
              <textarea
                name="description"
                defaultValue={selectedProduct?.description}
                rows={2}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Unidade</label>
              <select
                name="unit"
                defaultValue={selectedProduct?.unit}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              >
                <option value="UN">Unidade (UN)</option>
                <option value="KG">Quilograma (KG)</option>
                <option value="MT">Metro (MT)</option>
                <option value="PC">Peca (PC)</option>
                <option value="CX">Caixa (CX)</option>
                <option value="LT">Litro (LT)</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade Minima</label>
              <input
                name="minQuantity"
                type="number"
                min="0"
                defaultValue={selectedProduct?.minQuantity}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Custo (R$)</label>
              <input
                name="costPrice"
                type="number"
                min="0"
                step="0.01"
                defaultValue={selectedProduct?.costPrice}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <div className="flex items-center justify-between mb-1">
                <label className="block text-sm font-medium text-slate-700">Categoria</label>
                <button
                  type="button"
                  onClick={() => setIsCategoryModalOpen(true)}
                  className="text-xs text-primary-600 hover:text-primary-700 flex items-center gap-1"
                >
                  <FolderPlus className="w-3 h-3" />
                  Nova
                </button>
              </div>
              <select
                name="categoryId"
                defaultValue={selectedProduct?.category?.id || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              >
                <option value="">Selecione uma categoria...</option>
                {(categories || []).map((cat: Category) => (
                  <option key={cat.id} value={cat.id}>
                    {cat.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <div className="flex items-center justify-between mb-1">
                <label className="block text-sm font-medium text-slate-700">Local de Armazenagem</label>
                <button
                  type="button"
                  onClick={() => setIsLocationModalOpen(true)}
                  className="text-xs text-primary-600 hover:text-primary-700 flex items-center gap-1"
                >
                  <MapPin className="w-3 h-3" />
                  Novo
                </button>
              </div>
              <select
                name="locationId"
                defaultValue={selectedProduct?.location?.id || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              >
                <option value="">Selecione um local...</option>
                {(locations || []).map((loc: Location) => (
                  <option key={loc.id} value={loc.id}>
                    {loc.name}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Movement Modal */}
      <Modal
        isOpen={isMovementModalOpen}
        onClose={() => setIsMovementModalOpen(false)}
        title={movementType === "entrada" ? "Entrada de Estoque" : "Saida de Estoque"}
      >
        <form onSubmit={handleMovement} className="space-y-4">
          <div className="bg-slate-50 p-3 rounded-lg">
            <p className="text-sm text-slate-500">Produto</p>
            <p className="font-medium">{selectedProduct?.name}</p>
            <p className="text-xs text-slate-400">
              Estoque atual: {selectedProduct?.quantity} {selectedProduct?.unit}
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade *</label>
            <input
              name="quantity"
              type="number"
              min="1"
              max={movementType === "saida" ? selectedProduct?.quantity : undefined}
              required
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Motivo *</label>
            <select
              name="reason"
              required
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
            >
              {movementType === "entrada" ? (
                <>
                  <option value="Compra">Compra</option>
                  <option value="Devolucao">Devolucao</option>
                  <option value="Transferencia">Transferencia de Galpao</option>
                  <option value="Ajuste de Inventario">Ajuste de Inventario</option>
                  <option value="Outros">Outros</option>
                </>
              ) : (
                <>
                  <option value="Venda">Venda</option>
                  <option value="Producao">Producao</option>
                  <option value="Transferencia">Transferencia de Galpao</option>
                  <option value="Perda">Perda/Avaria</option>
                  <option value="Ajuste de Inventario">Ajuste de Inventario</option>
                  <option value="Outros">Outros</option>
                </>
              )}
            </select>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsMovementModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={movementMutation.isPending}
              className={`px-4 py-2 text-white rounded-lg disabled:opacity-50 ${
                movementType === "entrada" ? "bg-emerald-600 hover:bg-emerald-700" : "bg-red-600 hover:bg-red-700"
              }`}
            >
              {movementMutation.isPending ? "Registrando..." : movementType === "entrada" ? "Dar Entrada" : "Dar Saida"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        title="Detalhes do Produto"
        size="lg"
      >
        {selectedProduct && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-medium font-mono">{selectedProduct.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Nome</span>
                <p className="font-medium">{selectedProduct.name}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Categoria</span>
                <p className="font-medium">{selectedProduct.category?.name || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Local</span>
                <p className="font-medium">{selectedProduct.location?.name || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Quantidade</span>
                <p className="font-medium">
                  {selectedProduct.quantity} {selectedProduct.unit}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Qtd Minima</span>
                <p className="font-medium">
                  {selectedProduct.minQuantity} {selectedProduct.unit}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Custo Unitario</span>
                <p className="font-medium">{formatCurrency(selectedProduct.costPrice)}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Valor Total em Estoque</span>
                <p className="font-medium text-emerald-600">
                  {formatCurrency(selectedProduct.costPrice * selectedProduct.quantity)}
                </p>
              </div>
              <div className="col-span-2">
                <span className="text-xs text-slate-500">Descricao</span>
                <p className="font-medium">{selectedProduct.description || "-"}</p>
              </div>
            </div>
          </div>
        )}
      </Modal>

<Modal isOpen={isCategoryModalOpen} onClose={() => setIsCategoryModalOpen(false)} title="Nova Categoria">
        <form onSubmit={handleCreateCategory} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
            <input
              name="name"
              required
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              placeholder="Ex: Pecas de Reposicao"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Descricao</label>
            <textarea
              name="description"
              rows={2}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              placeholder="Descricao da categoria..."
            />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCategoryModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createCategoryMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createCategoryMutation.isPending ? "Salvando..." : "Criar Categoria"}
            </button>
          </div>
        </form>
      </Modal>

<Modal
        isOpen={isLocationModalOpen}
        onClose={() => setIsLocationModalOpen(false)}
        title="Novo Local de Armazenagem"
      >
        <form onSubmit={handleCreateLocation} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
            <input
              name="name"
              required
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              placeholder="Ex: Prateleira A1, Galpao 01"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Descricao</label>
            <textarea
              name="description"
              rows={2}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              placeholder="Descricao do local..."
            />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsLocationModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createLocationMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createLocationMutation.isPending ? "Salvando..." : "Criar Local"}
            </button>
          </div>
        </form>
      </Modal>

{/* Report Modal */}
      <PrintReport
        isOpen={isReportModalOpen}
        onClose={() => setIsReportModalOpen(false)}
        title="Relatorio de Almoxarifado"
        data={reportData}
        summary={reportSummary}
        columns={[
          "Codigo",
          "Produto",
          "Categoria",
          "Local",
          "Quantidade",
          "Unidade",
          "Custo Unitario",
          "Valor Total",
          "Status",
        ]}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/components/ui/FileUpload.tsx" isMerged="true"
"use client"

import { useCallback, useState } from "react"
import { useDropzone } from "react-dropzone"
import { motion, AnimatePresence } from "framer-motion"
import { Upload, X, File, Image, FileText, Loader2 } from "lucide-react"
import toast from "react-hot-toast"
import api from "../../lib/api"
import { cn } from "../../lib/utils"

interface FileUploadProps {
  productId?: string
  onUploadComplete?: (files: UploadedFile[]) => void
  maxFiles?: number
  accept?: Record<string, string[]>
}

interface UploadedFile {
  id: string
  filename: string
  originalName: string
  mimeType: string
  size: number
  path: string
}

export default function FileUpload({
  productId,
  onUploadComplete,
  maxFiles = 5,
  accept = {
    "image/*": [".jpeg", ".jpg", ".png", ".gif", ".webp"],
    "application/pdf": [".pdf"],
    "application/msword": [".doc"],
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
    "application/vnd.ms-excel": [".xls"],
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
  },
}: FileUploadProps) {
  const [files, setFiles] = useState<File[]>([])
  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])
  const [isUploading, setIsUploading] = useState(false)

const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      const newFiles = acceptedFiles.slice(0, maxFiles - files.length)
      setFiles((prev) => [...prev, ...newFiles])
    },
    [files.length, maxFiles],
  )

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept,
    maxFiles,
    maxSize: 10 * 1024 * 1024, // 10MB
    onDropRejected: (rejections) => {
      rejections.forEach((rejection) => {
        rejection.errors.forEach((error) => {
          if (error.code === "file-too-large") {
            toast.error("Arquivo muito grande. Máximo: 10MB")
          } else if (error.code === "file-invalid-type") {
            toast.error("Tipo de arquivo não permitido")
          }
        })
      })
    },
  })

const removeFile = (index: number) => {
    setFiles((prev) => prev.filter((_, i) => i !== index))
  }

const uploadFiles = async () => {
    if (files.length === 0) return

setIsUploading(true)

try {
      const uploaded: UploadedFile[] = []

for (const file of files) {
        const formData = new FormData()
        formData.append("file", file)
        if (productId) {
          formData.append("productId", productId)
        }

const { data } = await api.post("/upload", formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })

uploaded.push(data.data)
      }

setUploadedFiles((prev) => [...prev, ...uploaded])
      setFiles([])
      toast.success(`${uploaded.length} arquivo(s) enviado(s) com sucesso!`)
      onUploadComplete?.(uploaded)
    } catch (error) {
      toast.error("Erro ao enviar arquivo(s)")
    } finally {
      setIsUploading(false)
    }
  }

const getFileIcon = (mimeType: string) => {
    if (mimeType.startsWith("image/")) return Image
    if (mimeType.includes("pdf")) return FileText
    return File
  }

const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

return (
    <div className="space-y-4">
      {/* Dropzone */}
      <div
        {...getRootProps()}
        className={cn(
          "border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all",
          isDragActive
            ? "border-primary-500 bg-primary-50"
            : "border-slate-300 hover:border-primary-400 hover:bg-slate-50",
        )}
      >
        <input {...getInputProps()} />
        <Upload className={cn("w-12 h-12 mx-auto mb-4", isDragActive ? "text-primary-500" : "text-slate-400")} />
        <p className="text-slate-600 font-medium">
          {isDragActive ? "Solte os arquivos aqui..." : "Arraste arquivos ou clique para selecionar"}
        </p>
        <p className="text-sm text-slate-400 mt-2">Imagens, PDFs, Word, Excel (máx. 10MB cada)</p>
      </div>

{/* File List */}
      <AnimatePresence>
        {files.length > 0 && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="space-y-2"
          >
            {files.map((file, index) => {
              const Icon = getFileIcon(file.type)
              return (
                <motion.div
                  key={`${file.name}-${index}`}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: 20 }}
                  className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg"
                >
                  <Icon className="w-8 h-8 text-slate-400 flex-shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-slate-900 truncate">{file.name}</p>
                    <p className="text-xs text-slate-500">{formatFileSize(file.size)}</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => removeFile(index)}
                    className="p-1 hover:bg-slate-200 rounded-full"
                  >
                    <X className="w-4 h-4 text-slate-500" />
                  </button>
                </motion.div>
              )
            })}

<button
              type="button"
              onClick={uploadFiles}
              disabled={isUploading}
              className="w-full py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
            >
              {isUploading ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Enviando...
                </>
              ) : (
                <>
                  <Upload className="w-4 h-4" />
                  Enviar {files.length} arquivo(s)
                </>
              )}
            </button>
          </motion.div>
        )}
      </AnimatePresence>

{/* Uploaded Files */}
      {uploadedFiles.length > 0 && (
        <div className="space-y-2">
          <p className="text-sm font-medium text-slate-700">Arquivos enviados:</p>
          {uploadedFiles.map((file) => {
            const Icon = getFileIcon(file.mimeType)
            return (
              <div key={file.id} className="flex items-center gap-3 p-3 bg-emerald-50 rounded-lg">
                <Icon className="w-8 h-8 text-emerald-500 flex-shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-slate-900 truncate">{file.originalName}</p>
                  <p className="text-xs text-slate-500">{formatFileSize(file.size)}</p>
                </div>
                <span className="text-xs text-emerald-600 font-medium">Enviado</span>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}
[V0_FILE]xml:file="client/public/favicon.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#4f46e5;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" rx="20" fill="url(#grad)"/>
  <text x="50" y="68" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">T</text>
</svg>
[V0_FILE]plaintext:file="server/.env" isEdit="true" isMerged="true"
# Banco de Dados SQLite LOCAL
DATABASE_URL="file:./textilmanager.db"

# JWT Secret para autenticação
JWT_SECRET="textilmanager-erp-pro-super-secret-jwt-key-2024"
JWT_EXPIRES_IN="7d"

# Ambiente
NODE_ENV="development"

# Porta do servidor
PORT=3001
[V0_FILE]bat:file="iniciar-backend.bat" isEdit="true" isMerged="true"
@echo off
chcp 65001 >nul
title TextilManager ERP - Backend

echo.
echo ========================================
echo   TextilManager ERP Pro - Backend
echo ========================================
echo.

cd /d "%~dp0server"

if not exist "node_modules" (
    echo [1/4] Instalando dependencias...
    call npm install
    if errorlevel 1 (
        echo ERRO: Falha ao instalar dependencias
        pause
        exit /b 1
    )
) else (
    echo [1/4] Dependencias ja instaladas
)

echo.
echo [2/4] Gerando cliente Prisma...
call npx prisma generate
if errorlevel 1 (
    echo ERRO: Falha ao gerar cliente Prisma
    pause
    exit /b 1
)

echo.
echo [3/4] Criando/atualizando banco de dados SQLite...
call npx prisma db push --accept-data-loss
if errorlevel 1 (
    echo ERRO: Falha ao criar banco de dados
    pause
    exit /b 1
)

echo.
echo [4/4] Populando banco com dados iniciais...
call npx tsx prisma/seed.ts
if errorlevel 1 (
    echo AVISO: Seed pode ja ter sido executado anteriormente
)

echo.
echo ========================================
echo   Backend pronto! Iniciando servidor...
echo ========================================
echo.
echo Servidor: http://localhost:3001
echo.

call npm run dev
[V0_FILE]bat:file="iniciar-frontend.bat" isMerged="true"
@echo off
chcp 65001 >nul
title TextilManager ERP - Frontend

echo.
echo ========================================
echo   TextilManager ERP Pro - Frontend
echo ========================================
echo.

cd /d "%~dp0client"

REM Verificar se node_modules existe e tem o vite
if not exist "node_modules\.bin\vite.cmd" (
    echo [1/2] Instalando dependencias...
    echo     Isso pode demorar alguns minutos...
    call npm install --legacy-peer-deps
    if errorlevel 1 (
        echo.
        echo ERRO: Falha ao instalar dependencias
        echo Tente executar manualmente:
        echo   cd client
        echo   npm install --legacy-peer-deps
        echo.
        pause
        exit /b 1
    )
    echo     Dependencias instaladas com sucesso!
) else (
    echo [1/2] Dependencias ja instaladas
)

echo.
echo [2/2] Iniciando frontend...
echo.
echo ========================================
echo   Frontend pronto!
echo ========================================
echo.
echo Acesse: http://localhost:5173
echo.
echo Login: admin@textilmanager.com
echo Senha: admin123
echo.

REM Usar npx para garantir que vite seja encontrado
call npx vite --host
[V0_FILE]bat:file="iniciar-sistema.bat" isEdit="true" isMerged="true"
@echo off
chcp 65001 >nul
title TextilManager ERP - Iniciador

echo.
echo ========================================
echo   TextilManager ERP Pro
echo   Sistema de Gestao Textil
echo ========================================
echo.
echo Este script vai:
echo   1. Configurar o banco de dados SQLite
echo   2. Iniciar o servidor backend
echo   3. Iniciar o frontend React
echo.
echo Aguarde...
echo.

cd /d "%~dp0"

echo Abrindo Backend...
start "TextilManager Backend" cmd /k ""%~dp0iniciar-backend.bat""

echo Aguardando backend inicializar (15 segundos)...
timeout /t 15 /nobreak >nul

echo Abrindo Frontend...
start "TextilManager Frontend" cmd /k ""%~dp0iniciar-frontend.bat""

echo.
echo ========================================
echo   SISTEMA INICIADO!
echo ========================================
echo.
echo Backend:  http://localhost:3001
echo Frontend: http://localhost:5173
echo.
echo ----------------------------------------
echo   CREDENCIAIS DE ACESSO
echo ----------------------------------------
echo   Email: admin@textilmanager.com
echo   Senha: admin123
echo ----------------------------------------
echo.
echo O banco de dados SQLite fica salvo em:
echo   server/prisma/textilmanager.db
echo.
echo Pressione qualquer tecla para fechar...
pause >nul
[V0_FILE]typescript:file="server/src/routes/branch.routes.ts" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { authMiddleware } from "../middlewares/auth.js"

const router = Router()

router.use(authMiddleware)

// Listar filiais
router.get("/", async (req, res) => {
  const { page = "1", limit = "50", search = "" } = req.query as Record<string, string>
  const skip = (Number(page) - 1) * Number(limit)

const where = {
    isActive: true,
    ...(search && {
      OR: [{ name: { contains: search } }, { code: { contains: search } }, { city: { contains: search } }],
    }),
  }

const [data, total] = await Promise.all([
    prisma.branch.findMany({
      where,
      include: { warehouses: true, _count: { select: { users: true, shipments: true } } },
      skip,
      take: Number(limit),
      orderBy: { name: "asc" },
    }),
    prisma.branch.count({ where }),
  ])

res.json({
    success: true,
    data,
    pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)) },
  })
})

// Buscar filial por ID
router.get("/:id", async (req, res) => {
  const branch = await prisma.branch.findUnique({
    where: { id: req.params.id },
    include: { warehouses: true, users: { select: { id: true, name: true, email: true } } },
  })
  if (!branch) return res.status(404).json({ success: false, error: "Filial não encontrada" })
  res.json({ success: true, data: branch })
})

// Criar filial
router.post("/", async (req, res) => {
  const { code, name, cnpj, address, city, state, phone, email, isMain } = req.body
  const branch = await prisma.branch.create({
    data: { code, name, cnpj, address, city, state, phone, email, isMain },
  })
  res.status(201).json({ success: true, data: branch })
})

// Atualizar filial
router.put("/:id", async (req, res) => {
  const branch = await prisma.branch.update({
    where: { id: req.params.id },
    data: req.body,
  })
  res.json({ success: true, data: branch })
})

// Remover filial (soft delete)
router.delete("/:id", async (req, res) => {
  await prisma.branch.update({ where: { id: req.params.id }, data: { isActive: false } })
  res.json({ success: true, message: "Filial removida" })
})

export { router as branchRoutes }
[V0_FILE]typescript:file="server/src/routes/warehouse.routes.ts" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { authMiddleware } from "../middlewares/auth.js"

const router = Router()

router.use(authMiddleware)

// Listar galpões
router.get("/", async (req, res) => {
  const { page = "1", limit = "50", search = "", branchId } = req.query as Record<string, string>
  const skip = (Number(page) - 1) * Number(limit)

const where = {
    isActive: true,
    ...(branchId && { branchId }),
    ...(search && {
      OR: [{ name: { contains: search } }, { code: { contains: search } }],
    }),
  }

const [data, total] = await Promise.all([
    prisma.warehouse.findMany({
      where,
      include: { branch: true, _count: { select: { products: true, threads: true } } },
      skip,
      take: Number(limit),
      orderBy: { name: "asc" },
    }),
    prisma.warehouse.count({ where }),
  ])

res.json({
    success: true,
    data,
    pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)) },
  })
})

// Buscar galpão por ID
router.get("/:id", async (req, res) => {
  const warehouse = await prisma.warehouse.findUnique({
    where: { id: req.params.id },
    include: { branch: true },
  })
  if (!warehouse) return res.status(404).json({ success: false, error: "Galpão não encontrado" })
  res.json({ success: true, data: warehouse })
})

// Criar galpão
router.post("/", async (req, res) => {
  const warehouse = await prisma.warehouse.create({ data: req.body })
  res.status(201).json({ success: true, data: warehouse })
})

// Atualizar galpão
router.put("/:id", async (req, res) => {
  const warehouse = await prisma.warehouse.update({
    where: { id: req.params.id },
    data: req.body,
  })
  res.json({ success: true, data: warehouse })
})

// Remover galpão
router.delete("/:id", async (req, res) => {
  await prisma.warehouse.update({ where: { id: req.params.id }, data: { isActive: false } })
  res.json({ success: true, message: "Galpão removido" })
})

export { router as warehouseRoutes }
[V0_FILE]typescript:file="server/src/routes/customer.routes.ts" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { authMiddleware } from "../middlewares/auth.js"

const router = Router()

router.use(authMiddleware)

// Listar clientes
router.get("/", async (req, res) => {
  const { page = "1", limit = "50", search = "" } = req.query as Record<string, string>
  const skip = (Number(page) - 1) * Number(limit)

const where = {
    isActive: true,
    ...(search && {
      OR: [
        { name: { contains: search } },
        { code: { contains: search } },
        { cnpjCpf: { contains: search } },
        { city: { contains: search } },
      ],
    }),
  }

const [data, total] = await Promise.all([
    prisma.customer.findMany({
      where,
      include: { _count: { select: { shipments: true } } },
      skip,
      take: Number(limit),
      orderBy: { name: "asc" },
    }),
    prisma.customer.count({ where }),
  ])

res.json({
    success: true,
    data,
    pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)) },
  })
})

// Buscar cliente por ID
router.get("/:id", async (req, res) => {
  const customer = await prisma.customer.findUnique({
    where: { id: req.params.id },
    include: { shipments: { take: 10, orderBy: { createdAt: "desc" } } },
  })
  if (!customer) return res.status(404).json({ success: false, error: "Cliente não encontrado" })
  res.json({ success: true, data: customer })
})

// Criar cliente
router.post("/", async (req, res) => {
  const customer = await prisma.customer.create({ data: req.body })
  res.status(201).json({ success: true, data: customer })
})

// Atualizar cliente
router.put("/:id", async (req, res) => {
  const customer = await prisma.customer.update({
    where: { id: req.params.id },
    data: req.body,
  })
  res.json({ success: true, data: customer })
})

// Remover cliente
router.delete("/:id", async (req, res) => {
  await prisma.customer.update({ where: { id: req.params.id }, data: { isActive: false } })
  res.json({ success: true, message: "Cliente removido" })
})

export { router as customerRoutes }
[V0_FILE]typescript:file="server/src/routes/thirdparty.routes.ts" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { authMiddleware } from "../middlewares/auth.js"

const router = Router()

router.use(authMiddleware)

// Listar terceiros
router.get("/", async (req, res) => {
  const { page = "1", limit = "50", search = "" } = req.query as Record<string, string>
  const skip = (Number(page) - 1) * Number(limit)

const where = {
    isActive: true,
    ...(search && {
      OR: [{ name: { contains: search } }, { code: { contains: search } }, { serviceType: { contains: search } }],
    }),
  }

const [data, total] = await Promise.all([
    prisma.thirdParty.findMany({
      where,
      include: { _count: { select: { orders: true } } },
      skip,
      take: Number(limit),
      orderBy: { name: "asc" },
    }),
    prisma.thirdParty.count({ where }),
  ])

res.json({
    success: true,
    data,
    pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)) },
  })
})

// Buscar terceiro por ID
router.get("/:id", async (req, res) => {
  const thirdParty = await prisma.thirdParty.findUnique({
    where: { id: req.params.id },
    include: { orders: { take: 10, orderBy: { createdAt: "desc" } } },
  })
  if (!thirdParty) return res.status(404).json({ success: false, error: "Terceiro não encontrado" })
  res.json({ success: true, data: thirdParty })
})

// Criar terceiro
router.post("/", async (req, res) => {
  const thirdParty = await prisma.thirdParty.create({ data: req.body })
  res.status(201).json({ success: true, data: thirdParty })
})

// Atualizar terceiro
router.put("/:id", async (req, res) => {
  const thirdParty = await prisma.thirdParty.update({
    where: { id: req.params.id },
    data: req.body,
  })
  res.json({ success: true, data: thirdParty })
})

// Remover terceiro
router.delete("/:id", async (req, res) => {
  await prisma.thirdParty.update({ where: { id: req.params.id }, data: { isActive: false } })
  res.json({ success: true, message: "Terceiro removido" })
})

// Criar ordem para terceiro
router.post("/:id/orders", async (req, res) => {
  const { id } = req.params
  const order = await prisma.thirdPartyOrder.create({
    data: {
      ...req.body,
      code: `OT${Date.now().toString().slice(-8)}`,
      thirdPartyId: id,
      totalValue: (req.body.sentWeight || 0) * (req.body.pricePerKg || 0),
    },
    include: { thirdParty: true, thread: true },
  })
  res.status(201).json({ success: true, data: order })
})

// Listar ordens de terceiro
router.get("/:id/orders", async (req, res) => {
  const orders = await prisma.thirdPartyOrder.findMany({
    where: { thirdPartyId: req.params.id, isActive: true },
    include: { thread: true, customer: true },
    orderBy: { createdAt: "desc" },
  })
  res.json({ success: true, data: orders })
})

// Atualizar ordem de terceiro (retorno)
router.patch("/orders/:orderId/return", async (req, res) => {
  const { returnWeight, status } = req.body
  const order = await prisma.thirdPartyOrder.update({
    where: { id: req.params.orderId },
    data: {
      returnWeight,
      returnedAt: new Date(),
      status: status || "finalizado",
    },
  })
  res.json({ success: true, data: order })
})

export { router as thirdPartyRoutes }
[V0_FILE]typescript:file="server/src/routes/notification.routes.ts" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { authMiddleware } from "../middlewares/auth.js"

const router = Router()

router.use(authMiddleware)

// Listar notificações do usuário
router.get("/", async (req, res) => {
  const userId = req.user?.id
  const { unreadOnly = "false", limit = "20" } = req.query as Record<string, string>

const where = {
    OR: [{ userId }, { userId: null }],
    ...(unreadOnly === "true" && { isRead: false }),
  }

const notifications = await prisma.notification.findMany({
    where,
    orderBy: { createdAt: "desc" },
    take: Number(limit),
  })

const unreadCount = await prisma.notification.count({
    where: { ...where, isRead: false },
  })

res.json({ success: true, data: notifications, unreadCount })
})

// Marcar notificação como lida
router.patch("/:id/read", async (req, res) => {
  const notification = await prisma.notification.update({
    where: { id: req.params.id },
    data: { isRead: true, readAt: new Date() },
  })
  res.json({ success: true, data: notification })
})

// Marcar todas como lidas
router.patch("/read-all", async (req, res) => {
  const userId = req.user?.id
  await prisma.notification.updateMany({
    where: { OR: [{ userId }, { userId: null }], isRead: false },
    data: { isRead: true, readAt: new Date() },
  })
  res.json({ success: true, message: "Todas as notificações foram marcadas como lidas" })
})

// Criar notificação (para sistema interno)
router.post("/", async (req, res) => {
  const notification = await prisma.notification.create({ data: req.body })
  res.status(201).json({ success: true, data: notification })
})

export { router as notificationRoutes }
[V0_FILE]typescriptreact:file="client/src/components/ui/ReportModal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { FileText, Download, Printer, Calendar, Filter, FileSpreadsheet } from "lucide-react"
import toast from "react-hot-toast"
import Modal from "./Modal"

interface ReportModalProps {
  isOpen: boolean
  onClose: () => void
  title?: string
  moduleName: string
  onGenerateReport?: (config: { type: string; dateRange: { start: string; end: string }; format: string }) => void
}

export default function ReportModal({
  isOpen,
  onClose,
  title = "Gerar Relatorio",
  moduleName,
  onGenerateReport,
}: ReportModalProps) {
  const [selectedReport, setSelectedReport] = useState<string>("")
  const [filters, setFilters] = useState({
    startDate: new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0],
    endDate: new Date().toISOString().split("T")[0],
    format: "pdf" as "pdf" | "excel" | "csv",
  })

const reportOptions = [
    { id: "completo", title: "Relatorio Completo", description: "Todos os dados do periodo" },
    { id: "resumo", title: "Resumo Executivo", description: "Visao geral e estatisticas" },
    { id: "movimentacao", title: "Movimentacoes", description: "Entradas e saidas do periodo" },
    { id: "criticos", title: "Itens Criticos", description: "Produtos com estoque baixo" },
  ]

const handleGenerate = () => {
    if (!selectedReport) {
      toast.error("Selecione um tipo de relatorio")
      return
    }

if (onGenerateReport) {
      onGenerateReport({
        type: selectedReport,
        dateRange: { start: filters.startDate, end: filters.endDate },
        format: filters.format,
      })
    }

toast.success(`Relatorio ${selectedReport} gerado em ${filters.format.toUpperCase()}!`)
    onClose()
  }

return (
    <Modal isOpen={isOpen} onClose={onClose} title={title} size="lg">
      <div className="space-y-6">
        {/* Quick Export Buttons */}
        <div className="flex flex-wrap gap-2 pb-4 border-b border-slate-200">
          <button
            onClick={() => {
              toast.success("CSV exportado!")
              onClose()
            }}
            className="flex items-center gap-2 px-3 py-2 bg-emerald-50 text-emerald-700 rounded-lg hover:bg-emerald-100 text-sm"
          >
            <FileSpreadsheet className="w-4 h-4" />
            Exportar CSV
          </button>
          <button
            onClick={() => {
              toast.success("Excel exportado!")
              onClose()
            }}
            className="flex items-center gap-2 px-3 py-2 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 text-sm"
          >
            <FileSpreadsheet className="w-4 h-4" />
            Exportar Excel
          </button>
          <button
            onClick={() => window.print()}
            className="flex items-center gap-2 px-3 py-2 bg-slate-50 text-slate-700 rounded-lg hover:bg-slate-100 text-sm"
          >
            <Printer className="w-4 h-4" />
            Imprimir
          </button>
        </div>

{/* Report Options */}
        <div>
          <h4 className="text-sm font-medium text-slate-700 mb-3">Selecione o tipo de relatorio:</h4>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {reportOptions.map((option) => (
              <button
                key={option.id}
                onClick={() => setSelectedReport(option.id)}
                className={`flex items-start gap-3 p-4 border rounded-lg text-left transition-all ${
                  selectedReport === option.id
                    ? "border-primary-500 bg-primary-50 ring-2 ring-primary-200"
                    : "border-slate-200 hover:bg-slate-50"
                }`}
              >
                <FileText className="w-5 h-5 mt-0.5 text-primary-600" />
                <div>
                  <p className="font-medium text-slate-900">{option.title}</p>
                  <p className="text-xs text-slate-500 mt-0.5">{option.description}</p>
                </div>
              </button>
            ))}
          </div>
        </div>

{/* Filters */}
        <div className="bg-slate-50 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <Filter className="w-4 h-4 text-slate-500" />
            <span className="text-sm font-medium text-slate-700">Filtros do Relatorio</span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div>
              <label className="block text-xs text-slate-500 mb-1">Data Inicio</label>
              <div className="relative">
                <Calendar className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  type="date"
                  value={filters.startDate}
                  onChange={(e) => setFilters({ ...filters, startDate: e.target.value })}
                  className="w-full pl-8 pr-3 py-2 border border-slate-300 rounded-lg text-sm"
                />
              </div>
            </div>
            <div>
              <label className="block text-xs text-slate-500 mb-1">Data Fim</label>
              <div className="relative">
                <Calendar className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  type="date"
                  value={filters.endDate}
                  onChange={(e) => setFilters({ ...filters, endDate: e.target.value })}
                  className="w-full pl-8 pr-3 py-2 border border-slate-300 rounded-lg text-sm"
                />
              </div>
            </div>
            <div>
              <label className="block text-xs text-slate-500 mb-1">Formato</label>
              <select
                value={filters.format}
                onChange={(e) => setFilters({ ...filters, format: e.target.value as "pdf" | "excel" | "csv" })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              >
                <option value="pdf">PDF</option>
                <option value="excel">Excel</option>
                <option value="csv">CSV</option>
              </select>
            </div>
          </div>
        </div>

{/* Actions */}
        <div className="flex justify-end gap-3 pt-4 border-t">
          <button onClick={onClose} className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg">
            Cancelar
          </button>
          <button
            onClick={handleGenerate}
            disabled={!selectedReport}
            className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Download className="w-4 h-4" />
            Gerar Relatorio
          </button>
        </div>
      </div>
    </Modal>
  )
}
[V0_FILE]typescriptreact:file="client/src/components/ui/ExportButtons.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { FileSpreadsheet, FileText, Printer } from "lucide-react"
import toast from "react-hot-toast"

interface Column {
  key: string
  header: string
}

interface ExportButtonsProps {
  data?: Record<string, unknown>[]
  columns?: Column[]
  filename?: string
  onExport?: (format: "csv" | "pdf" | "excel") => void
  showPrint?: boolean
  compact?: boolean
}

export default function ExportButtons({
  data,
  columns,
  filename,
  onExport,
  showPrint = true,
  compact = false,
}: ExportButtonsProps) {
  const exportToCSV = () => {
    if (data && columns && filename) {
      if (data.length === 0) {
        toast.error("Nenhum dado para exportar")
        return
      }

const headers = columns.map((c) => c.header)
      const rows = data.map((item) =>
        columns.map((c) => {
          const value = item[c.key]
          if (typeof value === "object" && value !== null) {
            return JSON.stringify(value)
          }
          return String(value || "")
        }),
      )

const exportToExcel = () => {
    if (data && columns && filename) {
      exportToCSV()
      toast.success("Excel exportado!")
    } else {
      onExport?.("excel")
    }
  }

const handlePrint = () => {
    window.print()
  }

if (compact) {
    return (
      <div className="flex items-center gap-1">
        <button onClick={exportToCSV} className="p-2 hover:bg-slate-100 rounded-lg" title="Exportar CSV">
          <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
        </button>
        <button onClick={exportToExcel} className="p-2 hover:bg-slate-100 rounded-lg" title="Exportar Excel">
          <FileText className="w-4 h-4 text-green-600" />
        </button>
        {showPrint && (
          <button onClick={handlePrint} className="p-2 hover:bg-slate-100 rounded-lg" title="Imprimir">
            <Printer className="w-4 h-4 text-slate-600" />
          </button>
        )}
      </div>
    )
  }

return (
    <div className="flex items-center gap-2">
      <button
        onClick={exportToCSV}
        className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 text-sm"
      >
        <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
        <span className="hidden sm:inline">CSV</span>
      </button>
      <button
        onClick={exportToExcel}
        className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 text-sm"
      >
        <FileText className="w-4 h-4 text-green-600" />
        <span className="hidden sm:inline">Excel</span>
      </button>
      {showPrint && (
        <button
          onClick={handlePrint}
          className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 text-sm"
        >
          <Printer className="w-4 h-4" />
          <span className="hidden sm:inline">Imprimir</span>
        </button>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/pages/Clientes.tsx" isEdit="true" isMerged="true"
"use client"

interface Branch {
  id: string
  code: string
  name: string
}

interface Customer {
  id: string
  code: string
  name: string
  tradeName?: string
  cnpjCpf: string
  stateRegister?: string
  email?: string
  phone?: string
  whatsapp?: string
  address?: string
  city?: string
  state?: string
  zipCode?: string
  creditLimit?: number
  notes?: string
  isActive: boolean
  createdAt?: string
  branchId?: string
  branch?: Branch
  _count?: { shipments: number }
}

export default function Clientes() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isReportOpen, setIsReportOpen] = useState(false)
  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null)

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["customers", page, search],
    queryFn: async () => {
      const params = new URLSearchParams({ page: String(page), limit: "15", search })
      const { data } = await api.get(`/customers?${params}`)
      return data
    },
  })

const { data: branchesData } = useQuery({
    queryKey: ["branches-list"],
    queryFn: async () => {
      const { data } = await api.get("/branches?limit=100")
      return data.data || []
    },
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<Customer>) => api.post("/customers", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["customers"] })
      toast.success("Cliente cadastrado com sucesso!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao cadastrar cliente"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Customer> }) => api.put(`/customers/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["customers"] })
      toast.success("Cliente atualizado com sucesso!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar cliente"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/customers/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["customers"] })
      toast.success("Cliente removido com sucesso!")
    },
    onError: () => toast.error("Erro ao remover cliente"),
  })

const handleCreate = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    createMutation.mutate({
      code: formData.get("code") as string,
      name: formData.get("name") as string,
      tradeName: formData.get("tradeName") as string,
      cnpjCpf: formData.get("cnpjCpf") as string,
      stateRegister: formData.get("stateRegister") as string,
      email: formData.get("email") as string,
      phone: formData.get("phone") as string,
      whatsapp: formData.get("whatsapp") as string,
      address: formData.get("address") as string,
      city: formData.get("city") as string,
      state: formData.get("state") as string,
      zipCode: formData.get("zipCode") as string,
      creditLimit: Number(formData.get("creditLimit")) || 0,
      notes: formData.get("notes") as string,
      branchId: (formData.get("branchId") as string) || undefined,
    })
  }

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedCustomer) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedCustomer.id,
      data: {
        name: formData.get("name") as string,
        tradeName: formData.get("tradeName") as string,
        cnpjCpf: formData.get("cnpjCpf") as string,
        stateRegister: formData.get("stateRegister") as string,
        email: formData.get("email") as string,
        phone: formData.get("phone") as string,
        whatsapp: formData.get("whatsapp") as string,
        address: formData.get("address") as string,
        city: formData.get("city") as string,
        state: formData.get("state") as string,
        zipCode: formData.get("zipCode") as string,
        creditLimit: Number(formData.get("creditLimit")) || 0,
        notes: formData.get("notes") as string,
        branchId: (formData.get("branchId") as string) || undefined,
      },
    })
  }

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "name", header: "Nome", sortable: true, className: "font-medium text-slate-900" },
    { key: "cnpjCpf", header: "CNPJ/CPF" },
    {
      key: "branch",
      header: "Filial",
      render: (item: Customer) => (
        <span className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded">{item.branch?.name || "Matriz"}</span>
      ),
    },
    { key: "city", header: "Cidade", render: (item: Customer) => item.city || "-" },
    { key: "phone", header: "Telefone", render: (item: Customer) => item.phone || "-" },
    { key: "shipments", header: "Expedicoes", render: (item: Customer) => item._count?.shipments || 0 },
  ]

const reportColumns = [
    { key: "code", header: "Codigo" },
    { key: "name", header: "Nome" },
    { key: "cnpjCpf", header: "CNPJ/CPF" },
    { key: "branch", header: "Filial", format: (_: any, item: Customer) => item.branch?.name || "Matriz" },
    { key: "city", header: "Cidade" },
    { key: "state", header: "UF" },
    { key: "phone", header: "Telefone" },
    { key: "email", header: "Email" },
  ]

<DataTable
        data={data?.data || []}
        columns={columns}
        searchPlaceholder="Buscar por codigo, nome, CNPJ..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        actions={(item: Customer) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedCustomer(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                setSelectedCustomer(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover este cliente?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Novo Cliente" size="lg">
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo *</label>
              <input name="code" required className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Razao Social *</label>
              <input name="name" required className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome Fantasia</label>
              <input name="tradeName" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CNPJ/CPF *</label>
              <input name="cnpjCpf" required className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Inscricao Estadual</label>
              <input name="stateRegister" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Filial</label>
              <select name="branchId" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Matriz (Padrao)</option>
                {(branchesData || []).map((b: Branch) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
              <input name="email" type="email" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Telefone</label>
              <input name="phone" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">WhatsApp</label>
              <input name="whatsapp" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CEP</label>
              <input name="zipCode" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Endereco</label>
              <input name="address" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cidade</label>
              <input name="city" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Estado</label>
              <select name="state" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="AC">AC</option>
                <option value="AL">AL</option>
                <option value="AP">AP</option>
                <option value="AM">AM</option>
                <option value="BA">BA</option>
                <option value="CE">CE</option>
                <option value="DF">DF</option>
                <option value="ES">ES</option>
                <option value="GO">GO</option>
                <option value="MA">MA</option>
                <option value="MT">MT</option>
                <option value="MS">MS</option>
                <option value="MG">MG</option>
                <option value="PA">PA</option>
                <option value="PB">PB</option>
                <option value="PR">PR</option>
                <option value="PE">PE</option>
                <option value="PI">PI</option>
                <option value="RJ">RJ</option>
                <option value="RN">RN</option>
                <option value="RS">RS</option>
                <option value="RO">RO</option>
                <option value="RR">RR</option>
                <option value="SC">SC</option>
                <option value="SP">SP</option>
                <option value="SE">SE</option>
                <option value="TO">TO</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Limite de Credito (R$)</label>
              <input
                name="creditLimit"
                type="number"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-3">
              <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
              <textarea name="notes" rows={2} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Cliente" size="lg">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo</label>
              <input
                value={selectedCustomer?.code || ""}
                disabled
                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-50"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Razao Social *</label>
              <input
                name="name"
                defaultValue={selectedCustomer?.name}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome Fantasia</label>
              <input
                name="tradeName"
                defaultValue={selectedCustomer?.tradeName || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CNPJ/CPF *</label>
              <input
                name="cnpjCpf"
                defaultValue={selectedCustomer?.cnpjCpf}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Inscricao Estadual</label>
              <input
                name="stateRegister"
                defaultValue={selectedCustomer?.stateRegister || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Filial</label>
              <select
                name="branchId"
                defaultValue={selectedCustomer?.branchId || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Matriz (Padrao)</option>
                {(branchesData || []).map((b: Branch) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
              <input
                name="email"
                type="email"
                defaultValue={selectedCustomer?.email || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Telefone</label>
              <input
                name="phone"
                defaultValue={selectedCustomer?.phone || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">WhatsApp</label>
              <input
                name="whatsapp"
                defaultValue={selectedCustomer?.whatsapp || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CEP</label>
              <input
                name="zipCode"
                defaultValue={selectedCustomer?.zipCode || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Endereco</label>
              <input
                name="address"
                defaultValue={selectedCustomer?.address || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cidade</label>
              <input
                name="city"
                defaultValue={selectedCustomer?.city || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Estado</label>
              <select
                name="state"
                defaultValue={selectedCustomer?.state || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="AC">AC</option>
                <option value="AL">AL</option>
                <option value="AP">AP</option>
                <option value="AM">AM</option>
                <option value="BA">BA</option>
                <option value="CE">CE</option>
                <option value="DF">DF</option>
                <option value="ES">ES</option>
                <option value="GO">GO</option>
                <option value="MA">MA</option>
                <option value="MT">MT</option>
                <option value="MS">MS</option>
                <option value="MG">MG</option>
                <option value="PA">PA</option>
                <option value="PB">PB</option>
                <option value="PR">PR</option>
                <option value="PE">PE</option>
                <option value="PI">PI</option>
                <option value="RJ">RJ</option>
                <option value="RN">RN</option>
                <option value="RS">RS</option>
                <option value="RO">RO</option>
                <option value="RR">RR</option>
                <option value="SC">SC</option>
                <option value="SP">SP</option>
                <option value="SE">SE</option>
                <option value="TO">TO</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Limite de Credito (R$)</label>
              <input
                name="creditLimit"
                type="number"
                step="0.01"
                min="0"
                defaultValue={selectedCustomer?.creditLimit || 0}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-3">
              <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
              <textarea
                name="notes"
                defaultValue={selectedCustomer?.notes || ""}
                rows={2}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes do Cliente">
        {selectedCustomer && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-medium">{selectedCustomer.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Razao Social</span>
                <p className="font-medium">{selectedCustomer.name}</p>
              </div>
              {selectedCustomer.tradeName && (
                <div>
                  <span className="text-xs text-slate-500">Nome Fantasia</span>
                  <p className="font-medium">{selectedCustomer.tradeName}</p>
                </div>
              )}
              <div>
                <span className="text-xs text-slate-500">CNPJ/CPF</span>
                <p className="font-medium">{selectedCustomer.cnpjCpf}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Filial</span>
                <p className="font-medium flex items-center gap-1">
                  <Building2 className="w-4 h-4" />
                  {selectedCustomer.branch?.name || "Matriz"}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Email</span>
                <p className="font-medium flex items-center gap-1">
                  <Mail className="w-4 h-4" />
                  {selectedCustomer.email || "-"}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Telefone</span>
                <p className="font-medium flex items-center gap-1">
                  <Phone className="w-4 h-4" />
                  {selectedCustomer.phone || "-"}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Cidade/UF</span>
                <p className="font-medium flex items-center gap-1">
                  <MapPin className="w-4 h-4" />
                  {selectedCustomer.city || "-"} / {selectedCustomer.state || "-"}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Limite de Credito</span>
                <p className="font-medium text-emerald-600">
                  R$ {(selectedCustomer.creditLimit || 0).toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Total Expedicoes</span>
                <p className="font-medium">{selectedCustomer._count?.shipments || 0}</p>
              </div>
            </div>
            {selectedCustomer.notes && (
              <div>
                <span className="text-xs text-slate-500">Observacoes</span>
                <p className="text-sm text-slate-700 bg-slate-50 p-3 rounded-lg">{selectedCustomer.notes}</p>
              </div>
            )}
          </div>
        )}
      </Modal>

{/* Print Report */}
      {isReportOpen && (
        <PrintReport
          title="Relatorio de Clientes"
          subtitle={`Total: ${data?.pagination?.total || 0} clientes`}
          data={data?.data || []}
          columns={reportColumns}
          summary={[
            { label: "Total de Clientes", value: data?.pagination?.total || 0 },
            {
              label: "Com Expedicoes",
              value: (data?.data || []).filter((c: Customer) => (c._count?.shipments || 0) > 0).length,
            },
          ]}
          onClose={() => setIsReportOpen(false)}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/components/ui/PrintReport.tsx" isEdit="true" isMerged="true"
"use client"
import { useState, useRef } from "react"
import { Printer, FileSpreadsheet, X, Download } from "lucide-react"

interface Column {
  key: string
  header: string
  width?: string
  align?: "left" | "center" | "right"
  format?: (value: unknown, item: unknown) => string
}

interface PrintReportProps {
  isOpen: boolean
  onClose: () => void
  title: string
  subtitle?: string
  data: Record<string, unknown>[]
  columns: string[] | Column[]
  summary?: Record<string, string | number> | { label: string; value: string | number; highlight?: boolean }[]
  companyName?: string
  companyLogo?: string
  filters?: { label: string; value: string }[]
}

export default function PrintReport({
  isOpen,
  onClose,
  title,
  subtitle,
  data,
  columns,
  summary,
  companyName = "TextilManager ERP",
  filters,
}: PrintReportProps) {
  const printRef = useRef<HTMLDivElement>(null)
  const [isExporting, setIsExporting] = useState(false)

if (!isOpen) return null

const normalizedColumns: Column[] =
    typeof columns[0] === "string"
      ? (columns as string[]).map((col) => ({ key: col, header: col }))
      : (columns as Column[])

const normalizedSummary: { label: string; value: string | number; highlight?: boolean }[] | undefined = summary
    ? Array.isArray(summary)
      ? summary
      : Object.entries(summary).map(([label, value], idx) => ({
          label,
          value,
          highlight: idx === Object.entries(summary).length - 1,
        }))
    : undefined

const handlePrint = () => {
    const content = printRef.current
    if (!content) return

const printWindow = window.open("", "_blank")
    if (!printWindow) return

printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>${title}</title>
          <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font-family: Arial, sans-serif; font-size: 12px; padding: 20px; }
            .header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px; }
            .header h1 { font-size: 18px; margin-bottom: 5px; }
            .header h2 { font-size: 14px; margin-bottom: 5px; color: #444; }
            .header p { color: #666; font-size: 11px; }
            .filters { margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px; }
            .filters span { margin-right: 20px; font-size: 11px; }
            table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
            th { background: #333; color: white; padding: 8px; text-align: left; font-size: 11px; }
            td { padding: 6px 8px; border-bottom: 1px solid #ddd; font-size: 11px; }
            tr:nth-child(even) { background: #f9f9f9; }
            .summary { margin-top: 20px; border-top: 2px solid #333; padding-top: 15px; }
            .summary h3 { font-size: 12px; margin-bottom: 10px; }
            .summary-grid { display: flex; flex-wrap: wrap; gap: 15px; }
            .summary-item { padding: 10px 15px; background: #f0f0f0; border-radius: 4px; min-width: 120px; }
            .summary-item.highlight { background: #4f46e5; color: white; }
            .summary-label { font-size: 10px; color: #666; }
            .summary-item.highlight .summary-label { color: #c7d2fe; }
            .summary-value { font-size: 14px; font-weight: bold; }
            .footer { margin-top: 30px; text-align: center; font-size: 10px; color: #999; border-top: 1px solid #ddd; padding-top: 10px; }
            .record-count { text-align: right; font-size: 10px; color: #666; margin-top: 10px; }
            @media print { 
              body { padding: 0; } 
              @page { margin: 1cm; }
            }
          </style>
        </head>
        <body>
          ${content.innerHTML}
          <div class="footer">
            Gerado em ${new Date().toLocaleString("pt-BR")} - ${companyName}
          </div>
        </body>
      </html>
    `)
    printWindow.document.close()
    setTimeout(() => printWindow.print(), 250)
  }

const exportToCSV = () => {
    setIsExporting(true)
    const headers = normalizedColumns.map((c) => c.header)
    const rows = data.map((item) =>
      normalizedColumns.map((col) => {
        const value = item[col.key]
        return col.format ? col.format(value, item) : String(value ?? "")
      }),
    )

const exportToExcel = () => {
    setIsExporting(true)
    const headers = normalizedColumns.map((c) => c.header)
    const rows = data.map((item) =>
      normalizedColumns.map((col) => {
        const value = item[col.key]
        return col.format ? col.format(value, item) : String(value ?? "")
      }),
    )

const blob = new Blob([excelContent], { type: "application/vnd.ms-excel" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `${title.toLowerCase().replace(/\s+/g, "_")}_${new Date().toISOString().split("T")[0]}.xls`
    a.click()
    URL.revokeObjectURL(url)
    setIsExporting(false)
  }

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="bg-white rounded-xl shadow-2xl max-w-6xl w-full max-h-[90vh] flex flex-col">
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-xl font-bold text-slate-900">Visualizar Relatorio</h2>
          <div className="flex items-center gap-2">
            <button
              onClick={exportToCSV}
              disabled={isExporting}
              className="flex items-center gap-2 px-3 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-sm disabled:opacity-50"
            >
              <Download className="w-4 h-4" />
              CSV
            </button>
            <button
              onClick={exportToExcel}
              disabled={isExporting}
              className="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm disabled:opacity-50"
            >
              <FileSpreadsheet className="w-4 h-4" />
              Excel
            </button>
            <button
              onClick={handlePrint}
              className="flex items-center gap-2 px-3 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm"
            >
              <Printer className="w-4 h-4" />
              Imprimir / PDF
            </button>
            <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

<div className="flex-1 overflow-auto p-6 bg-slate-100">
          <div ref={printRef} className="bg-white p-8 shadow-lg max-w-4xl mx-auto">
            <div className="header text-center mb-6 border-b-2 border-slate-800 pb-4">
              <h1 className="text-2xl font-bold text-slate-900">{companyName}</h1>
              <h2 className="text-lg font-semibold text-slate-700 mt-2">{title}</h2>
              {subtitle && <p className="text-sm text-slate-500 mt-1">{subtitle}</p>}
              <p className="text-xs text-slate-400 mt-2">Gerado em: {new Date().toLocaleString("pt-BR")}</p>
            </div>

{filters && filters.length > 0 && (
              <div className="filters mb-4 p-3 bg-slate-50 rounded-lg">
                <span className="text-xs font-medium text-slate-600">Filtros aplicados: </span>
                {filters.map((f, i) => (
                  <span key={i} className="text-xs text-slate-700 mr-4">
                    <strong>{f.label}:</strong> {f.value}
                  </span>
                ))}
              </div>
            )}

<table className="w-full border-collapse mb-6">
              <thead>
                <tr>
                  {normalizedColumns.map((col) => (
                    <th
                      key={col.key}
                      className="bg-slate-800 text-white px-3 py-2 text-left text-xs font-medium"
                      style={{ width: col.width, textAlign: col.align || "left" }}
                    >
                      {col.header}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {data.length > 0 ? (
                  data.map((item, idx) => (
                    <tr key={idx} className={idx % 2 === 0 ? "bg-white" : "bg-slate-50"}>
                      {normalizedColumns.map((col) => (
                        <td
                          key={col.key}
                          className="px-3 py-2 text-xs border-b border-slate-200"
                          style={{ textAlign: col.align || "left" }}
                        >
                          {col.format ? col.format(item[col.key], item) : String(item[col.key] ?? "-")}
                        </td>
                      ))}
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={normalizedColumns.length} className="text-center py-8 text-slate-400">
                      Nenhum registro encontrado
                    </td>
                  </tr>
                )}
              </tbody>
            </table>

{normalizedSummary && normalizedSummary.length > 0 && (
              <div className="summary border-t-2 border-slate-800 pt-4">
                <h3 className="text-sm font-bold text-slate-800 mb-3">Resumo</h3>
                <div className="summary-grid flex flex-wrap gap-4">
                  {normalizedSummary.map((item, idx) => (
                    <div
                      key={idx}
                      className={`summary-item px-4 py-3 rounded-lg ${item.highlight ? "bg-primary-600 text-white" : "bg-slate-100"}`}
                    >
                      <div
                        className={`summary-label text-xs ${item.highlight ? "text-primary-100" : "text-slate-500"}`}
                      >
                        {item.label}
                      </div>
                      <div className="summary-value text-lg font-bold">{item.value}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

<div className="record-count mt-6 text-xs text-slate-500 text-right">Total de registros: {data.length}</div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/pages/Reciclados.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { motion } from "framer-motion"
import {
  Plus,
  Edit2,
  Trash2,
  CheckCircle,
  DollarSign,
  Scale,
  Recycle,
  TrendingUp,
  Printer,
  Eye,
  ShoppingCart,
} from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import { formatCurrency } from "../lib/utils"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"
import PrintReport from "../components/ui/PrintReport"

interface RecycledMaterial {
  id: string
  code: string
  type: string
  origin?: string
  weight: number
  unit: string
  destination?: string
  value?: number
  pricePerKg?: number
  buyer?: string
  invoiceNumber?: string
  soldAt?: string
  status: string
  notes?: string
  createdAt?: string
}

export default function Reciclados() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isSellModalOpen, setIsSellModalOpen] = useState(false)
  const [isReportOpen, setIsReportOpen] = useState(false)
  const [selectedMaterial, setSelectedMaterial] = useState<RecycledMaterial | null>(null)

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["recycled", page, search, statusFilter],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
        ...(statusFilter && { status: statusFilter }),
      })
      const { data } = await api.get(`/recycled?${params}`)
      return data
    },
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<RecycledMaterial>) => api.post("/recycled", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["recycled"] })
      toast.success("Material cadastrado com sucesso!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao cadastrar material"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<RecycledMaterial> }) => api.put(`/recycled/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["recycled"] })
      toast.success("Material atualizado!")
      setIsEditModalOpen(false)
      setIsSellModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar material"),
  })

const statusMutation = useMutation({
    mutationFn: ({ id, status }: { id: string; status: string }) => api.patch(`/recycled/${id}/status`, { status }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["recycled"] })
      toast.success("Status atualizado!")
    },
    onError: () => toast.error("Erro ao atualizar status"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/recycled/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["recycled"] })
      toast.success("Material removido!")
    },
    onError: () => toast.error("Erro ao remover material"),
  })

const handleCreate = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const weight = Number(formData.get("weight"))
    const pricePerKg = Number(formData.get("pricePerKg")) || 0
    createMutation.mutate({
      code: `REC${Date.now().toString().slice(-6)}`,
      type: formData.get("type") as string,
      origin: formData.get("origin") as string,
      weight,
      unit: formData.get("unit") as string,
      destination: formData.get("destination") as string,
      pricePerKg,
      value: weight * pricePerKg,
      notes: formData.get("notes") as string,
    })
  }

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedMaterial) return
    const formData = new FormData(e.currentTarget)
    const weight = Number(formData.get("weight"))
    const pricePerKg = Number(formData.get("pricePerKg")) || 0
    updateMutation.mutate({
      id: selectedMaterial.id,
      data: {
        type: formData.get("type") as string,
        origin: formData.get("origin") as string,
        weight,
        destination: formData.get("destination") as string,
        pricePerKg,
        value: weight * pricePerKg,
        notes: formData.get("notes") as string,
      },
    })
  }

const handleSell = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedMaterial) return
    const formData = new FormData(e.currentTarget)
    const pricePerKg = Number(formData.get("pricePerKg"))
    const totalValue = selectedMaterial.weight * pricePerKg
    updateMutation.mutate({
      id: selectedMaterial.id,
      data: {
        status: "vendido",
        buyer: formData.get("buyer") as string,
        invoiceNumber: formData.get("invoiceNumber") as string,
        pricePerKg,
        value: totalValue,
        soldAt: new Date().toISOString(),
      },
    })
  }

// Calcular estatisticas
  const materials = data?.data || []
  const totalWeight = materials.reduce((sum: number, m: RecycledMaterial) => sum + m.weight, 0)
  const totalSold = materials
    .filter((m: RecycledMaterial) => m.status === "vendido")
    .reduce((sum: number, m: RecycledMaterial) => sum + (m.value || 0), 0)
  const pendingWeight = materials
    .filter((m: RecycledMaterial) => m.status === "armazenado")
    .reduce((sum: number, m: RecycledMaterial) => sum + m.weight, 0)

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "type", header: "Tipo", sortable: true, className: "font-medium" },
    { key: "origin", header: "Origem" },
    { key: "weight", header: "Peso", render: (item: RecycledMaterial) => `${item.weight} ${item.unit}` },
    { key: "destination", header: "Destino" },
    {
      key: "pricePerKg",
      header: "R$/Kg",
      render: (item: RecycledMaterial) => (item.pricePerKg ? `R$ ${item.pricePerKg.toFixed(2)}` : "-"),
    },
    {
      key: "value",
      header: "Valor Total",
      render: (item: RecycledMaterial) => (
        <span className={item.status === "vendido" ? "text-emerald-600 font-medium" : ""}>
          {item.value ? formatCurrency(item.value) : "-"}
        </span>
      ),
    },
    {
      key: "status",
      header: "Status",
      render: (item: RecycledMaterial) => {
        const colors: Record<string, string> = {
          armazenado: "bg-slate-100 text-slate-800",
          processado: "bg-amber-100 text-amber-800",
          vendido: "bg-emerald-100 text-emerald-800",
        }
        return (
          <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[item.status] || colors.armazenado}`}>
            {item.status}
          </span>
        )
      },
    },
  ]

const reportColumns = [
    { key: "code", header: "Codigo" },
    { key: "type", header: "Tipo" },
    { key: "origin", header: "Origem" },
    { key: "weight", header: "Peso", format: (v: number, item: RecycledMaterial) => `${v} ${item.unit}` },
    { key: "destination", header: "Destino" },
    { key: "pricePerKg", header: "R$/Kg", format: (v: number) => (v ? `R$ ${v.toFixed(2)}` : "-") },
    { key: "value", header: "Valor Total", format: (v: number) => (v ? formatCurrency(v) : "-") },
    { key: "buyer", header: "Comprador" },
    { key: "status", header: "Status" },
  ]

{/* Stats Cards */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <Recycle className="w-5 h-5 text-blue-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-slate-900">{data?.pagination?.total || 0}</p>
              <p className="text-xs text-slate-500">Total Registros</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
              <Scale className="w-5 h-5 text-amber-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-slate-900">{totalWeight.toFixed(2)} kg</p>
              <p className="text-xs text-slate-500">Peso Total</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-slate-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-slate-900">{pendingWeight.toFixed(2)} kg</p>
              <p className="text-xs text-slate-500">Aguardando Venda</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-xl p-4 shadow-lg"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
              <DollarSign className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-2xl font-bold text-white">{formatCurrency(totalSold)}</p>
              <p className="text-xs text-emerald-100">Total Vendido</p>
            </div>
          </div>
        </motion.div>
      </div>

{/* Filters */}
      <div className="bg-white rounded-xl p-4 border border-slate-200">
        <div className="flex flex-wrap items-center gap-3">
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todos os Status</option>
            <option value="armazenado">Armazenado</option>
            <option value="processado">Processado</option>
            <option value="vendido">Vendido</option>
          </select>
          <button
            onClick={() => setStatusFilter("")}
            className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg"
          >
            Limpar
          </button>
        </div>
      </div>

{/* Sustainability Info */}
      <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
        <p className="text-sm text-emerald-800">
          <strong>Sustentabilidade:</strong> Gerenciar materiais reciclaveis contribui para a economia circular e reduz
          o impacto ambiental da producao textil. Total reciclado: {totalWeight.toFixed(2)} kg
        </p>
      </div>

<DataTable
        data={materials}
        columns={columns}
        searchPlaceholder="Buscar por codigo, tipo, origem..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        actions={(item: RecycledMaterial) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedMaterial(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            {item.status === "armazenado" && (
              <>
                <button
                  onClick={() => statusMutation.mutate({ id: item.id, status: "processado" })}
                  className="p-2 hover:bg-amber-100 rounded-lg"
                  title="Marcar como Processado"
                >
                  <CheckCircle className="w-4 h-4 text-amber-600" />
                </button>
                <button
                  onClick={() => {
                    setSelectedMaterial(item)
                    setIsSellModalOpen(true)
                  }}
                  className="p-2 hover:bg-emerald-100 rounded-lg"
                  title="Registrar Venda"
                >
                  <ShoppingCart className="w-4 h-4 text-emerald-600" />
                </button>
              </>
            )}
            {item.status === "processado" && (
              <button
                onClick={() => {
                  setSelectedMaterial(item)
                  setIsSellModalOpen(true)
                }}
                className="p-2 hover:bg-emerald-100 rounded-lg"
                title="Registrar Venda"
              >
                <ShoppingCart className="w-4 h-4 text-emerald-600" />
              </button>
            )}
            <button
              onClick={() => {
                setSelectedMaterial(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover este material?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Novo Material Reciclado">
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo *</label>
              <select name="type" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="Retalhos">Retalhos</option>
                <option value="Aparas">Aparas</option>
                <option value="Fios">Fios</option>
                <option value="Malha">Malha</option>
                <option value="Plastico">Plastico</option>
                <option value="Papelao">Papelao</option>
                <option value="Outro">Outro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Origem</label>
              <input
                name="origin"
                placeholder="Ex: Producao, Qualidade"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso *</label>
              <input
                name="weight"
                type="number"
                step="0.01"
                min="0"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Unidade</label>
              <select name="unit" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="KG">Quilos (KG)</option>
                <option value="UN">Unidades (UN)</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Destino Previsto</label>
              <select name="destination" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="Recicladora">Recicladora</option>
                <option value="Cooperativa">Cooperativa</option>
                <option value="Revenda">Revenda</option>
                <option value="Interno">Uso Interno</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Preco por Kg (R$)</label>
              <input
                name="pricePerKg"
                type="number"
                step="0.01"
                min="0"
                placeholder="Estimativa"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
            <textarea name="notes" rows={2} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Material">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo *</label>
              <select
                name="type"
                defaultValue={selectedMaterial?.type}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="Retalhos">Retalhos</option>
                <option value="Aparas">Aparas</option>
                <option value="Fios">Fios</option>
                <option value="Malha">Malha</option>
                <option value="Plastico">Plastico</option>
                <option value="Papelao">Papelao</option>
                <option value="Outro">Outro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Origem</label>
              <input
                name="origin"
                defaultValue={selectedMaterial?.origin}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso *</label>
              <input
                name="weight"
                type="number"
                step="0.01"
                defaultValue={selectedMaterial?.weight}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Destino</label>
              <select
                name="destination"
                defaultValue={selectedMaterial?.destination}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="Recicladora">Recicladora</option>
                <option value="Cooperativa">Cooperativa</option>
                <option value="Revenda">Revenda</option>
                <option value="Interno">Uso Interno</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Preco por Kg (R$)</label>
              <input
                name="pricePerKg"
                type="number"
                step="0.01"
                defaultValue={selectedMaterial?.pricePerKg}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
            <textarea
              name="notes"
              defaultValue={selectedMaterial?.notes}
              rows={2}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg"
            />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Sell Modal */}
      <Modal isOpen={isSellModalOpen} onClose={() => setIsSellModalOpen(false)} title="Registrar Venda">
        <form onSubmit={handleSell} className="space-y-4">
          <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-4">
            <h4 className="font-medium text-emerald-800 mb-2">Material: {selectedMaterial?.type}</h4>
            <p className="text-sm text-emerald-700">
              Peso: {selectedMaterial?.weight} {selectedMaterial?.unit}
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Comprador *</label>
              <input name="buyer" required className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nota Fiscal</label>
              <input name="invoiceNumber" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Preco por Kg (R$) *</label>
              <input
                name="pricePerKg"
                type="number"
                step="0.01"
                min="0"
                required
                defaultValue={selectedMaterial?.pricePerKg}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Valor Total Estimado</label>
              <p className="text-2xl font-bold text-emerald-600 py-2">
                {formatCurrency((selectedMaterial?.weight || 0) * (selectedMaterial?.pricePerKg || 0))}
              </p>
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsSellModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Registrando..." : "Registrar Venda"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes do Material">
        {selectedMaterial && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-mono font-medium">{selectedMaterial.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Tipo</span>
                <p className="font-medium">{selectedMaterial.type}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Origem</span>
                <p className="font-medium">{selectedMaterial.origin || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Peso</span>
                <p className="font-medium">
                  {selectedMaterial.weight} {selectedMaterial.unit}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Destino</span>
                <p className="font-medium">{selectedMaterial.destination || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Status</span>
                <p className="font-medium capitalize">{selectedMaterial.status}</p>
              </div>
              {selectedMaterial.status === "vendido" && (
                <>
                  <div>
                    <span className="text-xs text-slate-500">Comprador</span>
                    <p className="font-medium">{selectedMaterial.buyer || "-"}</p>
                  </div>
                  <div>
                    <span className="text-xs text-slate-500">Nota Fiscal</span>
                    <p className="font-medium">{selectedMaterial.invoiceNumber || "-"}</p>
                  </div>
                  <div>
                    <span className="text-xs text-slate-500">Preco por Kg</span>
                    <p className="font-medium">R$ {selectedMaterial.pricePerKg?.toFixed(2) || "-"}</p>
                  </div>
                  <div>
                    <span className="text-xs text-slate-500">Valor Total</span>
                    <p className="font-bold text-lg text-emerald-600">{formatCurrency(selectedMaterial.value || 0)}</p>
                  </div>
                </>
              )}
            </div>
          </div>
        )}
      </Modal>

{/* Print Report */}
      {isReportOpen && (
        <PrintReport
          title="Relatorio de Materiais Reciclados"
          subtitle="Controle de Reciclagem e Vendas"
          data={materials}
          columns={reportColumns}
          summary={[
            { label: "Total Registros", value: data?.pagination?.total || 0 },
            { label: "Peso Total", value: `${totalWeight.toFixed(2)} kg` },
            { label: "Aguardando Venda", value: `${pendingWeight.toFixed(2)} kg` },
            { label: "Total Vendido", value: formatCurrency(totalSold), highlight: true },
          ]}
          onClose={() => setIsReportOpen(false)}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/pages/Filiais.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { motion } from "framer-motion"
import { Plus, Edit2, Trash2, Eye, Building2, Warehouse, Users, FileText } from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"
import ExportButtons from "../components/ui/ExportButtons"
import PrintReport from "../components/ui/PrintReport"

interface Branch {
  id: string
  code: string
  name: string
  cnpj?: string
  address?: string
  city?: string
  state?: string
  phone?: string
  email?: string
  isMain: boolean
  isActive: boolean
  createdAt?: string
  warehouses?: { id: string; name: string }[]
  _count?: { users: number; shipments: number; warehouses: number }
}

export default function Filiais() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isReportModalOpen, setIsReportModalOpen] = useState(false)
  const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null)

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["branches", page, search],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
      })
      const { data } = await api.get(`/branches?${params}`)
      return data
    },
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<Branch>) => api.post("/branches", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["branches"] })
      toast.success("Filial cadastrada com sucesso!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao cadastrar filial"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Branch> }) => api.put(`/branches/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["branches"] })
      toast.success("Filial atualizada com sucesso!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar filial"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/branches/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["branches"] })
      toast.success("Filial removida com sucesso!")
    },
    onError: () => toast.error("Erro ao remover filial"),
  })

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedBranch) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedBranch.id,
      data: {
        name: formData.get("name") as string,
        cnpj: formData.get("cnpj") as string,
        address: formData.get("address") as string,
        city: formData.get("city") as string,
        state: formData.get("state") as string,
        phone: formData.get("phone") as string,
        email: formData.get("email") as string,
        isMain: formData.get("isMain") === "true",
      },
    })
  }

const handleExport = (format: "csv" | "pdf" | "excel") => {
    if (format === "pdf") {
      setIsReportModalOpen(true)
    } else {
      const dataToExport = data?.data || []
      const headers = ["Codigo", "Nome", "CNPJ", "Cidade", "Estado", "Telefone", "Email", "Matriz", "Galpoes"]
      const rows = dataToExport.map((b: Branch) => [
        b.code,
        b.name,
        b.cnpj || "",
        b.city || "",
        b.state || "",
        b.phone || "",
        b.email || "",
        b.isMain ? "Sim" : "Nao",
        b._count?.warehouses || 0,
      ])
      const csvContent = [headers, ...rows].map((row) => row.join(";")).join("\n")
      const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `filiais_${new Date().toISOString().split("T")[0]}.${format === "excel" ? "xls" : "csv"}`
      a.click()
      URL.revokeObjectURL(url)
      toast.success("Arquivo exportado!")
    }
  }

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "name", header: "Nome", sortable: true, className: "font-medium text-slate-900" },
    { key: "city", header: "Cidade" },
    { key: "state", header: "UF" },
    { key: "phone", header: "Telefone" },
    {
      key: "isMain",
      header: "Tipo",
      render: (item: Branch) => (
        <span
          className={`px-2 py-1 rounded-full text-xs font-medium ${item.isMain ? "bg-primary-100 text-primary-800" : "bg-slate-100 text-slate-600"}`}
        >
          {item.isMain ? "Matriz" : "Filial"}
        </span>
      ),
    },
    { key: "warehouses", header: "Galpoes", render: (item: Branch) => item._count?.warehouses || 0 },
  ]

const reportData = (data?.data || []).map((b: Branch) => ({
    Codigo: b.code,
    Nome: b.name,
    CNPJ: b.cnpj || "-",
    Cidade: b.city || "-",
    Estado: b.state || "-",
    Telefone: b.phone || "-",
    Email: b.email || "-",
    Tipo: b.isMain ? "Matriz" : "Filial",
    "Qtd Galpoes": b._count?.warehouses || 0,
  }))

const reportSummary = {
    "Total de Filiais": data?.pagination?.total || 0,
    Matrizes: (data?.data || []).filter((b: Branch) => b.isMain).length,
    "Filiais Secundarias": (data?.data || []).filter((b: Branch) => !b.isMain).length,
  }

<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <Building2 className="w-5 h-5 text-blue-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-slate-900">{data?.pagination?.total || 0}</p>
              <p className="text-xs text-slate-500">Total de Filiais</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
              <Warehouse className="w-5 h-5 text-emerald-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-emerald-600">
                {(data?.data || []).reduce((sum: number, b: Branch) => sum + (b._count?.warehouses || 0), 0)}
              </p>
              <p className="text-xs text-slate-500">Total de Galpoes</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
              <Users className="w-5 h-5 text-purple-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-purple-600">
                {(data?.data || []).reduce((sum: number, b: Branch) => sum + (b._count?.users || 0), 0)}
              </p>
              <p className="text-xs text-slate-500">Total de Usuarios</p>
            </div>
          </div>
        </motion.div>
      </div>

<DataTable
        data={data?.data || []}
        columns={columns}
        searchPlaceholder="Buscar por codigo, nome, cidade..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        actions={(item: Branch) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedBranch(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                setSelectedBranch(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover esta filial?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Nova Filial" size="lg">
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo *</label>
              <input
                name="code"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: FIL01"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: Filial Matriz"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CNPJ</label>
              <input
                name="cnpj"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="00.000.000/0000-00"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Telefone</label>
              <input
                name="phone"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="(00) 00000-0000"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Endereco</label>
              <input
                name="address"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Rua, numero, bairro"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cidade</label>
              <input name="city" className="w-full px-3 py-2 border border-slate-300 rounded-lg" placeholder="Cidade" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Estado</label>
              <select name="state" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="AC">Acre</option>
                <option value="AL">Alagoas</option>
                <option value="AP">Amapa</option>
                <option value="AM">Amazonas</option>
                <option value="BA">Bahia</option>
                <option value="CE">Ceara</option>
                <option value="DF">Distrito Federal</option>
                <option value="ES">Espirito Santo</option>
                <option value="GO">Goias</option>
                <option value="MA">Maranhao</option>
                <option value="MT">Mato Grosso</option>
                <option value="MS">Mato Grosso do Sul</option>
                <option value="MG">Minas Gerais</option>
                <option value="PA">Para</option>
                <option value="PB">Paraiba</option>
                <option value="PR">Parana</option>
                <option value="PE">Pernambuco</option>
                <option value="PI">Piaui</option>
                <option value="RJ">Rio de Janeiro</option>
                <option value="RN">Rio Grande do Norte</option>
                <option value="RS">Rio Grande do Sul</option>
                <option value="RO">Rondonia</option>
                <option value="RR">Roraima</option>
                <option value="SC">Santa Catarina</option>
                <option value="SP">Sao Paulo</option>
                <option value="SE">Sergipe</option>
                <option value="TO">Tocantins</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
              <input
                name="email"
                type="email"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="email@empresa.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo</label>
              <select name="isMain" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="false">Filial</option>
                <option value="true">Matriz</option>
              </select>
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Filial" size="lg">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo</label>
              <input
                value={selectedBranch?.code || ""}
                disabled
                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-50"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                defaultValue={selectedBranch?.name}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CNPJ</label>
              <input
                name="cnpj"
                defaultValue={selectedBranch?.cnpj}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Telefone</label>
              <input
                name="phone"
                defaultValue={selectedBranch?.phone}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Endereco</label>
              <input
                name="address"
                defaultValue={selectedBranch?.address}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cidade</label>
              <input
                name="city"
                defaultValue={selectedBranch?.city}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Estado</label>
              <select
                name="state"
                defaultValue={selectedBranch?.state}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="SP">Sao Paulo</option>
                <option value="RJ">Rio de Janeiro</option>
                <option value="MG">Minas Gerais</option>
                <option value="PR">Parana</option>
                <option value="SC">Santa Catarina</option>
                <option value="RS">Rio Grande do Sul</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
              <input
                name="email"
                type="email"
                defaultValue={selectedBranch?.email}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo</label>
              <select
                name="isMain"
                defaultValue={selectedBranch?.isMain ? "true" : "false"}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="false">Filial</option>
                <option value="true">Matriz</option>
              </select>
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes da Filial">
        {selectedBranch && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-medium">{selectedBranch.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Nome</span>
                <p className="font-medium">{selectedBranch.name}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">CNPJ</span>
                <p className="font-medium">{selectedBranch.cnpj || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Tipo</span>
                <p className="font-medium">{selectedBranch.isMain ? "Matriz" : "Filial"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Cidade</span>
                <p className="font-medium">{selectedBranch.city || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Estado</span>
                <p className="font-medium">{selectedBranch.state || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Telefone</span>
                <p className="font-medium">{selectedBranch.phone || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Email</span>
                <p className="font-medium">{selectedBranch.email || "-"}</p>
              </div>
              <div className="col-span-2">
                <span className="text-xs text-slate-500">Endereco</span>
                <p className="font-medium">{selectedBranch.address || "-"}</p>
              </div>
            </div>
            <div className="border-t pt-4">
              <h4 className="text-sm font-medium text-slate-700 mb-2">Estatisticas</h4>
              <div className="grid grid-cols-3 gap-3">
                <div className="bg-slate-50 rounded-lg p-3 text-center">
                  <p className="text-lg font-bold text-slate-900">{selectedBranch._count?.warehouses || 0}</p>
                  <p className="text-xs text-slate-500">Galpoes</p>
                </div>
                <div className="bg-slate-50 rounded-lg p-3 text-center">
                  <p className="text-lg font-bold text-slate-900">{selectedBranch._count?.users || 0}</p>
                  <p className="text-xs text-slate-500">Usuarios</p>
                </div>
                <div className="bg-slate-50 rounded-lg p-3 text-center">
                  <p className="text-lg font-bold text-slate-900">{selectedBranch._count?.shipments || 0}</p>
                  <p className="text-xs text-slate-500">Expedicoes</p>
                </div>
              </div>
            </div>
          </div>
        )}
      </Modal>

<PrintReport
        isOpen={isReportModalOpen}
        onClose={() => setIsReportModalOpen(false)}
        title="Relatorio de Filiais"
        data={reportData}
        summary={reportSummary}
        columns={["Codigo", "Nome", "CNPJ", "Cidade", "Estado", "Telefone", "Tipo", "Qtd Galpoes"]}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/App.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { Routes, Route, Navigate } from "react-router-dom"
import { useAuthStore } from "./store/authStore"
import Layout from "./components/Layout"
import Login from "./pages/Login"
import Dashboard from "./pages/Dashboard"
import Almoxarifado from "./pages/Almoxarifado"
import Agulhas from "./pages/Agulhas"
import Fios from "./pages/Fios"
import Qualidade from "./pages/Qualidade"
import Expedicao from "./pages/Expedicao"
import Reciclados from "./pages/Reciclados"
import Clientes from "./pages/Clientes"
import Galpoes from "./pages/Galpoes"
import Filiais from "./pages/Filiais"

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useAuthStore()
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route
        path="/"
        element={
          <PrivateRoute>
            <Layout />
          </PrivateRoute>
        }
      >
        <Route index element={<Navigate to="/dashboard" replace />} />
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="almoxarifado" element={<Almoxarifado />} />
        <Route path="agulhas" element={<Agulhas />} />
        <Route path="fios" element={<Fios />} />
        <Route path="qualidade" element={<Qualidade />} />
        <Route path="expedicao" element={<Expedicao />} />
        <Route path="reciclados" element={<Reciclados />} />
        <Route path="clientes" element={<Clientes />} />
        <Route path="galpoes" element={<Galpoes />} />
        <Route path="filiais" element={<Filiais />} />
      </Route>
    </Routes>
  )
}
[V0_FILE]typescriptreact:file="client/src/components/Layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Outlet, NavLink, useLocation, useNavigate } from "react-router-dom"
import { motion, AnimatePresence } from "framer-motion"
import {
  LayoutDashboard,
  Package,
  Scissors,
  Layers,
  ShieldCheck,
  Truck,
  Recycle,
  Menu,
  X,
  LogOut,
  User,
  Bell,
  Search,
  ChevronRight,
  Users,
  Warehouse,
  Building2,
} from "lucide-react"
import { useAuthStore } from "../store/authStore"
import { cn } from "../lib/utils"

const navigation = [
  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
  { name: "Almoxarifado", href: "/almoxarifado", icon: Package },
  { name: "Agulhas", href: "/agulhas", icon: Scissors },
  { name: "Fios", href: "/fios", icon: Layers },
  { name: "Qualidade", href: "/qualidade", icon: ShieldCheck },
  { name: "Expedição", href: "/expedicao", icon: Truck },
  { name: "Reciclados", href: "/reciclados", icon: Recycle },
  { name: "Clientes", href: "/clientes", icon: Users },
  { name: "Filiais", href: "/filiais", icon: Building2 },
  { name: "Galpões", href: "/galpoes", icon: Warehouse },
]

export default function Layout() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [isMobile, setIsMobile] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [showSearchResults, setShowSearchResults] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()

useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 1024)
    checkMobile()
    window.addEventListener("resize", checkMobile)
    return () => window.removeEventListener("resize", checkMobile)
  }, [])

useEffect(() => {
    setSidebarOpen(false)
  }, [location.pathname])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (!searchQuery.trim()) return

// Navigate to the most relevant page based on search
    const query = searchQuery.toLowerCase()
    if (query.includes("fio") || query.includes("thread")) {
      navigate(`/fios?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("cliente") || query.includes("customer")) {
      navigate(`/clientes?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("produto") || query.includes("almox")) {
      navigate(`/almoxarifado?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("agulha") || query.includes("needle")) {
      navigate(`/agulhas?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("expedi") || query.includes("envio")) {
      navigate(`/expedicao?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("qualidade") || query.includes("segunda")) {
      navigate(`/qualidade?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("recicl")) {
      navigate(`/reciclados?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("filial") || query.includes("matriz")) {
      navigate(`/filiais?search=${encodeURIComponent(searchQuery)}`)
    } else if (query.includes("galp")) {
      navigate(`/galpoes?search=${encodeURIComponent(searchQuery)}`)
    } else {
      // Default to almoxarifado
      navigate(`/almoxarifado?search=${encodeURIComponent(searchQuery)}`)
    }

setSearchQuery("")
    setShowSearchResults(false)
  }

const currentPage = navigation.find((item) => location.pathname.startsWith(item.href))

return (
    <div className="min-h-screen bg-slate-100">
      {/* Mobile overlay */}
      <AnimatePresence>
        {sidebarOpen && isMobile && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setSidebarOpen(false)}
            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          />
        )}
      </AnimatePresence>

{/* Sidebar */}
      <aside
        className={cn(
          "fixed top-0 left-0 z-50 h-full w-64 bg-dark-900 text-white transition-transform duration-300",
          isMobile && !sidebarOpen && "-translate-x-full",
        )}
      >
        <div className="flex flex-col h-full">
          {/* Logo */}
          <div className="flex items-center justify-between h-16 px-4 border-b border-dark-700">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center">
                <Package className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="font-bold text-lg leading-tight">TextilManager</h1>
                <p className="text-xs text-dark-400">ERP Pro</p>
              </div>
            </div>
            {isMobile && (
              <button onClick={() => setSidebarOpen(false)} className="p-2 hover:bg-dark-800 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            )}
          </div>

{/* Navigation */}
          <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
            {navigation.map((item) => (
              <NavLink
                key={item.href}
                to={item.href}
                className={({ isActive }) =>
                  cn(
                    "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 group",
                    isActive
                      ? "bg-primary-600 text-white shadow-lg shadow-primary-600/30"
                      : "text-dark-300 hover:bg-dark-800 hover:text-white",
                  )
                }
              >
                <item.icon className="w-5 h-5 flex-shrink-0" />
                <span className="font-medium">{item.name}</span>
              </NavLink>
            ))}
          </nav>

{/* User info */}
          <div className="p-4 border-t border-dark-700">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
                <User className="w-5 h-5" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="font-medium truncate">{user?.name}</p>
                <p className="text-xs text-dark-400 truncate">{user?.email}</p>
              </div>
              <button onClick={logout} className="p-2 hover:bg-dark-800 rounded-lg transition-colors" title="Sair">
                <LogOut className="w-5 h-5 text-dark-400 hover:text-red-400" />
              </button>
            </div>
          </div>
        </div>
      </aside>

{/* Main content */}
      <div className={cn("transition-all duration-300", !isMobile && "lg:ml-64")}>
        {/* Header */}
        <header className="sticky top-0 z-30 bg-white border-b border-slate-200 shadow-sm">
          <div className="flex items-center justify-between h-16 px-4 lg:px-6">
            <div className="flex items-center gap-4">
              {isMobile && (
                <button onClick={() => setSidebarOpen(true)} className="p-2 hover:bg-slate-100 rounded-lg">
                  <Menu className="w-6 h-6 text-slate-600" />
                </button>
              )}
              <div className="flex items-center gap-2 text-sm">
                <span className="text-slate-400">TextilManager</span>
                <ChevronRight className="w-4 h-4 text-slate-300" />
                <span className="font-medium text-slate-700">{currentPage?.name || "Dashboard"}</span>
              </div>
            </div>

<div className="flex items-center gap-3">
              <form
                onSubmit={handleSearch}
                className="hidden md:flex items-center gap-2 px-3 py-2 bg-slate-100 rounded-lg w-64"
              >
                <Search className="w-4 h-4 text-slate-400" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Buscar em todo o sistema..."
                  className="flex-1 bg-transparent text-sm outline-none"
                />
              </form>

{/* Notifications */}
              <button className="relative p-2 hover:bg-slate-100 rounded-lg">
                <Bell className="w-5 h-5 text-slate-600" />
                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
              </button>

{/* User menu (desktop) */}
              <div className="hidden lg:flex items-center gap-3 pl-3 border-l border-slate-200">
                <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                  <User className="w-4 h-4 text-primary-600" />
                </div>
                <span className="font-medium text-sm text-slate-700">{user?.name}</span>
              </div>
            </div>
          </div>
        </header>

{/* Page content */}
        <main className="p-4 lg:p-6">
          <motion.div
            key={location.pathname}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.2 }}
          >
            <Outlet />
          </motion.div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/components/ui/SearchSelect.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Search, X, Plus, ChevronDown } from "lucide-react"

interface Option {
  id: string
  name: string
  code?: string
  description?: string
}

interface SearchSelectProps {
  name: string
  label: string
  options: Option[]
  value?: string
  defaultValue?: string
  placeholder?: string
  required?: boolean
  disabled?: boolean
  onAdd?: () => void
  addLabel?: string
  onChange?: (value: string) => void
}

export default function SearchSelect({
  name,
  label,
  options,
  value,
  defaultValue,
  placeholder = "Selecione...",
  required = false,
  disabled = false,
  onAdd,
  addLabel = "Adicionar Novo",
  onChange,
}: SearchSelectProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [search, setSearch] = useState("")
  const [selectedId, setSelectedId] = useState(value || defaultValue || "")
  const containerRef = useRef<HTMLDivElement>(null)

const filteredOptions = options.filter(
    (opt) =>
      opt.name.toLowerCase().includes(search.toLowerCase()) || opt.code?.toLowerCase().includes(search.toLowerCase()),
  )

const selectedOption = options.find((opt) => opt.id === selectedId)

useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false)
        setSearch("")
      }
    }
    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

useEffect(() => {
    if (value !== undefined) {
      setSelectedId(value)
    }
  }, [value])

const handleSelect = (opt: Option) => {
    setSelectedId(opt.id)
    setIsOpen(false)
    setSearch("")
    onChange?.(opt.id)
  }

const handleClear = () => {
    setSelectedId("")
    onChange?.("")
  }

return (
    <div className="relative" ref={containerRef}>
      <div className="flex items-center justify-between mb-1">
        <label className="block text-sm font-medium text-slate-700">
          {label} {required && "*"}
        </label>
        {onAdd && (
          <button
            type="button"
            onClick={onAdd}
            className="text-xs text-primary-600 hover:text-primary-700 flex items-center gap-1"
          >
            <Plus className="w-3 h-3" />
            {addLabel}
          </button>
        )}
      </div>
      <input type="hidden" name={name} value={selectedId} />
      <div
        onClick={() => !disabled && setIsOpen(!isOpen)}
        className={`w-full px-3 py-2 border rounded-lg flex items-center justify-between cursor-pointer transition-colors ${
          disabled ? "bg-slate-100 cursor-not-allowed" : "bg-white hover:border-primary-400"
        } ${isOpen ? "border-primary-500 ring-2 ring-primary-100" : "border-slate-300"}`}
      >
        <span className={selectedOption ? "text-slate-900" : "text-slate-400"}>
          {selectedOption ? (
            <span>
              {selectedOption.code && (
                <span className="font-mono text-xs text-slate-500 mr-2">{selectedOption.code}</span>
              )}
              {selectedOption.name}
            </span>
          ) : (
            placeholder
          )}
        </span>
        <div className="flex items-center gap-1">
          {selectedId && !disabled && (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation()
                handleClear()
              }}
              className="p-1 hover:bg-slate-100 rounded"
            >
              <X className="w-3 h-3 text-slate-400" />
            </button>
          )}
          <ChevronDown className={`w-4 h-4 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}`} />
        </div>
      </div>

{isOpen && (
        <div className="absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-64 overflow-hidden">
          <div className="p-2 border-b border-slate-100">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Buscar..."
                className="w-full pl-9 pr-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-400"
                autoFocus
              />
            </div>
          </div>
          <div className="max-h-48 overflow-y-auto">
            {filteredOptions.length > 0 ? (
              filteredOptions.map((opt) => (
                <div
                  key={opt.id}
                  onClick={() => handleSelect(opt)}
                  className={`px-3 py-2 cursor-pointer hover:bg-primary-50 ${
                    selectedId === opt.id ? "bg-primary-100 text-primary-800" : ""
                  }`}
                >
                  <div className="flex items-center gap-2">
                    {opt.code && <span className="font-mono text-xs text-slate-500">{opt.code}</span>}
                    <span className="text-sm">{opt.name}</span>
                  </div>
                  {opt.description && <p className="text-xs text-slate-400 mt-0.5">{opt.description}</p>}
                </div>
              ))
            ) : (
              <div className="px-3 py-4 text-center text-sm text-slate-400">Nenhum resultado encontrado</div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/pages/Galpoes.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { motion } from "framer-motion"
import { Plus, Edit2, Trash2, Eye, Warehouse, Building2, Package, FileText } from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"
import ExportButtons from "../components/ui/ExportButtons"
import PrintReport from "../components/ui/PrintReport"
import SearchSelect from "../components/ui/SearchSelect"

interface WarehouseType {
  id: string
  code: string
  name: string
  description?: string
  branch?: { id: string; name: string; code: string }
  branchId?: string
  isActive: boolean
  createdAt?: string
  _count?: { products: number; threads: number }
}

interface Branch {
  id: string
  name: string
  code: string
}

export default function Galpoes() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [branchFilter, setBranchFilter] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isReportModalOpen, setIsReportModalOpen] = useState(false)
  const [isBranchModalOpen, setIsBranchModalOpen] = useState(false)
  const [selectedWarehouse, setSelectedWarehouse] = useState<WarehouseType | null>(null)

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["warehouses", page, search, branchFilter],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
        ...(branchFilter && { branchId: branchFilter }),
      })
      const { data } = await api.get(`/warehouses?${params}`)
      return data
    },
  })

const { data: branchesData, refetch: refetchBranches } = useQuery({
    queryKey: ["branches"],
    queryFn: async () => {
      const { data } = await api.get("/branches?limit=100")
      return data.data || []
    },
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<WarehouseType>) => api.post("/warehouses", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["warehouses"] })
      toast.success("Galpao cadastrado com sucesso!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao cadastrar galpao"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<WarehouseType> }) => api.put(`/warehouses/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["warehouses"] })
      toast.success("Galpao atualizado com sucesso!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar galpao"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/warehouses/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["warehouses"] })
      toast.success("Galpao removido com sucesso!")
    },
    onError: () => toast.error("Erro ao remover galpao"),
  })

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedWarehouse) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedWarehouse.id,
      data: {
        name: formData.get("name") as string,
        description: formData.get("description") as string,
        branchId: (formData.get("branchId") as string) || undefined,
      },
    })
  }

const handleCreateBranch = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    createBranchMutation.mutate({
      code: formData.get("code") as string,
      name: formData.get("name") as string,
      city: formData.get("city") as string,
      address: formData.get("address") as string,
    })
  }

const handleExport = (format: "csv" | "pdf" | "excel") => {
    const dataToExport = data?.data || []
    if (format === "csv" || format === "excel") {
      const headers = ["Codigo", "Nome", "Filial", "Produtos", "Fios", "Descricao"]
      const rows = dataToExport.map((w: WarehouseType) => [
        w.code,
        w.name,
        w.branch?.name || "-",
        w._count?.products || 0,
        w._count?.threads || 0,
        w.description || "",
      ])
      const csvContent = [headers, ...rows].map((row) => row.join(";")).join("\n")
      const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `galpoes_${new Date().toISOString().split("T")[0]}.${format === "excel" ? "xls" : "csv"}`
      a.click()
      URL.revokeObjectURL(url)
      toast.success("Arquivo exportado!")
    } else {
      setIsReportModalOpen(true)
    }
  }

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "name", header: "Nome", sortable: true, className: "font-medium text-slate-900" },
    { key: "branch", header: "Filial", render: (item: WarehouseType) => item.branch?.name || "-" },
    { key: "products", header: "Produtos", render: (item: WarehouseType) => item._count?.products || 0 },
    { key: "threads", header: "Fios", render: (item: WarehouseType) => item._count?.threads || 0 },
  ]

const reportColumns = [
    { key: "code", header: "Codigo" },
    { key: "name", header: "Nome" },
    { key: "branch", header: "Filial", format: (_: unknown, item: WarehouseType) => item.branch?.name || "-" },
    {
      key: "products",
      header: "Qtd Produtos",
      format: (_: unknown, item: WarehouseType) => String(item._count?.products || 0),
    },
    {
      key: "threads",
      header: "Qtd Fios",
      format: (_: unknown, item: WarehouseType) => String(item._count?.threads || 0),
    },
    { key: "description", header: "Descricao" },
  ]

const reportSummary = [
    { label: "Total de Galpoes", value: data?.pagination?.total || 0 },
    { label: "Total de Filiais", value: branchesData?.length || 0 },
  ]

<DataTable
        data={data?.data || []}
        columns={columns}
        searchPlaceholder="Buscar por codigo, nome..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        filters={
          <select
            value={branchFilter}
            onChange={(e) => setBranchFilter(e.target.value)}
            className="px-3 py-2 border border-slate-200 rounded-lg text-sm"
          >
            <option value="">Todas Filiais</option>
            {(branchesData || []).map((b: Branch) => (
              <option key={b.id} value={b.id}>
                {b.name}
              </option>
            ))}
          </select>
        }
        actions={(item: WarehouseType) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedWarehouse(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                setSelectedWarehouse(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover este galpao?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Novo Galpao">
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo *</label>
              <input
                name="code"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: GAL01"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: Galpao Principal"
              />
            </div>
            <div className="md:col-span-2">
              <SearchSelect
                name="branchId"
                label="Filial"
                options={(branchesData || []).map((b: Branch) => ({ id: b.id, name: b.name, code: b.code }))}
                placeholder="Selecione uma filial..."
                onAdd={() => setIsBranchModalOpen(true)}
                addLabel="Nova Filial"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Descricao</label>
              <textarea
                name="description"
                rows={2}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Descricao do galpao..."
              />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Galpao">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo</label>
              <input
                value={selectedWarehouse?.code || ""}
                disabled
                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-50"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                defaultValue={selectedWarehouse?.name}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-2">
              <SearchSelect
                name="branchId"
                label="Filial"
                options={(branchesData || []).map((b: Branch) => ({ id: b.id, name: b.name, code: b.code }))}
                defaultValue={selectedWarehouse?.branchId || ""}
                placeholder="Selecione uma filial..."
                onAdd={() => setIsBranchModalOpen(true)}
                addLabel="Nova Filial"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Descricao</label>
              <textarea
                name="description"
                defaultValue={selectedWarehouse?.description || ""}
                rows={2}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes do Galpao">
        {selectedWarehouse && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-medium font-mono">{selectedWarehouse.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Nome</span>
                <p className="font-medium">{selectedWarehouse.name}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Filial</span>
                <p className="font-medium flex items-center gap-1">
                  <Building2 className="w-4 h-4" />
                  {selectedWarehouse.branch?.name || "-"}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Produtos</span>
                <p className="font-medium flex items-center gap-1">
                  <Package className="w-4 h-4" />
                  {selectedWarehouse._count?.products || 0}
                </p>
              </div>
              <div className="col-span-2">
                <span className="text-xs text-slate-500">Descricao</span>
                <p className="font-medium">{selectedWarehouse.description || "-"}</p>
              </div>
            </div>
          </div>
        )}
      </Modal>

{/* Branch Modal */}
      <Modal isOpen={isBranchModalOpen} onClose={() => setIsBranchModalOpen(false)} title="Nova Filial">
        <form onSubmit={handleCreateBranch} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo *</label>
              <input
                name="code"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: FIL01"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: Filial Matriz"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cidade</label>
              <input
                name="city"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Ex: Sao Paulo"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Endereco</label>
              <input
                name="address"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                placeholder="Endereco completo"
              />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsBranchModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createBranchMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createBranchMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Report Modal */}
      <PrintReport
        isOpen={isReportModalOpen}
        onClose={() => setIsReportModalOpen(false)}
        title="Relatorio de Galpoes"
        subtitle="Lista completa de galpoes e depositos"
        data={(data?.data || []).map((w: WarehouseType) => ({
          code: w.code,
          name: w.name,
          branch: w.branch?.name || "-",
          products: w._count?.products || 0,
          threads: w._count?.threads || 0,
          description: w.description || "-",
        }))}
        columns={reportColumns}
        summary={reportSummary}
      />
    </div>
  )
}
[V0_FILE]typescript:file="server/src/routes/thread.routes.ts" isEdit="true" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { AppError } from "../middlewares/errorHandler.js"
import { authMiddleware } from "../middlewares/auth.js"

export const threadRoutes = Router()

threadRoutes.use(authMiddleware)

threadRoutes.get("/", async (req, res) => {
  const { page = "1", limit = "20", search = "", status, warehouseId, customerId } = req.query
  const pageNum = Number.parseInt(page as string)
  const limitNum = Number.parseInt(limit as string)
  const skip = (pageNum - 1) * limitNum

const where: any = { isActive: true }

if (search) {
    where.OR = [
      { code: { contains: search as string } },
      { name: { contains: search as string } },
      { color: { contains: search as string } },
      { machine: { contains: search as string } },
      { operationOrder: { contains: search as string } },
      { lot: { contains: search as string } },
    ]
  }

if (status) where.status = status
  if (warehouseId) where.warehouseId = warehouseId
  if (customerId) where.customerId = customerId

const [threads, total] = await Promise.all([
    prisma.thread.findMany({
      where,
      skip,
      take: limitNum,
      orderBy: { createdAt: "desc" },
      include: {
        warehouse: true,
        customer: true,
      },
    }),
    prisma.thread.count({ where }),
  ])

res.json({
    success: true,
    data: threads,
    pagination: { page: pageNum, limit: limitNum, total, totalPages: Math.ceil(total / limitNum) },
  })
})

threadRoutes.get("/:id", async (req, res) => {
  const thread = await prisma.thread.findUnique({
    where: { id: req.params.id },
    include: {
      warehouse: true,
      customer: true,
      movements: { orderBy: { createdAt: "desc" }, take: 50 },
    },
  })
  if (!thread) throw new AppError("Fio não encontrado", 404)
  res.json({ success: true, data: thread })
})

threadRoutes.get("/:id/movements", async (req, res) => {
  const movements = await prisma.threadMovement.findMany({
    where: { threadId: req.params.id },
    orderBy: { createdAt: "desc" },
    take: 100,
  })
  res.json({ success: true, data: movements })
})

threadRoutes.post("/", async (req, res) => {
  const {
    code,
    name,
    color,
    colorCode,
    composition,
    supplier,
    lot,
    lotDate,
    initialWeight,
    minWeight,
    machine,
    operationOrder,
    productionOrder,
    warehouseId,
    customerId,
    notes,
  } = req.body

let parsedLotDate = undefined
  if (lotDate) {
    // Se for apenas data (YYYY-MM-DD), adiciona hora
    if (lotDate.length === 10) {
      parsedLotDate = new Date(`${lotDate}T00:00:00.000Z`)
    } else {
      parsedLotDate = new Date(lotDate)
    }
  }

const thread = await prisma.thread.create({
    data: {
      code,
      name,
      color,
      colorCode,
      composition,
      supplier,
      lot,
      lotDate: parsedLotDate,
      initialWeight: initialWeight || 0,
      currentWeight: initialWeight || 0,
      minWeight: minWeight || 1,
      machine: machine || undefined,
      operationOrder: operationOrder || undefined,
      productionOrder: productionOrder || undefined,
      warehouseId: warehouseId || undefined,
      customerId: customerId || undefined,
      notes,
    },
    include: {
      warehouse: true,
      customer: true,
    },
  })
  res.status(201).json({ success: true, data: thread })
})

threadRoutes.put("/:id", async (req, res) => {
  const { lotDate, ...rest } = req.body

let parsedLotDate = undefined
  if (lotDate) {
    if (lotDate.length === 10) {
      parsedLotDate = new Date(`${lotDate}T00:00:00.000Z`)
    } else {
      parsedLotDate = new Date(lotDate)
    }
  }

const thread = await prisma.thread.update({
    where: { id: req.params.id },
    data: {
      ...rest,
      ...(lotDate && { lotDate: parsedLotDate }),
    },
    include: {
      warehouse: true,
      customer: true,
    },
  })
  res.json({ success: true, data: thread })
})

threadRoutes.delete("/:id", async (req, res) => {
  await prisma.thread.update({ where: { id: req.params.id }, data: { isActive: false } })
  res.json({ success: true, message: "Fio removido" })
})

threadRoutes.post("/:id/movement", async (req, res) => {
  const { id } = req.params
  const { type, weight, machine, operationOrder, productionOrder, operator, shift, reason, document } = req.body

const thread = await prisma.thread.findUnique({ where: { id } })
  if (!thread) throw new AppError("Fio não encontrado", 404)
  if (type === "consumo" && thread.currentWeight < weight) throw new AppError("Peso insuficiente", 400)

const newWeight = type === "entrada" ? thread.currentWeight + weight : thread.currentWeight - weight

const [updated, movement] = await prisma.$transaction([
    prisma.thread.update({
      where: { id },
      data: {
        currentWeight: newWeight,
        ...(machine && { machine }),
        ...(operationOrder && { operationOrder }),
        ...(productionOrder && { productionOrder }),
      },
      include: {
        warehouse: true,
        customer: true,
      },
    }),
    prisma.threadMovement.create({
      data: {
        type,
        weight,
        machine,
        operationOrder,
        productionOrder,
        operator,
        shift,
        reason,
        document,
        threadId: id,
      },
    }),
  ])

res.json({ success: true, data: { thread: updated, movement } })
})
[V0_FILE]typescript:file="server/src/routes/product.routes.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { AppError } from "../middlewares/errorHandler.js"
import { authMiddleware } from "../middlewares/auth.js"

export const productRoutes = Router()

productRoutes.use(authMiddleware)

// Listar produtos com paginação e filtros
productRoutes.get("/", async (req, res) => {
  const {
    page = "1",
    limit = "20",
    search = "",
    categoryId,
    locationId,
    status,
    sortBy = "createdAt",
    sortOrder = "desc",
  } = req.query

const pageNum = Number.parseInt(page as string)
  const limitNum = Number.parseInt(limit as string)
  const skip = (pageNum - 1) * limitNum

const where: any = { isActive: true }

if (search) {
    where.OR = [
      { code: { contains: search as string } },
      { name: { contains: search as string } },
      { description: { contains: search as string } },
      { barcode: { contains: search as string } },
    ]
  }

if (categoryId) where.categoryId = categoryId
  if (locationId) where.locationId = locationId

if (status === "critical") {
    where.quantity = { lte: 10 }
  } else if (status === "ok") {
    where.quantity = { gt: 10 }
  } else if (status === "empty") {
    where.quantity = 0
  }

const [products, total] = await Promise.all([
    prisma.product.findMany({
      where,
      skip,
      take: limitNum,
      orderBy: { [sortBy as string]: sortOrder },
      include: {
        category: true,
        location: true,
        supplier: true,
        attachments: true,
      },
    }),
    prisma.product.count({ where }),
  ])

res.json({
    success: true,
    data: products,
    pagination: {
      page: pageNum,
      limit: limitNum,
      total,
      totalPages: Math.ceil(total / limitNum),
    },
  })
})

// Buscar produto por ID
productRoutes.get("/:id", async (req, res) => {
  const product = await prisma.product.findUnique({
    where: { id: req.params.id },
    include: {
      category: true,
      location: true,
      supplier: true,
      attachments: true,
      movements: {
        orderBy: { createdAt: "desc" },
        take: 20,
        include: { user: { select: { name: true } } },
      },
    },
  })

if (!product) {
    throw new AppError("Produto não encontrado", 404)
  }

res.json({ success: true, data: product })
})

// Criar produto
productRoutes.post("/", async (req, res) => {
  const {
    code,
    name,
    description,
    unit,
    quantity,
    minQuantity,
    maxQuantity,
    costPrice,
    salePrice,
    barcode,
    categoryId,
    locationId,
    supplierId,
    warehouseId,
  } = req.body

const existingProduct = await prisma.product.findUnique({ where: { code } })

if (existingProduct) {
    throw new AppError("Código do produto já existe", 400)
  }

const product = await prisma.product.create({
    data: {
      code,
      name,
      description,
      unit,
      quantity: quantity || 0,
      minQuantity: minQuantity || 0,
      maxQuantity,
      costPrice: costPrice || 0,
      salePrice,
      barcode,
      categoryId: categoryId || undefined,
      locationId: locationId || undefined,
      supplierId: supplierId || undefined,
      warehouseId: warehouseId || undefined,
    },
    include: { category: true, location: true, supplier: true, warehouse: true },
  })

// O log sera adicionado apenas se o usuario estiver autenticado corretamente
  try {
    if (req.user?.id) {
      await prisma.activityLog.create({
        data: {
          action: "CREATE",
          entity: "Product",
          entityId: product.id,
          entityName: product.name,
          details: `Produto ${code} - ${name} criado`,
          userId: req.user.id,
        },
      })
    }
  } catch (logError) {
    // Ignora erro de log para nao afetar a criacao do produto
    console.log("[v0] Erro ao criar log de atividade:", logError)
  }

res.status(201).json({ success: true, data: product })
})

// Atualizar produto
productRoutes.put("/:id", async (req, res) => {
  const { id } = req.params
  const data = req.body

const product = await prisma.product.update({
    where: { id },
    data,
    include: { category: true, location: true, supplier: true, warehouse: true },
  })

try {
    if (req.user?.id) {
      await prisma.activityLog.create({
        data: {
          action: "UPDATE",
          entity: "Product",
          entityId: product.id,
          entityName: product.name,
          details: `Produto ${product.code} atualizado`,
          userId: req.user.id,
        },
      })
    }
  } catch (logError) {
    console.log("[v0] Erro ao criar log de atividade:", logError)
  }

res.json({ success: true, data: product })
})

// Soft delete
productRoutes.delete("/:id", async (req, res) => {
  const { id } = req.params

const product = await prisma.product.update({
    where: { id },
    data: { isActive: false },
  })

// Log opcional - nao bloqueia se falhar
  try {
    if (req.user?.id) {
      await prisma.activityLog.create({
        data: {
          action: "DELETE",
          entity: "Product",
          entityId: product.id,
          entityName: product.name,
          details: `Produto ${product.code} removido`,
          userId: req.user.id,
        },
      })
    }
  } catch (logError) {
    console.log("[v0] Erro ao criar log de atividade:", logError)
  }

res.json({ success: true, message: "Produto removido com sucesso" })
})

// Movimentação de estoque (entrada/saída)
productRoutes.post("/:id/movement", async (req, res) => {
  const { id } = req.params
  const { type, quantity, reason, document, notes } = req.body

const product = await prisma.product.findUnique({ where: { id } })

if (!product) {
    throw new AppError("Produto não encontrado", 404)
  }

if (type === "saida" && product.quantity < quantity) {
    throw new AppError("Quantidade insuficiente em estoque", 400)
  }

const newQuantity = type === "entrada" ? product.quantity + quantity : product.quantity - quantity

const [updatedProduct, movement] = await prisma.$transaction([
    prisma.product.update({
      where: { id },
      data: { quantity: newQuantity },
      include: { category: true, location: true },
    }),
    prisma.movement.create({
      data: {
        type,
        quantity,
        reason,
        document,
        notes,
        productId: id,
        userId: req.user?.id,
      },
    }),
  ])

await prisma.activityLog.create({
    data: {
      action: "MOVEMENT",
      entity: "Product",
      entityId: product.id,
      details: `${type === "entrada" ? "Entrada" : "Saída"} de ${quantity} unidades - ${product.code}`,
      userId: req.user?.id,
    },
  })

res.json({ success: true, data: { product: updatedProduct, movement } })
})
[V0_FILE]typescriptreact:file="client/src/pages/Fios.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { motion } from "framer-motion"
import { Plus, Edit2, Trash2, ArrowUpRight, ArrowDownRight, Eye, Filter, History, Printer } from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"
import PrintReport from "../components/ui/PrintReport"
import { formatDateTime } from "../lib/utils"

interface Thread {
  id: string
  code: string
  name: string
  color: string
  colorCode?: string
  composition?: string
  supplier?: string
  lot?: string
  lotDate?: string
  initialWeight: number
  currentWeight: number
  minWeight: number
  machine?: string
  operationOrder?: string
  productionOrder?: string
  status: string
  notes?: string
  warehouseId?: string
  warehouse?: { id: string; name: string }
  customerId?: string
  customer?: { id: string; name: string }
  movements?: ThreadMovement[]
  createdAt: string
  updatedAt: string
}

interface ThreadMovement {
  id: string
  type: string
  weight: number
  machine?: string
  operationOrder?: string
  productionOrder?: string
  operator?: string
  shift?: string
  reason?: string
  document?: string
  createdAt: string
}

interface Warehouse {
  id: string
  name: string
  code: string
}

interface Customer {
  id: string
  name: string
  code: string
}

export default function Fios() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("")
  const [warehouseFilter, setWarehouseFilter] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isMovementModalOpen, setIsMovementModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false)
  const [isReportOpen, setIsReportOpen] = useState(false)
  const [selectedThread, setSelectedThread] = useState<Thread | null>(null)
  const [movementType, setMovementType] = useState<"entrada" | "consumo">("entrada")

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["threads", page, search, statusFilter, warehouseFilter],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
        ...(statusFilter && { status: statusFilter }),
        ...(warehouseFilter && { warehouseId: warehouseFilter }),
      })
      const { data } = await api.get(`/threads?${params}`)
      return data
    },
  })

const { data: warehousesData } = useQuery({
    queryKey: ["warehouses-list"],
    queryFn: async () => {
      const { data } = await api.get("/warehouses?limit=100")
      return data.data || []
    },
  })

const { data: customersData } = useQuery({
    queryKey: ["customers-list"],
    queryFn: async () => {
      const { data } = await api.get("/customers?limit=100")
      return data.data || []
    },
  })

const { data: historyData, isLoading: historyLoading } = useQuery({
    queryKey: ["thread-history", selectedThread?.id],
    queryFn: async () => {
      if (!selectedThread?.id) return []
      const { data } = await api.get(`/threads/${selectedThread.id}/movements`)
      return data.data || []
    },
    enabled: !!selectedThread?.id && isHistoryModalOpen,
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<Thread>) => api.post("/threads", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["threads"] })
      toast.success("Fio cadastrado com sucesso!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao cadastrar fio"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Thread> }) => api.put(`/threads/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["threads"] })
      toast.success("Fio atualizado com sucesso!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar fio"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/threads/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["threads"] })
      toast.success("Fio removido com sucesso!")
    },
    onError: () => toast.error("Erro ao remover fio"),
  })

const movementMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: any }) => api.post(`/threads/${id}/movement`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["threads"] })
      queryClient.invalidateQueries({ queryKey: ["thread-history"] })
      toast.success("Movimentacao registrada!")
      setIsMovementModalOpen(false)
    },
    onError: () => toast.error("Erro ao registrar movimentacao"),
  })

const handleCreate = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    createMutation.mutate({
      code: formData.get("code") as string,
      name: formData.get("name") as string,
      color: formData.get("color") as string,
      colorCode: formData.get("colorCode") as string,
      composition: formData.get("composition") as string,
      supplier: formData.get("supplier") as string,
      initialWeight: Number(formData.get("initialWeight")),
      minWeight: Number(formData.get("minWeight")) || 1,
      warehouseId: (formData.get("warehouseId") as string) || undefined,
      notes: formData.get("notes") as string,
    })
  }

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedThread) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedThread.id,
      data: {
        name: formData.get("name") as string,
        color: formData.get("color") as string,
        composition: formData.get("composition") as string,
        supplier: formData.get("supplier") as string,
        minWeight: Number(formData.get("minWeight")),
        machine: (formData.get("machine") as string) || undefined,
        operationOrder: (formData.get("operationOrder") as string) || undefined,
        productionOrder: (formData.get("productionOrder") as string) || undefined,
        warehouseId: (formData.get("warehouseId") as string) || undefined,
        customerId: (formData.get("customerId") as string) || undefined,
        notes: formData.get("notes") as string,
      },
    })
  }

const handleMovement = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedThread) return
    const formData = new FormData(e.currentTarget)
    movementMutation.mutate({
      id: selectedThread.id,
      data: {
        type: movementType,
        weight: Number(formData.get("weight")),
        machine: formData.get("machine") as string,
        operationOrder: formData.get("operationOrder") as string,
        productionOrder: formData.get("productionOrder") as string,
        operator: formData.get("operator") as string,
        shift: formData.get("shift") as string,
        reason: formData.get("reason") as string,
        document: formData.get("document") as string,
      },
    })
  }

// Calcular estatisticas
  const threads = data?.data || []
  const totalWeight = threads.reduce((sum: number, t: Thread) => sum + t.currentWeight, 0)
  const criticalCount = threads.filter((t: Thread) => t.currentWeight <= t.minWeight).length

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "name", header: "Nome", sortable: true, className: "font-medium" },
    {
      key: "color",
      header: "Cor",
      render: (item: Thread) => (
        <div className="flex items-center gap-2">
          <div
            className="w-4 h-4 rounded-full border border-slate-200"
            style={{ backgroundColor: item.colorCode || "#ccc" }}
          />
          <span className="text-sm">{item.color}</span>
        </div>
      ),
    },
    {
      key: "composition",
      header: "Composicao",
      render: (item: Thread) => <span className="text-xs">{item.composition || "-"}</span>,
    },
    {
      key: "supplier",
      header: "Fornecedor",
      render: (item: Thread) => <span className="text-xs">{item.supplier || "-"}</span>,
    },
    {
      key: "warehouse",
      header: "Galpao",
      render: (item: Thread) => <span className="text-xs">{item.warehouse?.name || "-"}</span>,
    },
    {
      key: "currentWeight",
      header: "Peso Atual",
      render: (item: Thread) => (
        <span className={`font-medium ${item.currentWeight <= item.minWeight ? "text-red-600" : ""}`}>
          {item.currentWeight.toFixed(2)} kg
        </span>
      ),
    },
    {
      key: "status",
      header: "Status",
      render: (item: Thread) => {
        const isCritical = item.currentWeight <= item.minWeight
        let color = "bg-slate-100 text-slate-800"
        let label = "Disponivel"

if (isCritical) {
          color = "bg-red-100 text-red-800"
          label = "Critico"
        }

return <span className={`px-2 py-1 rounded-full text-xs font-medium ${color}`}>{label}</span>
      },
    },
  ]

const reportColumns = [
    { key: "code", header: "Codigo" },
    { key: "name", header: "Nome" },
    { key: "color", header: "Cor" },
    { key: "composition", header: "Composicao" },
    { key: "supplier", header: "Fornecedor" },
    { key: "warehouse", header: "Galpao", format: (_: any, item: Thread) => item.warehouse?.name || "-" },
    { key: "initialWeight", header: "Peso Inicial", format: (v: number) => `${v?.toFixed(2) || 0} kg` },
    { key: "currentWeight", header: "Peso Atual", format: (v: number) => `${v?.toFixed(2) || 0} kg` },
    {
      key: "status",
      header: "Status",
      format: (_: any, item: Thread) => (item.currentWeight <= item.minWeight ? "Critico" : "Disponivel"),
    },
  ]

{/* Stats Cards */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-slate-900">{data?.pagination?.total || 0}</p>
          <p className="text-xs text-slate-500">Total de Fios</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-blue-600">{totalWeight.toFixed(2)} kg</p>
          <p className="text-xs text-slate-500">Peso Total</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-emerald-600">
            {threads.filter((t: Thread) => t.currentWeight > t.minWeight).length}
          </p>
          <p className="text-xs text-slate-500">Disponiveis</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-red-600">{criticalCount}</p>
          <p className="text-xs text-slate-500">Em Estoque Critico</p>
        </motion.div>
      </div>

{/* Filters */}
      <div className="bg-white rounded-xl p-4 border border-slate-200">
        <div className="flex items-center gap-2 mb-3">
          <Filter className="w-4 h-4 text-slate-500" />
          <span className="text-sm font-medium text-slate-700">Filtros</span>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todos os Status</option>
            <option value="ok">OK</option>
            <option value="critico">Critico</option>
          </select>
          <select
            value={warehouseFilter}
            onChange={(e) => setWarehouseFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todos os Galpoes</option>
            {(warehousesData || []).map((w: Warehouse) => (
              <option key={w.id} value={w.id}>
                {w.name}
              </option>
            ))}
          </select>
          <button
            onClick={() => {
              setStatusFilter("")
              setWarehouseFilter("")
            }}
            className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg"
          >
            Limpar Filtros
          </button>
        </div>
      </div>

{/* Info */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
        <p className="text-sm text-blue-800">
          <strong>Info:</strong> Os fios sao cadastrados aqui. Os dados de Lote, OP e Maquina sao vinculados na Expedicao.
        </p>
      </div>

{/* Data Table */}
      <DataTable
        data={threads}
        columns={columns}
        searchPlaceholder="Buscar por codigo, nome, cor, fornecedor..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        actions={(item: Thread) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedThread(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Ver Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                setSelectedThread(item)
                setIsHistoryModalOpen(true)
              }}
              className="p-2 hover:bg-blue-100 rounded-lg"
              title="Historico"
            >
              <History className="w-4 h-4 text-blue-600" />
            </button>
            <button
              onClick={() => {
                setSelectedThread(item)
                setMovementType("entrada")
                setIsMovementModalOpen(true)
              }}
              className="p-2 hover:bg-emerald-100 rounded-lg"
              title="Entrada (Saldo Retorno)"
            >
              <ArrowUpRight className="w-4 h-4 text-emerald-600" />
            </button>
            <button
              onClick={() => {
                setSelectedThread(item)
                setMovementType("consumo")
                setIsMovementModalOpen(true)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Consumo"
            >
              <ArrowDownRight className="w-4 h-4 text-red-600" />
            </button>
            <button
              onClick={() => {
                setSelectedThread(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover este fio?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal - Simplificado */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Novo Fio" size="lg">
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
            <p className="text-sm text-blue-800">
              Cadastre apenas os dados basicos do fio. Lote, OP e Maquina serao vinculados na Expedicao.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo *</label>
              <input name="code" required className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome / Titulo *</label>
              <input name="name" required className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cor *</label>
              <input name="color" required placeholder="Ex: Azul Marinho" className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo da Cor</label>
              <div className="flex gap-2">
                <input
                  name="colorCode"
                  type="color"
                  defaultValue="#6366f1"
                  className="w-14 h-10 px-1 py-1 border border-slate-300 rounded-lg cursor-pointer"
                />
                <input
                  type="text"
                  placeholder="Ou digite o codigo hex"
                  className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm"
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Composicao</label>
              <input
                name="composition"
                placeholder="Ex: 100% Algodao, 50% Poliester"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Fornecedor</label>
              <input name="supplier" placeholder="Nome do fornecedor" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso Inicial (kg) *</label>
              <input
                name="initialWeight"
                type="number"
                step="0.01"
                min="0.01"
                required
                placeholder="0.00"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso Minimo Alerta (kg)</label>
              <input
                name="minWeight"
                type="number"
                step="0.01"
                min="0"
                defaultValue="1"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Galpao de Armazenamento</label>
              <select name="warehouseId" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione o galpao...</option>
                {(warehousesData || []).map((w: Warehouse) => (
                  <option key={w.id} value={w.id}>
                    {w.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
              <textarea name="notes" rows={2} placeholder="Observacoes adicionais sobre o fio..." className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar Fio"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Fio" size="lg">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo</label>
              <input
                value={selectedThread?.code || ""}
                disabled
                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-50"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Nome *</label>
              <input
                name="name"
                defaultValue={selectedThread?.name}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cor *</label>
              <input
                name="color"
                defaultValue={selectedThread?.color}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Composicao</label>
              <input
                name="composition"
                defaultValue={selectedThread?.composition || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Fornecedor</label>
              <input
                name="supplier"
                defaultValue={selectedThread?.supplier || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso Minimo (kg)</label>
              <input
                name="minWeight"
                type="number"
                step="0.01"
                defaultValue={selectedThread?.minWeight}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cliente (Proprietario)</label>
              <select
                name="customerId"
                defaultValue={selectedThread?.customerId || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione o cliente...</option>
                {(customersData || []).map((c: Customer) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Galpao</label>
              <select
                name="warehouseId"
                defaultValue={selectedThread?.warehouseId || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione o galpao...</option>
                {(warehousesData || []).map((w: Warehouse) => (
                  <option key={w.id} value={w.id}>
                    {w.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
              <input
                name="machine"
                defaultValue={selectedThread?.machine || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">OP</label>
              <input
                name="operationOrder"
                defaultValue={selectedThread?.operationOrder || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Ordem de Producao</label>
              <input
                name="productionOrder"
                defaultValue={selectedThread?.productionOrder || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-3">
              <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
              <textarea
                name="notes"
                defaultValue={selectedThread?.notes || ""}
                rows={2}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Movement Modal */}
      <Modal
        isOpen={isMovementModalOpen}
        onClose={() => setIsMovementModalOpen(false)}
        title={movementType === "entrada" ? "Registrar Entrada" : "Registrar Consumo"}
      >
        <form onSubmit={handleMovement} className="space-y-4">
          <div className="bg-slate-50 rounded-lg p-3 mb-4">
            <p className="text-sm">
              <strong>Fio:</strong> {selectedThread?.name}
            </p>
            <p className="text-sm">
              <strong>Peso Atual:</strong> {selectedThread?.currentWeight.toFixed(2)} kg
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso (kg) *</label>
              <input
                name="weight"
                type="number"
                step="0.01"
                min="0.01"
                max={movementType === "consumo" ? selectedThread?.currentWeight : undefined}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
              <input
                name="machine"
                defaultValue={selectedThread?.machine || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">OP</label>
              <input
                name="operationOrder"
                defaultValue={selectedThread?.operationOrder || ""}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Operador</label>
              <input name="operator" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Turno</label>
              <select name="shift" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="1">1o Turno</option>
                <option value="2">2o Turno</option>
                <option value="3">3o Turno</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Documento</label>
              <input name="document" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Motivo</label>
              <textarea name="reason" rows={2} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsMovementModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={movementMutation.isPending}
              className={`px-4 py-2 text-white rounded-lg disabled:opacity-50 ${
                movementType === "entrada" ? "bg-emerald-600 hover:bg-emerald-700" : "bg-red-600 hover:bg-red-700"
              }`}
            >
              {movementMutation.isPending ? "Registrando..." : "Registrar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes do Fio">
        {selectedThread && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-mono font-medium">{selectedThread.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Nome</span>
                <p className="font-medium">{selectedThread.name}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Cor</span>
                <div className="flex items-center gap-2">
                  <div
                    className="w-4 h-4 rounded-full border"
                    style={{ backgroundColor: selectedThread.colorCode || "#ccc" }}
                  />
                  <span>{selectedThread.color}</span>
                </div>
              </div>
              <div>
                <span className="text-xs text-slate-500">Composicao</span>
                <p className="font-medium">{selectedThread.composition || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Cliente</span>
                <p className="font-medium">{selectedThread.customer?.name || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Galpao</span>
                <p className="font-medium">{selectedThread.warehouse?.name || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Maquina</span>
                <p className="font-medium">{selectedThread.machine || "Aguardando"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">OP</span>
                <p className="font-medium">{selectedThread.operationOrder || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Peso Inicial</span>
                <p className="font-medium">{selectedThread.initialWeight.toFixed(2)} kg</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Peso Atual</span>
                <p
                  className={`font-bold text-lg ${
                    selectedThread.currentWeight <= selectedThread.minWeight ? "text-red-600" : "text-emerald-600"
                  }`}
                >
                  {selectedThread.currentWeight.toFixed(2)} kg
                </p>
              </div>
            </div>
          </div>
        )}
      </Modal>

{/* History Modal */}
      <Modal
        isOpen={isHistoryModalOpen}
        onClose={() => setIsHistoryModalOpen(false)}
        title="Historico de Movimentacoes"
        size="lg"
      >
        {historyLoading ? (
          <div className="text-center py-8">Carregando...</div>
        ) : (
          <div className="space-y-4 max-h-96 overflow-y-auto">
            {(historyData || []).length === 0 ? (
              <p className="text-center text-slate-500 py-8">Nenhuma movimentacao registrada</p>
            ) : (
              (historyData || []).map((mov: ThreadMovement) => (
                <div key={mov.id} className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      mov.type === "entrada" ? "bg-emerald-100" : "bg-red-100"
                    }`}
                  >
                    {mov.type === "entrada" ? (
                      <ArrowUpRight className="w-4 h-4 text-emerald-600" />
                    ) : (
                      <ArrowDownRight className="w-4 h-4 text-red-600" />
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <p className="font-medium">
                        {mov.type === "entrada" ? "Entrada" : "Consumo"}: {mov.weight.toFixed(2)} kg
                      </p>
                      <span className="text-xs text-slate-500">{formatDateTime(mov.createdAt)}</span>
                    </div>
                    <div className="text-sm text-slate-600 mt-1">
                      {mov.machine && <span className="mr-3">Maq: {mov.machine}</span>}
                      {mov.operationOrder && <span className="mr-3">OP: {mov.operationOrder}</span>}
                      {mov.operator && <span>Op: {mov.operator}</span>}
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        )}
      </Modal>

{/* Print Report */}
      {isReportOpen && (
        <PrintReport
          isOpen={isReportOpen}
          onClose={() => setIsReportOpen(false)}
          title="Relatorio de Fios"
          subtitle="Controle de Estoque de Fios"
          data={threads}
          columns={reportColumns}
          summary={[
            { label: "Total de Fios", value: data?.pagination?.total || 0 },
            { label: "Peso Total", value: `${totalWeight.toFixed(2)} kg` },
            { label: "Em Producao", value: threads.filter((t: Thread) => t.operationOrder).length },
            { label: "Estoque Critico", value: criticalCount, highlight: true },
          ]}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="client/src/pages/Qualidade.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { motion } from "framer-motion"
import {
  Plus,
  Edit2,
  Trash2,
  Eye,
  CheckCircle,
  XCircle,
  Filter,
  Printer,
  Download,
  FileSpreadsheet,
} from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import { formatDateTime } from "../lib/utils"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"
import PrintReport from "../components/ui/PrintReport"

interface QualityRecord {
  id: string
  code: string
  productName: string
  defectType: string
  severity: string
  quantity: number
  unit: string
  machine?: string
  lot?: string
  shift?: string
  destination?: string
  inspector?: string
  status: string
  notes?: string
  createdAt: string
}

export default function Qualidade() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("")
  const [severityFilter, setSeverityFilter] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isReportOpen, setIsReportOpen] = useState(false)
  const [selectedRecord, setSelectedRecord] = useState<QualityRecord | null>(null)

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["quality", page, search, statusFilter, severityFilter],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
        ...(statusFilter && { status: statusFilter }),
        ...(severityFilter && { severity: severityFilter }),
      })
      const { data } = await api.get(`/quality?${params}`)
      return data
    },
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<QualityRecord>) => api.post("/quality", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["quality"] })
      toast.success("Registro criado!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao criar registro"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<QualityRecord> }) => api.put(`/quality/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["quality"] })
      toast.success("Registro atualizado!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar registro"),
  })

const statusMutation = useMutation({
    mutationFn: ({ id, status }: { id: string; status: string }) => api.patch(`/quality/${id}/status`, { status }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["quality"] })
      toast.success("Status atualizado!")
    },
    onError: () => toast.error("Erro ao atualizar status"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/quality/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["quality"] })
      toast.success("Registro removido!")
    },
    onError: () => toast.error("Erro ao remover registro"),
  })

const handleCreate = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    createMutation.mutate({
      code: `QLT${Date.now().toString().slice(-8)}`,
      productName: formData.get("productName") as string,
      defectType: formData.get("defectType") as string,
      severity: formData.get("severity") as string,
      quantity: Number(formData.get("quantity")),
      unit: formData.get("unit") as string,
      machine: formData.get("machine") as string,
      lot: formData.get("lot") as string,
      shift: formData.get("shift") as string,
      destination: formData.get("destination") as string,
      inspector: formData.get("inspector") as string,
      notes: formData.get("notes") as string,
    })
  }

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedRecord) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedRecord.id,
      data: {
        productName: formData.get("productName") as string,
        defectType: formData.get("defectType") as string,
        severity: formData.get("severity") as string,
        quantity: Number(formData.get("quantity")),
        unit: formData.get("unit") as string,
        machine: formData.get("machine") as string,
        lot: formData.get("lot") as string,
        shift: formData.get("shift") as string,
        destination: formData.get("destination") as string,
        inspector: formData.get("inspector") as string,
        notes: formData.get("notes") as string,
      },
    })
  }

const exportToCSV = () => {
    const records = data?.data || []
    if (records.length === 0) {
      toast.error("Nenhum dado para exportar")
      return
    }

const headers = [
      "Codigo",
      "Produto",
      "Defeito",
      "Severidade",
      "Quantidade",
      "Unidade",
      "Maquina",
      "Lote",
      "Status",
      "Data",
    ]
    const rows = records.map((r: QualityRecord) => [
      r.code,
      r.productName,
      r.defectType,
      r.severity,
      r.quantity,
      r.unit,
      r.machine || "",
      r.lot || "",
      r.status,
      formatDateTime(r.createdAt),
    ])

const csvContent = [headers.join(";"), ...rows.map((r: string[]) => r.join(";"))].join("\n")
    const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `qualidade_${new Date().toISOString().split("T")[0]}.csv`
    a.click()
    URL.revokeObjectURL(url)
    toast.success("Arquivo CSV exportado!")
  }

const exportToExcel = () => {
    const records = data?.data || []
    if (records.length === 0) {
      toast.error("Nenhum dado para exportar")
      return
    }

const blob = new Blob([excelContent], { type: "application/vnd.ms-excel" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `qualidade_${new Date().toISOString().split("T")[0]}.xls`
    a.click()
    URL.revokeObjectURL(url)
    toast.success("Arquivo Excel exportado!")
  }

const records = data?.data || []
  const stats = {
    total: data?.pagination?.total || 0,
    pendentes: records.filter((r: QualityRecord) => r.status === "pendente").length,
    aprovados: records.filter((r: QualityRecord) => r.status === "aprovado").length,
    rejeitados: records.filter((r: QualityRecord) => r.status === "rejeitado").length,
    altaSeveridade: records.filter((r: QualityRecord) => r.severity === "alta").length,
  }

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "productName", header: "Produto", sortable: true, className: "font-medium" },
    { key: "defectType", header: "Defeito" },
    {
      key: "severity",
      header: "Severidade",
      render: (item: QualityRecord) => {
        const colors: Record<string, string> = {
          alta: "bg-red-100 text-red-800",
          media: "bg-amber-100 text-amber-800",
          baixa: "bg-blue-100 text-blue-800",
        }
        return (
          <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[item.severity]}`}>{item.severity}</span>
        )
      },
    },
    { key: "quantity", header: "Qtd", render: (item: QualityRecord) => `${item.quantity} ${item.unit}` },
    { key: "machine", header: "Maquina", render: (item: QualityRecord) => item.machine || "-" },
    {
      key: "status",
      header: "Status",
      render: (item: QualityRecord) => {
        const colors: Record<string, string> = {
          pendente: "bg-amber-100 text-amber-800",
          aprovado: "bg-emerald-100 text-emerald-800",
          rejeitado: "bg-red-100 text-red-800",
        }
        return (
          <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[item.status]}`}>{item.status}</span>
        )
      },
    },
  ]

const reportColumns = [
    { key: "code", header: "Codigo" },
    { key: "productName", header: "Produto" },
    { key: "defectType", header: "Defeito" },
    { key: "severity", header: "Severidade" },
    { key: "quantity", header: "Quantidade" },
    { key: "unit", header: "Unidade" },
    { key: "machine", header: "Maquina", format: (v: string) => v || "-" },
    { key: "lot", header: "Lote", format: (v: string) => v || "-" },
    { key: "destination", header: "Destino", format: (v: string) => v || "-" },
    { key: "status", header: "Status" },
  ]

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl lg:text-3xl font-bold text-slate-900">Qualidade</h1>
          <p className="text-slate-500">Controle de defeitos e inspecao</p>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <button
            onClick={exportToCSV}
            className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50"
          >
            <Download className="w-4 h-4" />
            <span className="hidden sm:inline">CSV</span>
          </button>
          <button
            onClick={exportToExcel}
            className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50"
          >
            <FileSpreadsheet className="w-4 h-4" />
            <span className="hidden sm:inline">Excel</span>
          </button>
          <button
            onClick={() => setIsReportOpen(true)}
            className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50"
          >
            <Printer className="w-4 h-4" />
            <span className="hidden sm:inline">Relatorio</span>
          </button>
          <button
            onClick={() => setIsCreateModalOpen(true)}
            className="flex items-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors shadow-lg shadow-primary-600/30"
          >
            <Plus className="w-5 h-5" />
            Novo Registro
          </button>
        </div>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-slate-900">{stats.total}</p>
          <p className="text-xs text-slate-500">Total</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-amber-600">{stats.pendentes}</p>
          <p className="text-xs text-slate-500">Pendentes</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-emerald-600">{stats.aprovados}</p>
          <p className="text-xs text-slate-500">Aprovados</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-red-600">{stats.rejeitados}</p>
          <p className="text-xs text-slate-500">Rejeitados</p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <p className="text-2xl font-bold text-red-600">{stats.altaSeveridade}</p>
          <p className="text-xs text-slate-500">Alta Severidade</p>
        </motion.div>
      </div>

{/* Filters */}
      <div className="bg-white rounded-xl p-4 border border-slate-200">
        <div className="flex items-center gap-2 mb-3">
          <Filter className="w-4 h-4 text-slate-500" />
          <span className="text-sm font-medium text-slate-700">Filtros</span>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todos os Status</option>
            <option value="pendente">Pendente</option>
            <option value="aprovado">Aprovado</option>
            <option value="rejeitado">Rejeitado</option>
          </select>
          <select
            value={severityFilter}
            onChange={(e) => setSeverityFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todas as Severidades</option>
            <option value="alta">Alta</option>
            <option value="media">Media</option>
            <option value="baixa">Baixa</option>
          </select>
          <button
            onClick={() => {
              setStatusFilter("")
              setSeverityFilter("")
            }}
            className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg"
          >
            Limpar Filtros
          </button>
        </div>
      </div>

{/* Data Table */}
      <DataTable
        data={records}
        columns={columns}
        searchPlaceholder="Buscar por codigo, produto, defeito..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        actions={(item: QualityRecord) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedRecord(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Ver Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            {item.status === "pendente" && (
              <>
                <button
                  onClick={() => statusMutation.mutate({ id: item.id, status: "aprovado" })}
                  className="p-2 hover:bg-emerald-100 rounded-lg"
                  title="Aprovar"
                >
                  <CheckCircle className="w-4 h-4 text-emerald-600" />
                </button>
                <button
                  onClick={() => statusMutation.mutate({ id: item.id, status: "rejeitado" })}
                  className="p-2 hover:bg-red-100 rounded-lg"
                  title="Rejeitar"
                >
                  <XCircle className="w-4 h-4 text-red-600" />
                </button>
              </>
            )}
            <button
              onClick={() => {
                setSelectedRecord(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover este registro?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        title="Novo Registro de Qualidade"
        size="lg"
      >
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Produto *</label>
              <input name="productName" required className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo de Defeito *</label>
              <select name="defectType" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="Furo">Furo</option>
                <option value="Mancha">Mancha</option>
                <option value="Barra Torta">Barra Torta</option>
                <option value="Falha de Malha">Falha de Malha</option>
                <option value="Diferenca de Cor">Diferenca de Cor</option>
                <option value="Outro">Outro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Severidade *</label>
              <select name="severity" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="baixa">Baixa</option>
                <option value="media">Media</option>
                <option value="alta">Alta</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade *</label>
              <input
                name="quantity"
                type="number"
                step="0.01"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Unidade *</label>
              <select name="unit" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="KG">KG</option>
                <option value="M">Metros</option>
                <option value="UN">Unidades</option>
                <option value="PC">Pecas</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
              <input name="machine" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Lote</label>
              <input name="lot" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Turno</label>
              <select name="shift" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="1">1o Turno</option>
                <option value="2">2o Turno</option>
                <option value="3">3o Turno</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Destino</label>
              <select name="destination" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="Reciclagem">Reciclagem</option>
                <option value="Retrabalho">Retrabalho</option>
                <option value="Segunda Linha">Segunda Linha</option>
                <option value="Descarte">Descarte</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Inspetor</label>
              <input name="inspector" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
              <textarea name="notes" rows={2} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Registro" size="lg">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Produto *</label>
              <input
                name="productName"
                defaultValue={selectedRecord?.productName}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo de Defeito *</label>
              <select
                name="defectType"
                defaultValue={selectedRecord?.defectType}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="Furo">Furo</option>
                <option value="Mancha">Mancha</option>
                <option value="Barra Torta">Barra Torta</option>
                <option value="Falha de Malha">Falha de Malha</option>
                <option value="Diferenca de Cor">Diferenca de Cor</option>
                <option value="Outro">Outro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Severidade *</label>
              <select
                name="severity"
                defaultValue={selectedRecord?.severity}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="baixa">Baixa</option>
                <option value="media">Media</option>
                <option value="alta">Alta</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade *</label>
              <input
                name="quantity"
                type="number"
                step="0.01"
                defaultValue={selectedRecord?.quantity}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Unidade *</label>
              <select
                name="unit"
                defaultValue={selectedRecord?.unit}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="KG">KG</option>
                <option value="M">Metros</option>
                <option value="UN">Unidades</option>
                <option value="PC">Pecas</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
              <input
                name="machine"
                defaultValue={selectedRecord?.machine}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Lote</label>
              <input
                name="lot"
                defaultValue={selectedRecord?.lot}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Turno</label>
              <select
                name="shift"
                defaultValue={selectedRecord?.shift}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="1">1o Turno</option>
                <option value="2">2o Turno</option>
                <option value="3">3o Turno</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Destino</label>
              <select
                name="destination"
                defaultValue={selectedRecord?.destination}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione...</option>
                <option value="Reciclagem">Reciclagem</option>
                <option value="Retrabalho">Retrabalho</option>
                <option value="Segunda Linha">Segunda Linha</option>
                <option value="Descarte">Descarte</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Inspetor</label>
              <input
                name="inspector"
                defaultValue={selectedRecord?.inspector}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
              <textarea
                name="notes"
                defaultValue={selectedRecord?.notes}
                rows={2}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes do Registro">
        {selectedRecord && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <span className="text-xs text-slate-500">Codigo</span>
                <p className="font-medium font-mono">{selectedRecord.code}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Produto</span>
                <p className="font-medium">{selectedRecord.productName}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Defeito</span>
                <p className="font-medium">{selectedRecord.defectType}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Severidade</span>
                <span
                  className={`px-2 py-1 rounded-full text-xs font-medium ${
                    selectedRecord.severity === "alta"
                      ? "bg-red-100 text-red-800"
                      : selectedRecord.severity === "media"
                        ? "bg-amber-100 text-amber-800"
                        : "bg-blue-100 text-blue-800"
                  }`}
                >
                  {selectedRecord.severity}
                </span>
              </div>
              <div>
                <span className="text-xs text-slate-500">Quantidade</span>
                <p className="font-medium">
                  {selectedRecord.quantity} {selectedRecord.unit}
                </p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Status</span>
                <span
                  className={`px-2 py-1 rounded-full text-xs font-medium ${
                    selectedRecord.status === "aprovado"
                      ? "bg-emerald-100 text-emerald-800"
                      : selectedRecord.status === "rejeitado"
                        ? "bg-red-100 text-red-800"
                        : "bg-amber-100 text-amber-800"
                  }`}
                >
                  {selectedRecord.status}
                </span>
              </div>
              <div>
                <span className="text-xs text-slate-500">Maquina</span>
                <p className="font-medium">{selectedRecord.machine || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Lote</span>
                <p className="font-medium">{selectedRecord.lot || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Turno</span>
                <p className="font-medium">{selectedRecord.shift ? `${selectedRecord.shift}o Turno` : "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Destino</span>
                <p className="font-medium">{selectedRecord.destination || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Inspetor</span>
                <p className="font-medium">{selectedRecord.inspector || "-"}</p>
              </div>
              <div>
                <span className="text-xs text-slate-500">Data</span>
                <p className="font-medium">{formatDateTime(selectedRecord.createdAt)}</p>
              </div>
            </div>
            {selectedRecord.notes && (
              <div>
                <span className="text-xs text-slate-500">Observacoes</span>
                <p className="text-sm mt-1 p-2 bg-slate-50 rounded">{selectedRecord.notes}</p>
              </div>
            )}
          </div>
        )}
      </Modal>

<PrintReport
        isOpen={isReportOpen}
        onClose={() => setIsReportOpen(false)}
        title="Relatorio de Qualidade"
        subtitle="Controle de Defeitos e Inspecao"
        data={records}
        columns={reportColumns}
        summary={[
          { label: "Total de Registros", value: stats.total },
          { label: "Pendentes", value: stats.pendentes },
          { label: "Aprovados", value: stats.aprovados },
          { label: "Rejeitados", value: stats.rejeitados },
          { label: "Alta Severidade", value: stats.altaSeveridade, highlight: true },
        ]}
      />
    </div>
  )
}
[V0_FILE]plaintext:file="server/prisma/schema.prisma" isEdit="true" isQuickEdit="true" isMerged="true"
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Branch {
  id          String   @id @default(uuid())
  code        String   @unique
  name        String
  cnpj        String?
  address     String?
  city        String?
  state       String?
  phone       String?
  email       String?
  manager     String?
  isMain      Boolean  @default(false)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  isActive    Boolean  @default(true)

warehouses  Warehouse[]
  shipments   Shipment[]
  users       User[]
  customers   Customer[]
}

model Warehouse {
  id               String   @id @default(uuid())
  code             String   @unique
  name             String
  description      String?
  type             String?
  capacity         Int      @default(0)
  currentOccupancy Int      @default(0)
  address          String?
  createdAt        DateTime @default(now())
  updatedAt        DateTime @updatedAt
  isActive         Boolean  @default(true)

branchId    String?
  branch      Branch?  @relation(fields: [branchId], references: [id])

products    Product[]
  threads     Thread[]
  shipments   Shipment[]
}

model Customer {
  id            String   @id @default(uuid())
  code          String   @unique
  name          String
  tradeName     String?
  cnpjCpf       String?  @unique
  stateRegister String?
  email         String?
  phone         String?
  whatsapp      String?
  address       String?
  city          String?
  state         String?
  zipCode       String?
  contactName   String?
  contactPhone  String?
  creditLimit   Float    @default(0)
  paymentTerms  String?
  notes         String?
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  isActive      Boolean  @default(true)

shipments     Shipment[]
  thirdPartyOrders ThirdPartyOrder[]
  threads       Thread[]
  branchId      String?
  branch        Branch?   @relation(fields: [branchId], references: [id])
}

model ThirdParty {
  id            String   @id @default(uuid())
  code          String   @unique
  name          String
  tradeName     String?
  cnpjCpf       String?
  email         String?
  phone         String?
  whatsapp      String?
  address       String?
  city          String?
  state         String?
  serviceType   String?
  contactName   String?
  leadTime      Int      @default(0)
  pricePerKg    Float    @default(0)
  notes         String?
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  isActive      Boolean  @default(true)

orders        ThirdPartyOrder[]
}

model ThirdPartyOrder {
  id              String   @id @default(uuid())
  code            String   @unique
  serviceType     String
  description     String?
  quantity        Float    @default(0)
  unit            String   @default("KG")
  sentWeight      Float    @default(0)
  returnWeight    Float?
  pricePerKg      Float    @default(0)
  totalValue      Float    @default(0)
  sentAt          DateTime?
  returnedAt      DateTime?
  dueDate         DateTime?
  status          String   @default("pendente")
  notes           String?
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
  isActive        Boolean  @default(true)

thirdPartyId    String
  thirdParty      ThirdParty @relation(fields: [thirdPartyId], references: [id])
  customerId      String?
  customer        Customer?  @relation(fields: [customerId], references: [id])
  threadId        String?
  thread          Thread?    @relation(fields: [threadId], references: [id])
}

model Notification {
  id          String   @id @default(uuid())
  type        String
  title       String
  message     String
  module      String
  entityId    String?
  priority    String   @default("normal")
  isRead      Boolean  @default(false)
  readAt      DateTime?
  createdAt   DateTime @default(now())

userId      String?
  user        User?    @relation(fields: [userId], references: [id])
}

model User {
  id        String   @id @default(uuid())
  email     String   @unique
  password  String
  name      String
  role      String   @default("user")
  avatar    String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  isActive  Boolean  @default(true)

branchId  String?
  branch    Branch?  @relation(fields: [branchId], references: [id])

movements     Movement[]
  logs          ActivityLog[]
  notifications Notification[]
}

model Category {
  id          String   @id @default(uuid())
  name        String   @unique
  description String?
  color       String   @default("#6366f1")
  icon        String   @default("Package")
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  isActive    Boolean  @default(true)

products Product[]
}

model Location {
  id          String   @id @default(uuid())
  name        String   @unique
  description String?
  capacity    Int      @default(0)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  isActive    Boolean  @default(true)

products Product[]
}

model Supplier {
  id        String   @id @default(uuid())
  name      String
  cnpj      String?  @unique
  email     String?
  phone     String?
  address   String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  isActive  Boolean  @default(true)

products Product[]
}

model Product {
  id           String   @id @default(uuid())
  code         String   @unique
  name         String
  description  String?
  unit         String   @default("UN")
  quantity     Int      @default(0)
  minQuantity  Int      @default(0)
  maxQuantity  Int?
  costPrice    Float    @default(0)
  salePrice    Float?
  image        String?
  barcode      String?
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  isActive     Boolean  @default(true)

categoryId   String?
  category     Category? @relation(fields: [categoryId], references: [id])
  locationId   String?
  location     Location? @relation(fields: [locationId], references: [id])
  supplierId   String?
  supplier     Supplier? @relation(fields: [supplierId], references: [id])
  warehouseId  String?
  warehouse    Warehouse? @relation(fields: [warehouseId], references: [id])

movements    Movement[]
  attachments  Attachment[]
}

model Needle {
  id           String   @id @default(uuid())
  code         String   @unique
  type         String
  gauge        String
  machine      String
  quantity     Int      @default(0)
  minQuantity  Int      @default(5)
  status       String   @default("disponivel")
  lastChange   DateTime?
  notes        String?
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  isActive     Boolean  @default(true)

movements    NeedleMovement[]
}

model NeedleMovement {
  id          String   @id @default(uuid())
  type        String
  quantity    Int
  machine     String?
  reason      String?
  operator    String?
  createdAt   DateTime @default(now())

needleId    String
  needle      Needle   @relation(fields: [needleId], references: [id])
}

model Thread {
  id              String   @id @default(uuid())
  code            String   @unique
  name            String
  color           String
  colorCode       String?
  composition     String?
  supplier        String?
  lot             String?
  lotDate         DateTime?
  initialWeight   Float    @default(0)
  currentWeight   Float    @default(0)
  minWeight       Float    @default(1)
  machine         String?
  operationOrder  String?
  productionOrder String?
  status          String   @default("disponivel")
  notes           String?
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
  isActive        Boolean  @default(true)

warehouseId     String?
  warehouse       Warehouse? @relation(fields: [warehouseId], references: [id])
  customerId      String?
  customer        Customer?  @relation(fields: [customerId], references: [id])

movements       ThreadMovement[]
  shipmentItems   ShipmentItem[]
  thirdPartyOrders ThirdPartyOrder[]
}

model ThreadMovement {
  id              String   @id @default(uuid())
  type            String
  weight          Float
  machine         String?
  operationOrder  String?
  productionOrder String?
  operator        String?
  shift           String?
  reason          String?
  document        String?
  createdAt       DateTime @default(now())

threadId        String
  thread          Thread   @relation(fields: [threadId], references: [id])
}

model QualityRecord {
  id           String   @id @default(uuid())
  code         String   @unique
  productName  String
  defectType   String
  severity     String   @default("media")
  quantity     Float    @default(0)
  unit         String   @default("KG")
  machine      String?
  lot          String?
  shift        String?
  destination  String?
  inspector    String?
  notes        String?
  image        String?
  status       String   @default("pendente")
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  isActive     Boolean  @default(true)
}

model Shipment {
  id              String   @id @default(uuid())
  code            String   @unique
  type            String   @default("saida")
  invoiceNumber   String?
  orderNumber     String?
  customer        String?
  customerPhone   String?
  address         String?
  totalWeight     Float    @default(0)
  totalValue      Float    @default(0)
  carrier         String?
  carrierCnpj     String?
  vehiclePlate    String?
  driverName      String?
  driverCpf       String?
  trackingCode    String?
  freightType     String?
  freightValue    Float    @default(0)
  status          String   @default("pendente")
  scheduledAt     DateTime?
  shippedAt       DateTime?
  deliveredAt     DateTime?
  notes           String?
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
  isActive        Boolean  @default(true)

branchId        String?
  branch          Branch?   @relation(fields: [branchId], references: [id])
  warehouseId     String?
  warehouse       Warehouse? @relation(fields: [warehouseId], references: [id])
  customerId      String?
  customerRef     Customer? @relation(fields: [customerId], references: [id])

items           ShipmentItem[]
}

model ShipmentItem {
  id              String   @id @default(uuid())
  description     String
  quantity        Float    @default(0)
  unit            String   @default("KG")
  unitPrice       Float    @default(0)
  totalPrice      Float    @default(0)
  notes           String?
  createdAt       DateTime @default(now())

shipmentId      String
  shipment        Shipment @relation(fields: [shipmentId], references: [id], onDelete: Cascade)
  threadId        String?
  thread          Thread?  @relation(fields: [threadId], references: [id])
}

model RecycledMaterial {
  id           String   @id @default(uuid())
  code         String   @unique
  type         String
  origin       String?
  weight       Float    @default(0)
  unit         String   @default("KG")
  destination  String?
  value        Float?
  pricePerKg   Float?
  buyer        String?
  invoiceNumber String?
  status       String   @default("armazenado")
  collectedAt  DateTime?
  processedAt  DateTime?
  soldAt       DateTime?
  notes        String?
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  isActive     Boolean  @default(true)
}

model Movement {
  id          String   @id @default(uuid())
  type        String
  quantity    Int
  reason      String?
  document    String?
  notes       String?
  createdAt   DateTime @default(now())

productId   String
  product     Product  @relation(fields: [productId], references: [id])
  userId      String?
  user        User?    @relation(fields: [userId], references: [id])
}

model Attachment {
  id          String   @id @default(uuid())
  filename    String
  originalName String
  mimeType    String
  size        Int
  path        String
  createdAt   DateTime @default(now())

productId   String?
  product     Product? @relation(fields: [productId], references: [id])
}

model ActivityLog {
  id          String   @id @default(uuid())
  action      String
  entity      String
  entityId    String?
  entityName  String?
  details     String?
  oldValue    String?
  newValue    String?
  ipAddress   String?
  userAgent   String?
  createdAt   DateTime @default(now())

userId      String?
  user        User?    @relation(fields: [userId], references: [id])
}
[V0_FILE]typescript:file="server/prisma/seed.ts" isMerged="true"
import { PrismaClient } from "@prisma/client"
import bcrypt from "bcryptjs"

const prisma = new PrismaClient({
  log: ["error"],
})

async function main() {
  console.log("")
  console.log("========================================")
  console.log("  TextilManager ERP - Seed Database")
  console.log("========================================")
  console.log("")

// 1. Criar usuario admin
  console.log("[1/12] Criando usuario admin...")
  const hashedPassword = await bcrypt.hash("admin123", 10)

const admin = await prisma.user.upsert({
    where: { email: "admin@textilmanager.com" },
    update: { password: hashedPassword },
    create: {
      email: "admin@textilmanager.com",
      password: hashedPassword,
      name: "Administrador",
      role: "admin",
    },
  })
  console.log("    -> Usuario:", admin.email)

console.log("[2/12] Criando filiais...")
  const filialMatriz = await prisma.branch.upsert({
    where: { code: "MATRIZ" },
    update: {},
    create: {
      code: "MATRIZ",
      name: "Matriz - Sao Paulo",
      address: "Rua Industrial, 1000 - Sao Paulo/SP",
      city: "Sao Paulo",
      state: "SP",
      phone: "(11) 3333-4444",
      email: "matriz@textilmanager.com",
      manager: "Carlos Silva",
      isMain: true,
      isActive: true,
    },
  })
  const filialCampinas = await prisma.branch.upsert({
    where: { code: "FIL001" },
    update: {},
    create: {
      code: "FIL001",
      name: "Filial Campinas",
      address: "Av. das Industrias, 500 - Campinas/SP",
      city: "Campinas",
      state: "SP",
      phone: "(19) 3333-5555",
      email: "campinas@textilmanager.com",
      manager: "Ana Souza",
      isActive: true,
    },
  })
  const filialRibeiraoPreto = await prisma.branch.upsert({
    where: { code: "FIL002" },
    update: {},
    create: {
      code: "FIL002",
      name: "Filial Ribeirao Preto",
      address: "Rua Textil, 200 - Ribeirao Preto/SP",
      city: "Ribeirao Preto",
      state: "SP",
      phone: "(16) 3333-6666",
      email: "ribeirao@textilmanager.com",
      manager: "Pedro Santos",
      isActive: true,
    },
  })
  console.log("    -> 3 filiais criadas")

console.log("[3/12] Criando galpoes...")
  const galpaoA = await prisma.warehouse.upsert({
    where: { code: "GAL-A" },
    update: {},
    create: {
      code: "GAL-A",
      name: "Galpao A - Producao",
      type: "producao",
      capacity: 5000,
      currentOccupancy: 3200,
      branchId: filialMatriz.id,
    },
  })
  const galpaoB = await prisma.warehouse.upsert({
    where: { code: "GAL-B" },
    update: {},
    create: {
      code: "GAL-B",
      name: "Galpao B - Estoque",
      type: "estoque",
      capacity: 8000,
      currentOccupancy: 4500,
      branchId: filialMatriz.id,
    },
  })
  const galpaoC = await prisma.warehouse.upsert({
    where: { code: "GAL-C" },
    update: {},
    create: {
      code: "GAL-C",
      name: "Galpao C - Expedicao",
      type: "expedicao",
      capacity: 3000,
      currentOccupancy: 1800,
      branchId: filialMatriz.id,
    },
  })
  await prisma.warehouse.upsert({
    where: { code: "GAL-CAMP" },
    update: {},
    create: {
      code: "GAL-CAMP",
      name: "Galpao Campinas",
      type: "estoque",
      capacity: 4000,
      currentOccupancy: 2100,
      branchId: filialCampinas.id,
    },
  })
  console.log("    -> 4 galpoes criados")

console.log("[4/12] Criando clientes...")
  const clienteABC = await prisma.customer.upsert({
    where: { code: "CLI001" },
    update: {},
    create: {
      code: "CLI001",
      name: "Confeccoes ABC Ltda",
      tradeName: "ABC Moda",
      cnpjCpf: "12.345.678/0001-90",
      email: "compras@abcmoda.com.br",
      phone: "(11) 4444-5555",
      address: "Rua das Confeccoes, 123 - Sao Paulo/SP",
      city: "Sao Paulo",
      state: "SP",
      contactName: "Maria Silva",
      contactPhone: "(11) 99999-8888",
      creditLimit: 50000,
      paymentTerms: "30 dias",
      branchId: filialMatriz.id,
    },
  })
  const clienteXYZ = await prisma.customer.upsert({
    where: { code: "CLI002" },
    update: {},
    create: {
      code: "CLI002",
      name: "Malharia XYZ SA",
      tradeName: "XYZ Malhas",
      cnpjCpf: "98.765.432/0001-10",
      email: "pedidos@xyzmalhias.com.br",
      phone: "(11) 5555-6666",
      address: "Av. Textil, 500 - Guarulhos/SP",
      city: "Guarulhos",
      state: "SP",
      contactName: "Joao Santos",
      contactPhone: "(11) 97777-6666",
      creditLimit: 80000,
      paymentTerms: "45 dias",
      branchId: filialMatriz.id,
    },
  })
  const clienteFashion = await prisma.customer.upsert({
    where: { code: "CLI003" },
    update: {},
    create: {
      code: "CLI003",
      name: "Fashion Store Ltda",
      tradeName: "Fashion Store",
      cnpjCpf: "11.222.333/0001-44",
      email: "atacado@fashionstore.com.br",
      phone: "(11) 6666-7777",
      address: "Rua do Comercio, 789 - Osasco/SP",
      city: "Osasco",
      state: "SP",
      contactName: "Ana Costa",
      contactPhone: "(11) 98888-7777",
      creditLimit: 30000,
      paymentTerms: "28 dias",
      branchId: filialCampinas.id,
    },
  })
  console.log("    -> 3 clientes criados")

console.log("[5/12] Criando terceiros...")
  const terceiroTinturaria = await prisma.thirdParty.upsert({
    where: { code: "TER001" },
    update: {},
    create: {
      code: "TER001",
      name: "Tinturaria Industrial Ltda",
      cnpjCpf: "33.444.555/0001-66",
      email: "contato@tinturariaindustrial.com.br",
      phone: "(11) 3333-2222",
      address: "Rua da Tinturaria, 100 - Suzano/SP",
      city: "Suzano",
      state: "SP",
      serviceType: "Tinturaria",
      contactName: "Roberto Lima",
      leadTime: 5,
      pricePerKg: 8.5,
    },
  })
  const terceiroEstamparia = await prisma.thirdParty.upsert({
    where: { code: "TER002" },
    update: {},
    create: {
      code: "TER002",
      name: "Estamparia Master",
      cnpjCpf: "44.555.666/0001-77",
      email: "orcamento@estampariamaster.com.br",
      phone: "(11) 4444-3333",
      address: "Av. Industrial, 200 - Maua/SP",
      city: "Maua",
      state: "SP",
      serviceType: "Estamparia",
      contactName: "Fernanda Alves",
      leadTime: 3,
      pricePerKg: 12.0,
    },
  })
  const terceiroAcabamento = await prisma.thirdParty.upsert({
    where: { code: "TER003" },
    update: {},
    create: {
      code: "TER003",
      name: "Acabamentos Texteis SA",
      cnpjCpf: "55.666.777/0001-88",
      email: "comercial@acabamentostexteis.com.br",
      phone: "(11) 5555-4444",
      address: "Rua do Acabamento, 300 - Diadema/SP",
      city: "Diadema",
      state: "SP",
      serviceType: "Acabamento",
      contactName: "Paulo Mendes",
      leadTime: 7,
      pricePerKg: 6.0,
    },
  })
  console.log("    -> 3 terceiros criados")

// 6. Criar categorias
  console.log("[6/12] Criando categorias...")
  const catTecidos = await prisma.category.upsert({
    where: { name: "Tecidos" },
    update: {},
    create: { name: "Tecidos", description: "Tecidos e malhas", color: "#3b82f6" },
  })
  const catAviamentos = await prisma.category.upsert({
    where: { name: "Aviamentos" },
    update: {},
    create: { name: "Aviamentos", description: "Botoes, ziperes", color: "#10b981" },
  })
  const catQuimicos = await prisma.category.upsert({
    where: { name: "Quimicos" },
    update: {},
    create: { name: "Quimicos", description: "Produtos quimicos", color: "#f59e0b" },
  })
  const catEmbalagens = await prisma.category.upsert({
    where: { name: "Embalagens" },
    update: {},
    create: { name: "Embalagens", description: "Caixas e plasticos", color: "#8b5cf6" },
  })
  console.log("    -> 4 categorias criadas")

// 7. Criar locais
  console.log("[7/12] Criando locais...")
  const locPrincipal = await prisma.location.upsert({
    where: { name: "Almoxarifado Principal" },
    update: {},
    create: { name: "Almoxarifado Principal", description: "Estoque principal", capacity: 1000 },
  })
  const locProducao = await prisma.location.upsert({
    where: { name: "Producao" },
    update: {},
    create: { name: "Producao", description: "Area de producao", capacity: 500 },
  })
  const locExpedicao = await prisma.location.upsert({
    where: { name: "Expedicao" },
    update: {},
    create: { name: "Expedicao", description: "Area de expedicao", capacity: 300 },
  })
  console.log("    -> 3 locais criados")

// 8. Criar produtos
  console.log("[8/12] Criando produtos...")
  await prisma.product.upsert({
    where: { code: "TEC001" },
    update: {},
    create: {
      code: "TEC001",
      name: "Malha Cotton",
      description: "Malha 100% algodao penteado",
      unit: "KG",
      quantity: 150,
      minQuantity: 50,
      costPrice: 25.9,
      categoryId: catTecidos.id,
      locationId: locPrincipal.id,
      warehouseId: galpaoB.id,
    },
  })
  await prisma.product.upsert({
    where: { code: "TEC002" },
    update: {},
    create: {
      code: "TEC002",
      name: "Malha PV",
      description: "Malha poliester/viscose 67/33",
      unit: "KG",
      quantity: 8,
      minQuantity: 30,
      costPrice: 18.5,
      categoryId: catTecidos.id,
      locationId: locPrincipal.id,
      warehouseId: galpaoB.id,
    },
  })
  await prisma.product.upsert({
    where: { code: "TEC003" },
    update: {},
    create: {
      code: "TEC003",
      name: "Malha Ribana",
      description: "Ribana 1x1 algodao",
      unit: "KG",
      quantity: 45,
      minQuantity: 20,
      costPrice: 32.0,
      categoryId: catTecidos.id,
      locationId: locPrincipal.id,
      warehouseId: galpaoB.id,
    },
  })
  await prisma.product.upsert({
    where: { code: "AVI001" },
    update: {},
    create: {
      code: "AVI001",
      name: "Botao 4 furos 20mm",
      description: "Botao plastico branco",
      unit: "UN",
      quantity: 5000,
      minQuantity: 1000,
      costPrice: 0.15,
      categoryId: catAviamentos.id,
      locationId: locPrincipal.id,
    },
  })
  await prisma.product.upsert({
    where: { code: "AVI002" },
    update: {},
    create: {
      code: "AVI002",
      name: "Ziper 20cm",
      description: "Ziper de nylon invisivel",
      unit: "UN",
      quantity: 200,
      minQuantity: 500,
      costPrice: 1.2,
      categoryId: catAviamentos.id,
      locationId: locPrincipal.id,
    },
  })
  await prisma.product.upsert({
    where: { code: "QUI001" },
    update: {},
    create: {
      code: "QUI001",
      name: "Amaciante Industrial",
      description: "Amaciante para tecidos",
      unit: "LT",
      quantity: 50,
      minQuantity: 20,
      costPrice: 8.5,
      categoryId: catQuimicos.id,
      locationId: locPrincipal.id,
    },
  })
  console.log("    -> 6 produtos criados")

// 9. Criar agulhas
  console.log("[9/12] Criando agulhas...")
  await prisma.needle.upsert({
    where: { code: "AGU001" },
    update: {},
    create: { code: "AGU001", type: "Circular", gauge: "28", machine: "Maquina 01", quantity: 50, minQuantity: 10 },
  })
  await prisma.needle.upsert({
    where: { code: "AGU002" },
    update: {},
    create: { code: "AGU002", type: "Reta", gauge: "24", machine: "Maquina 02", quantity: 3, minQuantity: 10 },
  })
  await prisma.needle.upsert({
    where: { code: "AGU003" },
    update: {},
    create: { code: "AGU003", type: "Circular", gauge: "30", machine: "Maquina 03", quantity: 80, minQuantity: 15 },
  })
  await prisma.needle.upsert({
    where: { code: "AGU004" },
    update: {},
    create: { code: "AGU004", type: "Reta", gauge: "22", machine: "Maquina 04", quantity: 5, minQuantity: 20 },
  })
  console.log("    -> 4 agulhas criadas")

console.log("[10/12] Criando fios...")
  await prisma.thread.upsert({
    where: { code: "FIO001" },
    update: {},
    create: {
      code: "FIO001",
      name: "Algodao 30/1",
      color: "Branco",
      colorCode: "#FFFFFF",
      composition: "100% Algodao",
      supplier: "Fiacao Nacional",
      lot: "LT-2024-001",
      initialWeight: 20,
      currentWeight: 15.5,
      minWeight: 2,
      machine: "Maquina 01",
      operationOrder: "OP-2024-001",
      status: "em_uso",
      warehouseId: galpaoA.id,
      customerId: clienteABC.id,
    },
  })
  await prisma.thread.upsert({
    where: { code: "FIO002" },
    update: {},
    create: {
      code: "FIO002",
      name: "Poliester 40/2",
      color: "Preto",
      colorCode: "#000000",
      composition: "100% Poliester",
      supplier: "Fios Premium",
      lot: "LT-2024-002",
      initialWeight: 15,
      currentWeight: 0.8,
      minWeight: 1,
      machine: "Maquina 02",
      operationOrder: "OP-2024-002",
      status: "em_uso",
      warehouseId: galpaoA.id,
      customerId: clienteXYZ.id,
    },
  })
  await prisma.thread.upsert({
    where: { code: "FIO003" },
    update: {},
    create: {
      code: "FIO003",
      name: "Viscose 20/1",
      color: "Azul Marinho",
      colorCode: "#1e3a5f",
      composition: "100% Viscose",
      supplier: "Fiacao Nacional",
      lot: "LT-2024-003",
      initialWeight: 25,
      currentWeight: 22.3,
      minWeight: 3,
      machine: "Maquina 03",
      operationOrder: "OP-2024-003",
      status: "em_uso",
      warehouseId: galpaoB.id,
      customerId: clienteABC.id,
    },
  })
  await prisma.thread.upsert({
    where: { code: "FIO004" },
    update: {},
    create: {
      code: "FIO004",
      name: "Algodao 24/1",
      color: "Cinza Mescla",
      colorCode: "#9ca3af",
      composition: "100% Algodao",
      supplier: "Fios Premium",
      lot: "LT-2024-004",
      initialWeight: 18,
      currentWeight: 18,
      minWeight: 2,
      status: "disponivel",
      warehouseId: galpaoB.id,
    },
  })
  console.log("    -> 4 fios criados")

// 11. Criar registros qualidade
  console.log("[11/12] Criando registros qualidade...")
  await prisma.qualityRecord.upsert({
    where: { code: "QLT001" },
    update: {},
    create: {
      code: "QLT001",
      productName: "Malha Cotton Lote 45",
      defectType: "Furo",
      severity: "media",
      quantity: 2.5,
      unit: "KG",
      machine: "Maquina 01",
      lot: "LT-45",
      shift: "Manha",
      destination: "Retrabalho",
      inspector: "Joao Silva",
      status: "pendente",
    },
  })
  await prisma.qualityRecord.upsert({
    where: { code: "QLT002" },
    update: {},
    create: {
      code: "QLT002",
      productName: "Malha PV Lote 32",
      defectType: "Mancha",
      severity: "alta",
      quantity: 5.0,
      unit: "KG",
      machine: "Maquina 02",
      lot: "LT-32",
      shift: "Tarde",
      destination: "Segunda Linha",
      inspector: "Maria Santos",
      status: "aprovado",
    },
  })
  console.log("    -> 2 registros qualidade criados")

console.log("[12/12] Criando expedicoes...")
  await prisma.shipment.upsert({
    where: { code: "EXP001" },
    update: {},
    create: {
      code: "EXP001",
      type: "saida",
      invoiceNumber: "NF-2024-0001",
      customer: clienteABC.name,
      customerId: clienteABC.id,
      customerPhone: clienteABC.phone || "",
      address: clienteABC.address || "",
      branchId: filialMatriz.id,
      warehouseId: galpaoC.id,
      totalWeight: 150,
      totalValue: 4500.0,
      carrier: "Transportadora XYZ",
      vehiclePlate: "ABC-1234",
      driverName: "Jose Motorista",
      status: "pendente",
    },
  })
  await prisma.shipment.upsert({
    where: { code: "EXP002" },
    update: {},
    create: {
      code: "EXP002",
      type: "terceiro",
      invoiceNumber: "NF-2024-0002",
      customer: terceiroTinturaria.name,
      customerPhone: terceiroTinturaria.phone || "",
      address: terceiroTinturaria.address || "",
      branchId: filialMatriz.id,
      warehouseId: galpaoA.id,
      totalWeight: 80,
      totalValue: 2400.0,
      carrier: "Propria",
      status: "enviado",
      notes: "Envio para tingimento - cor azul marinho",
    },
  })
  await prisma.shipment.upsert({
    where: { code: "EXP003" },
    update: {},
    create: {
      code: "EXP003",
      type: "entrada",
      invoiceNumber: "NF-2024-0003",
      customer: "Fiacao Nacional",
      customerPhone: "(11) 2222-3333",
      address: "Rua da Fiacao, 500 - SP",
      branchId: filialMatriz.id,
      warehouseId: galpaoB.id,
      totalWeight: 500,
      totalValue: 12500.0,
      carrier: "Jadlog",
      status: "recebido",
      notes: "Recebimento de fios - Pedido PED-2024-015",
    },
  })
  console.log("    -> 3 expedicoes criadas")

console.log("[BONUS] Criando notificacoes...")
  // SQLite nao suporta skipDuplicates, entao usamos upsert ou try/catch
  const notificacoes = [
    {
      type: "alert",
      title: "Estoque Critico",
      message: "O produto Malha PV esta com estoque abaixo do minimo",
      priority: "high",
      module: "almoxarifado",
      userId: admin.id,
    },
    {
      type: "info",
      title: "Nova Expedicao",
      message: "Expedicao EXP001 criada para Confeccoes ABC",
      priority: "medium",
      module: "expedicao",
      userId: admin.id,
    },
    {
      type: "warning",
      title: "Fio com Peso Critico",
      message: "O fio FIO002 esta com peso abaixo de 1kg",
      priority: "high",
      module: "fios",
      userId: admin.id,
    },
    {
      type: "success",
      title: "Qualidade Aprovada",
      message: "Registro QLT002 foi aprovado",
      priority: "low",
      module: "qualidade",
      userId: admin.id,
      isRead: true,
    },
  ]
  
  for (const notif of notificacoes) {
    try {
      await prisma.notification.create({ data: notif })
    } catch {
      // Ignora se ja existe
    }
  }
  console.log("    -> 4 notificacoes criadas")

// Criar materiais reciclados
  console.log("[BONUS] Criando materiais reciclados...")
  await prisma.recycledMaterial.upsert({
    where: { code: "REC001" },
    update: {},
    create: {
      code: "REC001",
      type: "Retalho",
      origin: "Producao",
      weight: 150,
      unit: "KG",
      status: "armazenado",
      notes: "Retalhos de malha cotton",
    },
  })
  await prisma.recycledMaterial.upsert({
    where: { code: "REC002" },
    update: {},
    create: {
      code: "REC002",
      type: "Fio",
      origin: "Sobras de producao",
      weight: 50,
      unit: "KG",
      status: "vendido",
      buyer: "Reciclagem ABC",
      pricePerKg: 2.5,
      value: 125,
      invoiceNumber: "NF-REC-001",
      soldAt: new Date(),
      notes: "Fios descartados",
    },
  })
  console.log("    -> 2 materiais reciclados criados")

console.log("")
  console.log("========================================")
  console.log("  SEED CONCLUIDO COM SUCESSO!")
  console.log("========================================")
  console.log("")
  console.log("  Login: admin@textilmanager.com")
  console.log("  Senha: admin123")
  console.log("")
  console.log("  Dados criados:")
  console.log("    - 3 Filiais")
  console.log("    - 4 Galpoes")
  console.log("    - 3 Clientes")
  console.log("    - 3 Terceiros")
  console.log("    - 4 Categorias")
  console.log("    - 3 Locais")
  console.log("    - 6 Produtos")
  console.log("    - 4 Agulhas")
  console.log("    - 4 Fios")
  console.log("    - 2 Registros Qualidade")
  console.log("    - 3 Expedicoes")
  console.log("    - 4 Notificacoes")
  console.log("    - 2 Materiais Reciclados")
  console.log("")
}

main()
  .catch((e) => {
    console.error("")
    console.error("ERRO NO SEED:", e)
    console.error("AVISO: Seed pode ja ter sido executado anteriormente")
  })
  .finally(async () => {
    await prisma.$disconnect()
  })
[V0_FILE]typescript:file="server/src/routes/shipment.routes.ts" isEdit="true" isMerged="true"
import { Router } from "express"
import { prisma } from "../lib/prisma.js"
import { AppError } from "../middlewares/errorHandler.js"
import { authMiddleware } from "../middlewares/auth.js"

export const shipmentRoutes = Router()

shipmentRoutes.use(authMiddleware)

shipmentRoutes.get("/", async (req, res) => {
  const { page = "1", limit = "20", search = "", status, branchId, type } = req.query
  const pageNum = Number.parseInt(page as string)
  const limitNum = Number.parseInt(limit as string)
  const skip = (pageNum - 1) * limitNum

const where: any = { isActive: true }

if (search) {
    where.OR = [
      { code: { contains: search as string } },
      { invoiceNumber: { contains: search as string } },
      { customer: { contains: search as string } },
      { trackingCode: { contains: search as string } },
    ]
  }

if (status) where.status = status
  if (branchId) where.branchId = branchId
  if (type) where.type = type

const [shipments, total] = await Promise.all([
    prisma.shipment.findMany({
      where,
      skip,
      take: limitNum,
      orderBy: { createdAt: "desc" },
      include: {
        branch: true,
        warehouse: true,
        customerRef: true,
        items: {
          include: {
            thread: true,
          },
        },
      },
    }),
    prisma.shipment.count({ where }),
  ])

const mappedShipments = shipments.map((s) => ({
    ...s,
    customer: s.customerRef,
  }))

res.json({
    success: true,
    data: mappedShipments,
    pagination: { page: pageNum, limit: limitNum, total, totalPages: Math.ceil(total / limitNum) },
  })
})

shipmentRoutes.get("/:id", async (req, res) => {
  const shipment = await prisma.shipment.findUnique({
    where: { id: req.params.id },
    include: {
      branch: true,
      warehouse: true,
      customerRef: true,
      items: {
        include: {
          thread: true,
        },
      },
    },
  })
  if (!shipment) throw new AppError("Expedição não encontrada", 404)
  res.json({ success: true, data: { ...shipment, customer: shipment.customerRef } })
})

shipmentRoutes.post("/", async (req, res) => {
  const { items, ...shipmentData } = req.body

// If customerId is provided, get customer data
  let customerData = {}
  if (shipmentData.customerId) {
    const customer = await prisma.customer.findUnique({ where: { id: shipmentData.customerId } })
    if (customer) {
      customerData = {
        customer: customer.name,
        customerPhone: customer.phone || customer.whatsapp || "",
        address: customer.address || "",
      }
    }
  }

const shipment = await prisma.shipment.create({
    data: {
      ...shipmentData,
      ...customerData,
      items: items?.length
        ? {
            create: items.map((item: any) => ({
              description: item.description,
              quantity: Number(item.quantity) || 0,
              unit: item.unit || "KG",
              unitPrice: Number(item.unitPrice) || 0,
              totalPrice: Number(item.totalPrice) || 0,
              threadId: item.threadId || undefined,
            })),
          }
        : undefined,
    },
    include: {
      branch: true,
      warehouse: true,
      customerRef: true,
      items: { include: { thread: true } },
    },
  })

res.status(201).json({ success: true, data: { ...shipment, customer: shipment.customerRef } })
})

shipmentRoutes.put("/:id", async (req, res) => {
  const { items, ...shipmentData } = req.body

const shipment = await prisma.shipment.update({
    where: { id: req.params.id },
    data: {
      ...shipmentData,
      ...customerData,
    },
    include: {
      branch: true,
      warehouse: true,
      customerRef: true,
      items: { include: { thread: true } },
    },
  })
  res.json({ success: true, data: { ...shipment, customer: shipment.customerRef } })
})

shipmentRoutes.delete("/:id", async (req, res) => {
  await prisma.shipment.update({ where: { id: req.params.id }, data: { isActive: false } })
  res.json({ success: true, message: "Expedição removida" })
})

shipmentRoutes.patch("/:id/status", async (req, res) => {
  const { status } = req.body
  const updateData: any = { status }

if (status === "enviado") updateData.shippedAt = new Date()
  if (status === "entregue") updateData.deliveredAt = new Date()

const shipment = await prisma.shipment.update({
    where: { id: req.params.id },
    data: updateData,
    include: {
      branch: true,
      warehouse: true,
      customerRef: true,
    },
  })
  res.json({ success: true, data: { ...shipment, customer: shipment.customerRef } })
})

// WhatsApp integration
shipmentRoutes.get("/:id/whatsapp", async (req, res) => {
  const shipment = await prisma.shipment.findUnique({
    where: { id: req.params.id },
    include: { customerRef: true },
  })
  if (!shipment) throw new AppError("Expedição não encontrada", 404)

const phone = shipment.customerRef?.whatsapp || shipment.customerRef?.phone || shipment.customerPhone
  const message = encodeURIComponent(
    `*TextilManager - Notificação de Expedição*\n\n` +
      `Olá ${shipment.customerRef?.name || shipment.customer}!\n` +
      `Sua expedição foi ${shipment.status === "enviado" ? "enviada" : "atualizada"}.\n\n` +
      `*NF:* ${shipment.invoiceNumber || "N/A"}\n` +
      `*Código:* ${shipment.code}\n` +
      `*Peso:* ${shipment.totalWeight} kg\n` +
      `*Rastreio:* ${shipment.trackingCode || "N/A"}\n` +
      `*Transportadora:* ${shipment.carrier || "N/A"}\n\n` +
      `Obrigado pela preferência!`,
  )

const cleanPhone = phone?.replace(/\D/g, "") || ""
  const url = `https://wa.me/55${cleanPhone}?text=${message}`

res.json({ success: true, data: { url } })
})
[V0_FILE]typescriptreact:file="client/src/pages/Expedicao.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import {
  Plus,
  Edit2,
  Trash2,
  Truck,
  CheckCircle,
  MessageCircle,
  Eye,
  FileText,
  Download,
  Filter,
  Package,
  Building2,
  Users,
  Printer,
  X,
} from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import { formatCurrency, formatDateTime } from "../lib/utils"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"

interface Shipment {
  id: string
  code: string
  type: string
  invoiceNumber?: string
  orderNumber?: string
  totalWeight: number
  totalValue: number
  carrier?: string
  carrierCnpj?: string
  vehiclePlate?: string
  driverName?: string
  driverCpf?: string
  trackingCode?: string
  freightType?: string
  freightValue: number
  status: string
  scheduledAt?: string
  shippedAt?: string
  deliveredAt?: string
  notes?: string
  branchId?: string
  branch?: { id: string; name: string; code: string }
  warehouseId?: string
  warehouse?: { id: string; name: string }
  customerId?: string
  customer?: { id: string; name: string; phone?: string; whatsapp?: string; address?: string; city?: string }
  items?: ShipmentItem[]
  createdAt: string
}

interface ShipmentItem {
  id: string
  description: string
  quantity: number
  unit: string
  unitPrice: number
  totalPrice: number
  threadId?: string
  thread?: { id: string; code: string; name: string; color: string }
}

interface Branch {
  id: string
  name: string
  code: string
}

interface Warehouse {
  id: string
  name: string
  code: string
}

interface Customer {
  id: string
  name: string
  code: string
  phone?: string
  whatsapp?: string
  address?: string
  city?: string
}

interface Thread {
  id: string
  code: string
  name: string
  color: string
  currentWeight: number
}

export default function Expedicao() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("")
  const [branchFilter, setBranchFilter] = useState("")
  const [typeFilter, setTypeFilter] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isItemsModalOpen, setIsItemsModalOpen] = useState(false)
  const [isReportModalOpen, setIsReportModalOpen] = useState(false)
  const [selectedShipment, setSelectedShipment] = useState<Shipment | null>(null)
  const [shipmentItems, setShipmentItems] = useState<Partial<ShipmentItem>[]>([])

const queryClient = useQueryClient()

// Buscar expedicoes
  const { data, isLoading } = useQuery({
    queryKey: ["shipments", page, search, statusFilter, branchFilter, typeFilter],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
        ...(statusFilter && { status: statusFilter }),
        ...(branchFilter && { branchId: branchFilter }),
        ...(typeFilter && { type: typeFilter }),
      })
      const { data } = await api.get(`/shipments?${params}`)
      return data
    },
  })

// Buscar filiais
  const { data: branchesData } = useQuery({
    queryKey: ["branches-list"],
    queryFn: async () => {
      const { data } = await api.get("/branches?limit=100")
      return data.data
    },
  })

// Buscar galpoes
  const { data: warehousesData } = useQuery({
    queryKey: ["warehouses-list"],
    queryFn: async () => {
      const { data } = await api.get("/warehouses?limit=100")
      return data.data
    },
  })

// Buscar clientes
  const { data: customersData } = useQuery({
    queryKey: ["customers-list"],
    queryFn: async () => {
      const { data } = await api.get("/customers?limit=100")
      return data.data
    },
  })

// Buscar fios disponiveis
  const { data: threadsData } = useQuery({
    queryKey: ["threads-list"],
    queryFn: async () => {
      const { data } = await api.get("/threads?limit=100")
      return data.data
    },
  })

const createMutation = useMutation({
    mutationFn: (data: Partial<Shipment> & { items?: Partial<ShipmentItem>[] }) => api.post("/shipments", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["shipments"] })
      toast.success("Expedicao criada com sucesso!")
      setIsCreateModalOpen(false)
      setShipmentItems([])
    },
    onError: () => toast.error("Erro ao criar expedicao"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Shipment> }) => api.put(`/shipments/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["shipments"] })
      toast.success("Expedicao atualizada!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar expedicao"),
  })

const statusMutation = useMutation({
    mutationFn: ({ id, status }: { id: string; status: string }) => api.patch(`/shipments/${id}/status`, { status }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["shipments"] })
      toast.success("Status atualizado!")
    },
    onError: () => toast.error("Erro ao atualizar status"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/shipments/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["shipments"] })
      toast.success("Expedicao removida!")
    },
    onError: () => toast.error("Erro ao remover expedicao"),
  })

const handleWhatsApp = (shipment: Shipment) => {
    const phone = shipment.customer?.whatsapp || shipment.customer?.phone
    if (!phone) {
      toast.error("Cliente sem telefone cadastrado")
      return
    }
    const message = encodeURIComponent(
      `Ola ${shipment.customer?.name}!\n\n` +
        `Sua expedicao ${shipment.code} foi ${shipment.status === "enviado" ? "enviada" : "registrada"}.\n` +
        `NF: ${shipment.invoiceNumber || "N/A"}\n` +
        `Peso: ${shipment.totalWeight} kg\n` +
        `Valor: ${formatCurrency(shipment.totalValue)}\n` +
        (shipment.trackingCode ? `Rastreio: ${shipment.trackingCode}\n` : "") +
        `\nTextilManager ERP`,
    )
    window.open(`https://wa.me/${phone.replace(/\D/g, "")}?text=${message}`, "_blank")
  }

const handleCreate = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)

// Calcular totais dos itens
    const totalWeight = shipmentItems.reduce((sum, item) => sum + (item.quantity || 0), 0)
    const totalValue = shipmentItems.reduce((sum, item) => sum + (item.totalPrice || 0), 0)

createMutation.mutate({
      code: `EXP${Date.now().toString().slice(-8)}`,
      type: formData.get("type") as string,
      invoiceNumber: formData.get("invoiceNumber") as string,
      orderNumber: formData.get("orderNumber") as string,
      totalWeight: totalWeight || Number(formData.get("totalWeight")),
      totalValue: totalValue || Number(formData.get("totalValue")),
      carrier: formData.get("carrier") as string,
      carrierCnpj: formData.get("carrierCnpj") as string,
      vehiclePlate: formData.get("vehiclePlate") as string,
      driverName: formData.get("driverName") as string,
      driverCpf: formData.get("driverCpf") as string,
      trackingCode: formData.get("trackingCode") as string,
      freightType: formData.get("freightType") as string,
      freightValue: Number(formData.get("freightValue")),
      scheduledAt: formData.get("scheduledAt") as string,
      branchId: formData.get("branchId") as string,
      warehouseId: formData.get("warehouseId") as string,
      customerId: formData.get("customerId") as string,
      notes: formData.get("notes") as string,
      items: shipmentItems,
    })
  }

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedShipment) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedShipment.id,
      data: {
        status: selectedShipment.status, // Status editavel
        type: formData.get("type") as string,
        invoiceNumber: formData.get("invoiceNumber") as string,
        orderNumber: formData.get("orderNumber") as string,
        totalWeight: Number(formData.get("totalWeight")),
        totalValue: Number(formData.get("totalValue")),
        carrier: formData.get("carrier") as string,
        vehiclePlate: formData.get("vehiclePlate") as string,
        driverName: formData.get("driverName") as string,
        trackingCode: formData.get("trackingCode") as string,
        freightType: formData.get("freightType") as string,
        freightValue: Number(formData.get("freightValue")),
        branchId: formData.get("branchId") as string,
        warehouseId: formData.get("warehouseId") as string,
        customerId: formData.get("customerId") as string,
        notes: formData.get("notes") as string,
      },
    })
  }

// Adicionar item a expedicao
  const addItem = () => {
    setShipmentItems([...shipmentItems, { description: "", quantity: 0, unit: "KG", unitPrice: 0, totalPrice: 0 }])
  }

const updateItem = (index: number, field: string, value: string | number) => {
    const newItems = [...shipmentItems]
    newItems[index] = { ...newItems[index], [field]: value }

// Recalcular total do item
    if (field === "quantity" || field === "unitPrice") {
      const qty = field === "quantity" ? Number(value) : Number(newItems[index].quantity) || 0
      const price = field === "unitPrice" ? Number(value) : Number(newItems[index].unitPrice) || 0
      newItems[index].totalPrice = qty * price
    }

setShipmentItems(newItems)
  }

const removeItem = (index: number) => {
    setShipmentItems(shipmentItems.filter((_, i) => i !== index))
  }

// Exportar para CSV
  const exportToCSV = () => {
    const shipments = data?.data || []
    if (shipments.length === 0) {
      toast.error("Nenhum dado para exportar")
      return
    }

const headers = [
      "Codigo",
      "Tipo",
      "NF",
      "Cliente",
      "Filial",
      "Galpao",
      "Peso",
      "Valor",
      "Transportadora",
      "Rastreio",
      "Status",
      "Data",
    ]
    const rows = shipments.map((s: Shipment) => [
      s.code,
      s.type,
      s.invoiceNumber || "",
      s.customer?.name || "",
      s.branch?.name || "",
      s.warehouse?.name || "",
      s.totalWeight,
      s.totalValue,
      s.carrier || "",
      s.trackingCode || "",
      s.status,
      formatDateTime(s.createdAt),
    ])

const csvContent = [headers.join(";"), ...rows.map((r: string[]) => r.join(";"))].join("\n")
    const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    link.href = URL.createObjectURL(blob)
    link.download = `expedicoes_${new Date().toISOString().split("T")[0]}.csv`
    link.click()
    toast.success("Arquivo exportado com sucesso!")
  }

const generateReport = (type: string) => {
    toast.success(`Relatorio de ${type} gerado!`)
    setIsReportModalOpen(false)
  }

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    {
      key: "type",
      header: "Tipo",
      render: (item: Shipment) => (
        <span
          className={`px-2 py-0.5 rounded text-xs font-medium ${item.type === "entrada" ? "bg-emerald-100 text-emerald-800" : item.type === "terceiro" ? "bg-purple-100 text-purple-800" : "bg-blue-100 text-blue-800"}`}
        >
          {item.type === "entrada" ? "Entrada" : item.type === "terceiro" ? "Terceiro" : "Saida"}
        </span>
      ),
    },
    { key: "invoiceNumber", header: "NF", className: "text-xs" },
    {
      key: "customer",
      header: "Cliente",
      sortable: true,
      render: (item: Shipment) => (
        <div>
          <p className="font-medium text-sm">{item.customer?.name || "-"}</p>
          <p className="text-xs text-slate-500">{item.customer?.city || ""}</p>
        </div>
      ),
    },
    {
      key: "branch",
      header: "Filial",
      render: (item: Shipment) => <span className="text-xs">{item.branch?.name || "-"}</span>,
    },
    {
      key: "warehouse",
      header: "Galpao",
      render: (item: Shipment) => <span className="text-xs">{item.warehouse?.name || "-"}</span>,
    },
    { key: "totalWeight", header: "Peso", render: (item: Shipment) => `${item.totalWeight} kg` },
    { key: "totalValue", header: "Valor", render: (item: Shipment) => formatCurrency(item.totalValue) },
    {
      key: "status",
      header: "Status",
      render: (item: Shipment) => {
        const colors: Record<string, string> = {
          pendente: "bg-amber-100 text-amber-800",
          enviado: "bg-sky-100 text-sky-800",
          entregue: "bg-emerald-100 text-emerald-800",
          cancelado: "bg-red-100 text-red-800",
        }
        return (
          <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[item.status] || colors.pendente}`}>
            {item.status}
          </span>
        )
      },
    },
  ]

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl lg:text-3xl font-bold text-slate-900">Expedicao</h1>
          <p className="text-slate-500">Gestao de envios, entregas e terceiros</p>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <button
            onClick={() => setIsReportModalOpen(true)}
            className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50"
          >
            <FileText className="w-4 h-4" />
            <span className="hidden sm:inline">Relatorios</span>
          </button>
          <button
            onClick={exportToCSV}
            className="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50"
          >
            <Download className="w-4 h-4" />
            <span className="hidden sm:inline">Exportar</span>
          </button>
          <button
            onClick={() => {
              setShipmentItems([])
              setIsCreateModalOpen(true)
            }}
            className="flex items-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors shadow-lg shadow-primary-600/30"
          >
            <Plus className="w-5 h-5" />
            Nova Expedicao
          </button>
        </div>
      </div>

{/* Filters */}
      <div className="bg-white rounded-xl p-4 border border-slate-200">
        <div className="flex items-center gap-2 mb-3">
          <Filter className="w-4 h-4 text-slate-500" />
          <span className="text-sm font-medium text-slate-700">Filtros</span>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todos os Tipos</option>
            <option value="saida">Saida</option>
            <option value="entrada">Entrada</option>
            <option value="terceiro">Terceiro</option>
          </select>
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todos os Status</option>
            <option value="pendente">Pendente</option>
            <option value="enviado">Enviado</option>
            <option value="entregue">Entregue</option>
            <option value="cancelado">Cancelado</option>
          </select>
          <select
            value={branchFilter}
            onChange={(e) => setBranchFilter(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          >
            <option value="">Todas as Filiais</option>
            {(branchesData || []).map((b: Branch) => (
              <option key={b.id} value={b.id}>
                {b.name}
              </option>
            ))}
          </select>
          <button
            onClick={() => {
              setTypeFilter("")
              setStatusFilter("")
              setBranchFilter("")
            }}
            className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg"
          >
            Limpar
          </button>
        </div>
      </div>

{/* Quick Stats */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div className="bg-amber-50 rounded-xl p-4 border border-amber-200">
          <div className="flex items-center gap-2">
            <Package className="w-5 h-5 text-amber-600" />
            <span className="text-2xl font-bold text-amber-700">
              {(data?.data || []).filter((s: Shipment) => s.status === "pendente").length}
            </span>
          </div>
          <p className="text-xs text-amber-600 mt-1">Pendentes</p>
        </div>
        <div className="bg-sky-50 rounded-xl p-4 border border-sky-200">
          <div className="flex items-center gap-2">
            <Truck className="w-5 h-5 text-sky-600" />
            <span className="text-2xl font-bold text-sky-700">
              {(data?.data || []).filter((s: Shipment) => s.status === "enviado").length}
            </span>
          </div>
          <p className="text-xs text-sky-600 mt-1">Em Transito</p>
        </div>
        <div className="bg-emerald-50 rounded-xl p-4 border border-emerald-200">
          <div className="flex items-center gap-2">
            <CheckCircle className="w-5 h-5 text-emerald-600" />
            <span className="text-2xl font-bold text-emerald-700">
              {(data?.data || []).filter((s: Shipment) => s.status === "entregue").length}
            </span>
          </div>
          <p className="text-xs text-emerald-600 mt-1">Entregues</p>
        </div>
        <div className="bg-purple-50 rounded-xl p-4 border border-purple-200">
          <div className="flex items-center gap-2">
            <Building2 className="w-5 h-5 text-purple-600" />
            <span className="text-2xl font-bold text-purple-700">
              {(data?.data || []).filter((s: Shipment) => s.type === "terceiro").length}
            </span>
          </div>
          <p className="text-xs text-purple-600 mt-1">Terceiros</p>
        </div>
      </div>

{/* Data Table */}
      <DataTable
        data={data?.data || []}
        columns={columns}
        searchPlaceholder="Buscar por codigo, NF, cliente, rastreio..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        loading={isLoading}
        actions={(item: Shipment) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedShipment(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Ver Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            {item.status === "pendente" && (
              <button
                onClick={() => statusMutation.mutate({ id: item.id, status: "enviado" })}
                className="p-2 hover:bg-sky-100 rounded-lg"
                title="Marcar como Enviado"
              >
                <Truck className="w-4 h-4 text-sky-600" />
              </button>
            )}
            {item.status === "enviado" && (
              <button
                onClick={() => statusMutation.mutate({ id: item.id, status: "entregue" })}
                className="p-2 hover:bg-emerald-100 rounded-lg"
                title="Marcar como Entregue"
              >
                <CheckCircle className="w-4 h-4 text-emerald-600" />
              </button>
            )}
            {item.customer && (
              <button
                onClick={() => handleWhatsApp(item)}
                className="p-2 hover:bg-green-100 rounded-lg"
                title="Enviar WhatsApp"
              >
                <MessageCircle className="w-4 h-4 text-green-600" />
              </button>
            )}
            <button
              onClick={() => {
                setSelectedShipment(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover esta expedicao?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Nova Expedicao" size="xl">
        <form onSubmit={handleCreate} className="space-y-6">
          {/* Tipo e Dados Principais */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo *</label>
              <select name="type" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="saida">Saida</option>
                <option value="entrada">Entrada</option>
                <option value="terceiro">Terceiro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Numero da NF</label>
              <input name="invoiceNumber" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Pedido</label>
              <input name="orderNumber" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Data Prevista</label>
              <input name="scheduledAt" type="date" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>

{/* Cliente com busca */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cliente *</label>
              <div className="relative">
                <input
                  type="text"
                  placeholder="Buscar cliente..."
                  onChange={(e) => {
                    const search = e.target.value.toLowerCase()
                    const select = document.querySelector('select[name="customerId"]') as HTMLSelectElement
                    if (select) {
                      Array.from(select.options).forEach((opt) => {
                        if (opt.value === "") return
                        const text = opt.text.toLowerCase()
                        opt.style.display = text.includes(search) ? "" : "none"
                      })
                    }
                  }}
                  className="w-full px-3 py-2 border border-slate-300 rounded-t-lg text-sm"
                />
                <select name="customerId" required className="w-full px-3 py-2 border border-t-0 border-slate-300 rounded-b-lg">
                  <option value="">Selecione o cliente...</option>
                  {(customersData || []).map((c: Customer) => (
                    <option key={c.id} value={c.id}>
                      {c.name} {c.city ? `- ${c.city}` : ""}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Filial *</label>
              <select name="branchId" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione</option>
                {(branchesData || []).map((b: Branch) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Galpao *</label>
              <select name="warehouseId" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione</option>
                {(warehousesData || []).map((w: Warehouse) => (
                  <option key={w.id} value={w.id}>
                    {w.name}
                  </option>
                ))}
              </select>
            </div>
          </div>

{/* Campos de Producao (OP e Maquina) */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 bg-slate-50 p-4 rounded-lg">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                OP (Ordem de Producao) <span className="text-slate-400 text-xs">opcional</span>
              </label>
              <input name="operationOrder" placeholder="Ex: OP-2024-001" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Maquina <span className="text-slate-400 text-xs">opcional</span>
              </label>
              <input name="machine" placeholder="Ex: Tear 01" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Lote <span className="text-slate-400 text-xs">opcional</span>
              </label>
              <input name="lot" placeholder="Ex: LT-2024-001" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>

{/* Itens da Expedicao */}
          <div className="border border-slate-200 rounded-lg p-4">
            <div className="flex items-center justify-between mb-3">
              <h4 className="font-medium text-slate-900 flex items-center gap-2">
                <Package className="w-4 h-4" />
                Itens da Expedicao
              </h4>
              <button
                type="button"
                onClick={addItem}
                className="flex items-center gap-1 px-3 py-1.5 bg-primary-100 text-primary-700 rounded-lg text-sm hover:bg-primary-200"
              >
                <Plus className="w-4 h-4" />
                Adicionar Item
              </button>
            </div>
            {shipmentItems.length > 0 ? (
              <div className="space-y-3">
                {shipmentItems.map((item, index) => (
                  <div key={index} className="grid grid-cols-12 gap-2 items-end bg-slate-50 p-3 rounded-lg">
                    <div className="col-span-3">
                      <label className="block text-xs text-slate-500 mb-1">Fio (opcional)</label>
                      <select
                        value={item.threadId || ""}
                        onChange={(e) => {
                          const thread = (threadsData || []).find((t: Thread) => t.id === e.target.value)
                          updateItem(index, "threadId", e.target.value)
                          if (thread) {
                            updateItem(index, "description", `${thread.code} - ${thread.name} (${thread.color})`)
                          }
                        }}
                        className="w-full px-2 py-1.5 border border-slate-300 rounded text-sm"
                      >
                        <option value="">Selecione</option>
                        {(threadsData || []).map((t: Thread) => (
                          <option key={t.id} value={t.id}>
                            {t.code} - {t.name}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div className="col-span-3">
                      <label className="block text-xs text-slate-500 mb-1">Descricao *</label>
                      <input
                        value={item.description || ""}
                        onChange={(e) => updateItem(index, "description", e.target.value)}
                        required
                        className="w-full px-2 py-1.5 border border-slate-300 rounded text-sm"
                      />
                    </div>
                    <div className="col-span-2">
                      <label className="block text-xs text-slate-500 mb-1">Qtd (kg)</label>
                      <input
                        type="number"
                        step="0.01"
                        value={item.quantity || ""}
                        onChange={(e) => updateItem(index, "quantity", e.target.value)}
                        className="w-full px-2 py-1.5 border border-slate-300 rounded text-sm"
                      />
                    </div>
                    <div className="col-span-2">
                      <label className="block text-xs text-slate-500 mb-1">Preco/kg</label>
                      <input
                        type="number"
                        step="0.01"
                        value={item.unitPrice || ""}
                        onChange={(e) => updateItem(index, "unitPrice", e.target.value)}
                        className="w-full px-2 py-1.5 border border-slate-300 rounded text-sm"
                      />
                    </div>
                    <div className="col-span-1">
                      <label className="block text-xs text-slate-500 mb-1">Total</label>
                      <p className="px-2 py-1.5 bg-slate-100 rounded text-sm font-medium">
                        {formatCurrency(item.totalPrice || 0)}
                      </p>
                    </div>
                    <div className="col-span-1">
                      <button
                        type="button"
                        onClick={() => removeItem(index)}
                        className="p-1.5 hover:bg-red-100 rounded text-red-500"
                      >
                        <X className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))}
                <div className="flex justify-end gap-4 pt-2 border-t">
                  <p className="text-sm">
                    <span className="text-slate-500">Peso Total:</span>{" "}
                    <strong>
                      {shipmentItems.reduce((sum, i) => sum + (Number(i.quantity) || 0), 0).toFixed(2)} kg
                    </strong>
                  </p>
                  <p className="text-sm">
                    <span className="text-slate-500">Valor Total:</span>{" "}
                    <strong>
                      {formatCurrency(shipmentItems.reduce((sum, i) => sum + (Number(i.totalPrice) || 0), 0))}
                    </strong>
                  </p>
                </div>
              </div>
            ) : (
              <div className="text-center py-6 text-slate-400">
                <Package className="w-8 h-8 mx-auto mb-2 opacity-50" />
                <p className="text-sm">Nenhum item adicionado</p>
                <p className="text-xs">Clique em "Adicionar Item" para incluir fios ou produtos</p>
              </div>
            )}
          </div>

{/* Valores Manuais (se nao houver itens) */}
          {shipmentItems.length === 0 && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Peso Total (kg)</label>
                <input
                  name="totalWeight"
                  type="number"
                  step="0.01"
                  defaultValue="0"
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Valor Total (R$)</label>
                <input
                  name="totalValue"
                  type="number"
                  step="0.01"
                  defaultValue="0"
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                />
              </div>
            </div>
          )}

{/* Transportadora */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Transportadora</label>
              <input name="carrier" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">CNPJ Transp.</label>
              <input name="carrierCnpj" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Placa Veiculo</label>
              <input name="vehiclePlate" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Motorista</label>
              <input name="driverName" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>

{/* Frete e Rastreio */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo de Frete</label>
              <select name="freightType" className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione</option>
                <option value="CIF">CIF (Pago pelo Remetente)</option>
                <option value="FOB">FOB (Pago pelo Destinatario)</option>
                <option value="proprio">Transporte Proprio</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Valor do Frete</label>
              <input
                name="freightValue"
                type="number"
                step="0.01"
                defaultValue="0"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo de Rastreio</label>
              <input name="trackingCode" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
          </div>

{/* Observacoes */}
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
            <textarea name="notes" rows={2} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
          </div>

{/* Botoes */}
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal - Com Status */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Expedicao" size="lg">
        <form onSubmit={handleEdit} className="space-y-4">
          {/* Status da Expedicao - Destacado */}
          <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
            <label className="block text-sm font-medium text-slate-700 mb-2">Status da Expedicao</label>
            <div className="flex flex-wrap gap-2">
              {["pendente", "enviado", "entregue", "cancelado"].map((status) => (
                <button
                  key={status}
                  type="button"
                  onClick={() => {
                    if (selectedShipment) {
                      statusMutation.mutate({ id: selectedShipment.id, status })
                    }
                  }}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    selectedShipment?.status === status
                      ? status === "pendente"
                        ? "bg-amber-500 text-white"
                        : status === "enviado"
                          ? "bg-sky-500 text-white"
                          : status === "entregue"
                            ? "bg-emerald-500 text-white"
                            : "bg-red-500 text-white"
                      : "bg-white border border-slate-300 text-slate-600 hover:bg-slate-100"
                  }`}
                >
                  {status.charAt(0).toUpperCase() + status.slice(1)}
                </button>
              ))}
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo</label>
              <select
                name="type"
                defaultValue={selectedShipment?.type}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="saida">Saida</option>
                <option value="entrada">Entrada</option>
                <option value="terceiro">Terceiro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">NF</label>
              <input
                name="invoiceNumber"
                defaultValue={selectedShipment?.invoiceNumber}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Pedido</label>
              <input
                name="orderNumber"
                defaultValue={selectedShipment?.orderNumber}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Cliente</label>
              <select
                name="customerId"
                defaultValue={selectedShipment?.customerId}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione</option>
                {(customersData || []).map((c: Customer) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Filial</label>
              <select
                name="branchId"
                defaultValue={selectedShipment?.branchId}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione</option>
                {(branchesData || []).map((b: Branch) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Galpao</label>
              <select
                name="warehouseId"
                defaultValue={selectedShipment?.warehouseId}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="">Selecione</option>
                {(warehousesData || []).map((w: Warehouse) => (
                  <option key={w.id} value={w.id}>
                    {w.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Peso (kg)</label>
              <input
                name="totalWeight"
                type="number"
                step="0.01"
                defaultValue={selectedShipment?.totalWeight}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Valor (R$)</label>
              <input
                name="totalValue"
                type="number"
                step="0.01"
                defaultValue={selectedShipment?.totalValue}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Transportadora</label>
              <input
                name="carrier"
                defaultValue={selectedShipment?.carrier}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Rastreio</label>
              <input
                name="trackingCode"
                defaultValue={selectedShipment?.trackingCode}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
            <textarea
              name="notes"
              defaultValue={selectedShipment?.notes}
              rows={2}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg"
            />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Detail Modal */}
      <Modal
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        title="Detalhes da Expedicao"
        size="lg"
      >
        {selectedShipment && (
          <div className="space-y-6">
            {/* Header */}
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-xl font-bold text-slate-900">{selectedShipment.code}</h3>
                <p className="text-slate-500">NF: {selectedShipment.invoiceNumber || "N/A"}</p>
              </div>
              <div className="flex items-center gap-2">
                <select
                  value={selectedShipment.status}
                  onChange={(e) => {
                    statusMutation.mutate({ id: selectedShipment.id, status: e.target.value })
                    setSelectedShipment({ ...selectedShipment, status: e.target.value })
                  }}
                  className={`px-3 py-1.5 rounded-full text-sm font-medium border-0 cursor-pointer ${
                    selectedShipment.status === "entregue"
                      ? "bg-emerald-100 text-emerald-800"
                      : selectedShipment.status === "enviado"
                        ? "bg-sky-100 text-sky-800"
                        : selectedShipment.status === "cancelado"
                          ? "bg-red-100 text-red-800"
                          : "bg-amber-100 text-amber-800"
                  }`}
                >
                  <option value="pendente">Pendente</option>
                  <option value="enviado">Enviado</option>
                  <option value="entregue">Entregue</option>
                  <option value="cancelado">Cancelado</option>
                </select>
              </div>
            </div>

{/* Info Grid */}
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500 flex items-center gap-1">
                  <Users className="w-3 h-3" /> Cliente
                </p>
                <p className="font-medium">{selectedShipment.customer?.name || "-"}</p>
                <p className="text-xs text-slate-500">{selectedShipment.customer?.city || ""}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500 flex items-center gap-1">
                  <Building2 className="w-3 h-3" /> Filial
                </p>
                <p className="font-medium">{selectedShipment.branch?.name || "-"}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Galpao</p>
                <p className="font-medium">{selectedShipment.warehouse?.name || "-"}</p>
              </div>
              <div className="bg-blue-50 rounded-lg p-3">
                <p className="text-xs text-blue-600">Peso Total</p>
                <p className="font-bold text-blue-700">{selectedShipment.totalWeight} kg</p>
              </div>
              <div className="bg-emerald-50 rounded-lg p-3">
                <p className="text-xs text-emerald-600">Valor Total</p>
                <p className="font-bold text-emerald-700">{formatCurrency(selectedShipment.totalValue)}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Tipo</p>
                <p className="font-medium capitalize">{selectedShipment.type}</p>
              </div>
            </div>

{/* Transporte */}
            {(selectedShipment.carrier || selectedShipment.trackingCode) && (
              <div className="bg-amber-50 rounded-lg p-4">
                <h4 className="text-sm font-medium text-amber-800 mb-2 flex items-center gap-2">
                  <Truck className="w-4 h-4" /> Transporte
                </h4>
                <div className="grid grid-cols-2 gap-3 text-sm">
                  <div>
                    <span className="text-amber-600">Transportadora:</span> {selectedShipment.carrier || "-"}
                  </div>
                  <div>
                    <span className="text-amber-600">Rastreio:</span> {selectedShipment.trackingCode || "-"}
                  </div>
                  <div>
                    <span className="text-amber-600">Placa:</span> {selectedShipment.vehiclePlate || "-"}
                  </div>
                  <div>
                    <span className="text-amber-600">Motorista:</span> {selectedShipment.driverName || "-"}
                  </div>
                </div>
              </div>
            )}

{/* Observacoes */}
            {selectedShipment.notes && (
              <div className="bg-slate-50 rounded-lg p-4">
                <p className="text-xs text-slate-500 mb-1">Observacoes</p>
                <p className="text-sm">{selectedShipment.notes}</p>
              </div>
            )}

{/* Datas */}
            <div className="text-xs text-slate-400 flex flex-wrap gap-4">
              <span>Criado: {formatDateTime(selectedShipment.createdAt)}</span>
              {selectedShipment.shippedAt && <span>Enviado: {formatDateTime(selectedShipment.shippedAt)}</span>}
              {selectedShipment.deliveredAt && <span>Entregue: {formatDateTime(selectedShipment.deliveredAt)}</span>}
            </div>

{/* Acoes */}
            <div className="flex gap-2 pt-4 border-t">
              {selectedShipment.customer && (
                <button
                  onClick={() => handleWhatsApp(selectedShipment)}
                  className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
                >
                  <MessageCircle className="w-4 h-4" />
                  WhatsApp
                </button>
              )}
              <button
                onClick={() => {
                  toast.success("Romaneio gerado!")
                }}
                className="flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50"
              >
                <Printer className="w-4 h-4" />
                Imprimir Romaneio
              </button>
            </div>
          </div>
        )}
      </Modal>

{/* Report Modal */}
      <Modal isOpen={isReportModalOpen} onClose={() => setIsReportModalOpen(false)} title="Gerar Relatorio" size="md">
        <div className="space-y-4">
          <p className="text-sm text-slate-600">Selecione o tipo de relatorio:</p>
          <div className="grid grid-cols-1 gap-3">
            <button
              onClick={() => generateReport("geral")}
              className="flex items-center gap-3 p-4 border border-slate-200 rounded-lg hover:bg-slate-50 text-left"
            >
              <FileText className="w-5 h-5 text-primary-600" />
              <div>
                <p className="font-medium">Relatorio Geral</p>
                <p className="text-xs text-slate-500">Todas as expedicoes do periodo</p>
              </div>
            </button>
            <button
              onClick={() => generateReport("pendentes")}
              className="flex items-center gap-3 p-4 border border-slate-200 rounded-lg hover:bg-slate-50 text-left"
            >
              <FileText className="w-5 h-5 text-amber-600" />
              <div>
                <p className="font-medium">Expedicoes Pendentes</p>
                <p className="text-xs text-slate-500">Apenas pendentes de envio</p>
              </div>
            </button>
            <button
              onClick={() => generateReport("terceiros")}
              className="flex items-center gap-3 p-4 border border-slate-200 rounded-lg hover:bg-slate-50 text-left"
            >
              <FileText className="w-5 h-5 text-purple-600" />
              <div>
                <p className="font-medium">Servicos de Terceiros</p>
                <p className="text-xs text-slate-500">Expedicoes para terceiros</p>
              </div>
            </button>
            <button
              onClick={() => generateReport("por-cliente")}
              className="flex items-center gap-3 p-4 border border-slate-200 rounded-lg hover:bg-slate-50 text-left"
            >
              <FileText className="w-5 h-5 text-emerald-600" />
              <div>
                <p className="font-medium">Por Cliente</p>
                <p className="text-xs text-slate-500">Agrupado por cliente</p>
              </div>
            </button>
          </div>
        </div>
      </Modal>
    </div>
  )
}
[V0_FILE]markdown:file="README.md" isMerged="true"
# TextilManager ERP Pro

Sistema ERP completo e profissional para gestão de indústria têxtil, desenvolvido com arquitetura moderna e foco extremo em UX/UI.

## Inicio Rapido (Windows)

### Metodo Automatico (Recomendado)

1. Baixe o projeto clicando nos **tres pontos** no canto superior direito > **Download ZIP**
2. Extraia o arquivo ZIP
3. **Clique duas vezes** no arquivo `iniciar-sistema.bat`
4. Aguarde as duas janelas abrirem (pode demorar 1-2 minutos na primeira vez)
5. Acesse `http://localhost:5173` no navegador

**Login:**
- Email: `admin@textilmanager.com`
- Senha: `admin123`

### Scripts Disponiveis

- `iniciar-sistema.bat` - Inicia backend + frontend automaticamente
- `iniciar-backend.bat` - Inicia apenas o backend
- `iniciar-frontend.bat` - Inicia apenas o frontend

## Stack Tecnológica

### Backend
- **Node.js + Express** - API RESTful robusta
- **Prisma ORM** - Gestão de banco de dados type-safe
- **SQLite** - Banco de dados leve e portátil
- **JWT** - Autenticação segura com tokens
- **Multer** - Upload de arquivos
- **bcryptjs** - Hash de senhas

### Frontend
- **React 18** - Interface moderna e reativa
- **Vite** - Build ultrarrápido
- **TypeScript** - Tipagem estática
- **Tailwind CSS** - Estilização utilitária
- **Framer Motion** - Animações fluidas
- **Recharts** - Gráficos interativos
- **React Router** - Navegação SPA
- **Zustand** - Gerenciamento de estado
- **Axios** - Requisições HTTP
- **React Hot Toast** - Notificações elegantes

## Funcionalidades

- **Dashboard Executivo**: KPIs em tempo real, gráficos de distribuição e movimentações
- **Almoxarifado**: CRUD completo de produtos com busca avançada e filtros
- **Agulhas**: Controle por máquina com entrada/saída de estoque
- **Fios**: Rastreabilidade obrigatória com Máquina e OP
- **Qualidade**: Registro de defeitos e destinos de malhas de segunda
- **Expedição**: Integração WhatsApp para notificar clientes
- **Reciclados**: Gestão sustentável de materiais
- **Upload de Arquivos**: Anexar imagens e documentos aos registros
- **Exportação CSV**: Exportar dados filtrados para análise

## Estrutura do Projeto

```
TextilManager-ERP-Pro/
├── server/                     # Backend
│   ├── prisma/
│   │   ├── schema.prisma       # Schema do banco de dados
│   │   └── seed.ts             # Dados iniciais
│   ├── src/
│   │   ├── lib/
│   │   │   └── prisma.ts       # Cliente Prisma singleton
│   │   ├── middlewares/
│   │   │   ├── auth.ts         # Middleware JWT
│   │   │   ├── errorHandler.ts # Tratamento de erros
│   │   │   └── upload.ts       # Configuração Multer
│   │   ├── routes/
│   │   │   ├── auth.routes.ts
│   │   │   ├── dashboard.routes.ts
│   │   │   ├── product.routes.ts
│   │   │   ├── needle.routes.ts
│   │   │   ├── thread.routes.ts
│   │   │   ├── quality.routes.ts
│   │   │   ├── shipment.routes.ts
│   │   │   ├── recycled.routes.ts
│   │   │   └── upload.routes.ts
│   │   └── server.ts           # Servidor Express
│   ├── uploads/                # Arquivos enviados
│   ├── .env                    # Variáveis de ambiente
│   ├── package.json
│   └── tsconfig.json
│
├── client/                     # Frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── Layout.tsx      # Layout principal com sidebar
│   │   │   └── ui/             # Componentes reutilizáveis
│   │   ├── lib/
│   │   │   ├── api.ts          # Configuração Axios
│   │   │   └── utils.ts        # Funções utilitárias
│   │   ├── pages/
│   │   │   ├── Login.tsx
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Almoxarifado.tsx
│   │   │   ├── Agulhas.tsx
│   │   │   ├── Fios.tsx
│   │   │   ├── Qualidade.tsx
│   │   │   ├── Expedicao.tsx
│   │   │   └── Reciclados.tsx
│   │   ├── store/
│   │   │   └── authStore.ts    # Estado de autenticação
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── index.css
│   ├── index.html
│   ├── package.json
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   └── tsconfig.json
│
└── README.md
```

## Instalacao Passo a Passo

### Pre-requisitos

- Node.js 18+ instalado
- npm ou yarn

### 1. Baixar o Projeto

Clique nos tres pontos no canto superior direito do bloco de codigo no v0 e selecione "Download ZIP". Extraia o arquivo ZIP em uma pasta de sua preferencia.

### 2. Configurar o Backend

Abra o terminal e navegue ate a pasta do servidor:

```bash
cd TextilManager-ERP-Pro/server
```

Instale as dependencias:

```bash
npm install
```

Crie o arquivo de variaveis de ambiente (se nao existir):

```bash
cp .env.example .env
```

Ou crie manualmente o arquivo `.env` com:

```env
DATABASE_URL="file:./textilmanager.db"
JWT_SECRET="textilmanager-erp-pro-super-secret-jwt-key-2024"
NODE_ENV="development"
PORT=3001
```

Gere o cliente Prisma e crie o banco de dados:

```bash
npx prisma generate
npx prisma db push
```

Popule o banco com dados iniciais:

```bash
npx ts-node prisma/seed.ts
```

Inicie o servidor:

```bash
npm run dev
```

Voce vera:

```
======================================
TextilManager ERP Pro - Backend
======================================
Servidor rodando em http://localhost:3001
Ambiente: development
======================================
```

### 3. Configurar o Frontend

Abra outro terminal e navegue ate a pasta do cliente:

```bash
cd TextilManager-ERP-Pro/client
```

Instale as dependencias:

```bash
npm install
```

Inicie o servidor de desenvolvimento:

```bash
npm run dev
```

Voce vera:

```
VITE v5.x.x ready in xxx ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
```

### 4. Acessar o Sistema

Abra seu navegador e acesse:

```
http://localhost:5173
```

**Credenciais de acesso:**
- Email: `admin@textilmanager.com`
- Senha: `admin123`

## Scripts Disponiveis

### Backend (pasta server/)

```bash
npm run dev      # Inicia em modo desenvolvimento com hot-reload
npm run build    # Compila TypeScript para JavaScript
npm start        # Inicia em modo producao
```

### Frontend (pasta client/)

```bash
npm run dev      # Inicia servidor de desenvolvimento Vite
npm run build    # Compila para producao
npm run preview  # Visualiza build de producao
```

## Modulos do Sistema

### 1. Dashboard

- 4 KPIs principais: Total Produtos, Estoque Critico, Fios em Processo, Expedicoes Pendentes
- Grafico de rosca: Distribuicao por categoria
- Grafico de barras: Movimentacoes dos ultimos 7 dias
- Lista de alertas do sistema
- Tabela de produtos criticos
- Movimentacoes recentes

### 2. Almoxarifado

- Listagem com busca avancada (debounce 300ms)
- Filtros por status e categoria
- Paginacao no servidor
- Acoes: Entrada, Saida, Visualizar, Editar, Excluir
- Exportacao CSV dos dados filtrados
- Modal de criacao/edicao com validacao

### 3. Agulhas

- Controle por maquina e tipo
- Entrada e saida de estoque
- Historico de movimentacoes
- Alertas de estoque minimo

### 4. Fios

- Rastreabilidade obrigatoria: Maquina + OP
- Controle de peso: inicial, atual, minimo
- Status: Disponivel, Em Uso, Finalizado
- Registro de retornos

### 5. Qualidade

- Registro de malhas de segunda
- Tipos de defeito catalogados
- Severidade: Baixa, Media, Alta
- Destinos: Retrabalho, Venda, Descarte, Doacao
- Aprovacao/Rejeicao de registros

### 6. Expedicao

- Cadastro de notas fiscais
- Dados do cliente e endereco
- Integracao WhatsApp para notificacao
- Status: Pendente, Em Transito, Entregue, Cancelado
- Rastreamento de entregas

### 7. Reciclados

- Gestao de materiais reciclaveis
- Tipos: Retalhos, Aparas, Cones, Papelao, Plastico, Metal
- Controle de peso e destino
- Status: Armazenado, Separado, Vendido
- Foco em sustentabilidade

## API REST

### Autenticacao

```
POST /api/auth/login     # Login
POST /api/auth/register  # Registro
GET  /api/auth/me        # Usuario atual
```

### Produtos (Almoxarifado)

```
GET    /api/products           # Listar com paginacao
GET    /api/products/:id       # Buscar por ID
POST   /api/products           # Criar
PUT    /api/products/:id       # Atualizar
DELETE /api/products/:id       # Excluir (soft delete)
POST   /api/products/:id/entry # Entrada de estoque
POST   /api/products/:id/exit  # Saida de estoque
```

### Outras rotas seguem o mesmo padrao RESTful

## Responsividade

O sistema e 100% responsivo:

- **Desktop (1024px+)**: Sidebar fixa, layout completo
- **Tablet (768px-1023px)**: Sidebar colapsavel, cards em grid
- **Mobile (< 768px)**: Sidebar em drawer, tabelas com scroll horizontal

## Personalizacao

### Cores

Edite o arquivo `client/tailwind.config.js` para alterar as cores do tema:

```javascript
colors: {
  primary: {
    50: '#eff6ff',
    // ... outras tonalidades
    600: '#2563eb',
    700: '#1d4ed8',
  }
}
```

### Logo

Substitua o arquivo `client/public/favicon.svg` pelo logo da sua empresa.

## Solucao de Problemas

### Erro "'vite' nao e reconhecido como comando"

Este erro significa que as dependencias do frontend nao foram instaladas. Execute:

```bash
cd client
npm install --legacy-peer-deps
npx vite
```

Ou se preferir reinstalar completamente:

```bash
cd client
rd /s /q node_modules
del package-lock.json
npm install --legacy-peer-deps
npm run dev
```

### Erro ao fazer login / Erro interno do servidor

Execute estes comandos na pasta `server`:

```bash
cd server
npx prisma generate
npx prisma db push --accept-data-loss
npx tsx prisma/seed.ts
npm run dev
```

### Erro "Cannot find module '@prisma/client'"

```bash
cd server
npx prisma generate
```

### Erro de CORS

Verifique se o backend esta rodando na porta 3001 e o frontend na 5173.

### Banco de dados vazio / Usuario nao encontrado

```bash
cd server
npx prisma db push --accept-data-loss
npx tsx prisma/seed.ts
```

### Resetar o Banco Completamente

Se precisar reiniciar o banco do zero:

```bash
cd server
del prisma\textilmanager.db
npx prisma db push
npx tsx prisma/seed.ts
```

### Porta em uso

Edite a porta no arquivo `.env` do server ou no `vite.config.ts` do client.

## Producao

### Build do Frontend

```bash
cd client
npm run build
```

Os arquivos serao gerados na pasta `dist/`.

### Build do Backend

```bash
cd server
npm run build
```

Os arquivos serao gerados na pasta `dist/`.

### Deploy

1. Configure variaveis de ambiente no servidor de producao
2. Sirva os arquivos estaticos do frontend com Nginx/Apache
3. Execute o backend com PM2 ou similar:

```bash
pm2 start dist/server.js --name textilmanager-api
```

## Banco de Dados

O sistema usa **SQLite**, um banco de dados **100% LOCAL** que fica salvo no arquivo:

```
server/prisma/textilmanager.db
```

**Vantagens:**
- NAO precisa instalar MySQL, PostgreSQL ou outro servidor
- Facil de fazer backup (basta copiar o arquivo .db)
- Portatil - mova o projeto inteiro para outro PC
- Funciona offline

## Licenca

MIT

---

**TextilManager ERP Pro**  
Sistema de Gestao Textil Profissional  
Desenvolvido com React + Vite + Express + Prisma
[V0_FILE]typescriptreact:file="client/src/pages/Agulhas.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { motion } from "framer-motion"
import { Plus, Edit2, Trash2, ArrowUpRight, ArrowDownRight, Eye, FileText, Crosshair, Download, Printer } from "lucide-react"
import toast from "react-hot-toast"
import api from "../lib/api"
import { formatDateTime } from "../lib/utils"
import DataTable from "../components/ui/DataTable"
import Modal from "../components/ui/Modal"
import ExportButtons from "../components/ui/ExportButtons"
import ReportModal from "../components/ui/ReportModal"
import { handleGenerateReport } from "../lib/reportUtils" // Import handleGenerateReport

interface Needle {
  id: string
  code: string
  type: string
  gauge: string
  machine: string
  quantity: number
  minQuantity: number
  status: string
  notes?: string
  createdAt?: string
}

export default function Agulhas() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("")
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
  const [isMovementModalOpen, setIsMovementModalOpen] = useState(false)
  const [isReportModalOpen, setIsReportModalOpen] = useState(false)
  const [selectedNeedle, setSelectedNeedle] = useState<Needle | null>(null)
  const [movementType, setMovementType] = useState<"entrada" | "saida">("entrada")

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
    queryKey: ["needles", page, search, statusFilter],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: String(page),
        limit: "15",
        search,
        ...(statusFilter && { status: statusFilter }),
      })
      const { data } = await api.get(`/needles?${params}`)
      return data
    },
  })

const stats = {
    total: data?.pagination?.total || 0,
    critical: data?.data?.filter((n: Needle) => n.quantity > 0 && n.quantity <= n.minQuantity).length || 0,
    empty: data?.data?.filter((n: Needle) => n.quantity === 0).length || 0,
    ok: data?.data?.filter((n: Needle) => n.quantity > n.minQuantity).length || 0,
  }

const createMutation = useMutation({
    mutationFn: (data: Partial<Needle>) => api.post("/needles", data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["needles"] })
      toast.success("Agulha cadastrada com sucesso!")
      setIsCreateModalOpen(false)
    },
    onError: () => toast.error("Erro ao cadastrar agulha"),
  })

const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Needle> }) => api.put(`/needles/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["needles"] })
      toast.success("Agulha atualizada com sucesso!")
      setIsEditModalOpen(false)
    },
    onError: () => toast.error("Erro ao atualizar agulha"),
  })

const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/needles/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["needles"] })
      toast.success("Agulha removida com sucesso!")
    },
    onError: () => toast.error("Erro ao remover agulha"),
  })

const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedNeedle) return
    const formData = new FormData(e.currentTarget)
    updateMutation.mutate({
      id: selectedNeedle.id,
      data: {
        type: formData.get("type") as string,
        gauge: formData.get("gauge") as string,
        machine: formData.get("machine") as string,
        minQuantity: Number(formData.get("minQuantity")),
        notes: formData.get("notes") as string,
      },
    })
  }

const handleMovement = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!selectedNeedle) return
    const formData = new FormData(e.currentTarget)
    movementMutation.mutate({
      id: selectedNeedle.id,
      data: {
        type: movementType,
        quantity: Number(formData.get("quantity")),
        machine: formData.get("machine") as string,
        reason: formData.get("reason") as string,
      },
    })
  }

const exportToExcel = () => {
    const dataToExport = data?.data || []
    if (dataToExport.length === 0) {
      toast.error("Nenhum dado para exportar")
      return
    }

const headers = ["Codigo", "Tipo", "Gauge", "Maquina", "Quantidade", "Qtd Minima", "Status", "Observacoes", "Data Cadastro"]
    const rows = dataToExport.map((n: Needle) => [
      n.code,
      n.type,
      n.gauge || "-",
      n.machine || "-",
      n.quantity,
      n.minQuantity,
      n.quantity === 0 ? "Esgotado" : n.quantity <= n.minQuantity ? "Critico" : "OK",
      n.notes || "-",
      n.createdAt ? formatDateTime(n.createdAt) : "-",
    ])

const BOM = "\uFEFF"
    const csvContent = BOM + [headers.join("\t"), ...rows.map((row) => row.join("\t"))].join("\r\n")
    const blob = new Blob([csvContent], { type: "application/vnd.ms-excel;charset=utf-8" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `agulhas_${new Date().toISOString().split("T")[0]}.xls`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    toast.success("Arquivo Excel exportado com sucesso!")
  }

const exportToCSV = () => {
    const dataToExport = data?.data || []
    if (dataToExport.length === 0) {
      toast.error("Nenhum dado para exportar")
      return
    }

const headers = ["Codigo", "Tipo", "Gauge", "Maquina", "Quantidade", "Qtd Minima", "Status"]
    const rows = dataToExport.map((n: Needle) => [
      n.code,
      n.type,
      n.gauge || "-",
      n.machine || "-",
      n.quantity,
      n.minQuantity,
      n.quantity === 0 ? "Esgotado" : n.quantity <= n.minQuantity ? "Critico" : "OK",
    ])

const BOM = "\uFEFF"
    const csvContent = BOM + [headers.join(";"), ...rows.map((row) => row.join(";"))].join("\r\n")
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `agulhas_${new Date().toISOString().split("T")[0]}.csv`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    toast.success("Arquivo CSV exportado com sucesso!")
  }

const printReport = () => {
    const dataToExport = data?.data || []
    if (dataToExport.length === 0) {
      toast.error("Nenhum dado para imprimir")
      return
    }

const printWindow = window.open("", "_blank")
    if (!printWindow) {
      toast.error("Popup bloqueado. Permita popups para imprimir.")
      return
    }

const handleExport = (format: "csv" | "pdf" | "excel") => {
    if (format === "excel") {
      exportToExcel()
    } else if (format === "csv") {
      exportToCSV()
    } else {
      printReport()
    }
  }

const columns = [
    { key: "code", header: "Codigo", sortable: true, className: "font-mono text-xs" },
    { key: "type", header: "Tipo", sortable: true },
    { key: "gauge", header: "Gauge" },
    { key: "machine", header: "Maquina" },
    { key: "quantity", header: "Qtd", sortable: true, className: "font-medium" },
    {
      key: "status",
      header: "Status",
      render: (item: Needle) => {
        const statusText = item.quantity === 0 ? "Esgotado" : item.quantity <= item.minQuantity ? "Critico" : "OK"
        const color =
          item.quantity === 0
            ? "bg-red-100 text-red-800"
            : item.quantity <= item.minQuantity
              ? "bg-amber-100 text-amber-800"
              : "bg-emerald-100 text-emerald-800"
        return <span className={`px-2 py-1 rounded-full text-xs font-medium ${color}`}>{statusText}</span>
      },
    },
  ]

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl lg:text-3xl font-bold text-slate-900">Agulhas</h1>
          <p className="text-slate-500">Gestao e controle de agulhas</p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <button
            onClick={exportToCSV}
            disabled={isLoading || !data?.data?.length}
            className="flex items-center gap-2 px-3 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Download className="w-4 h-4" />
            <span className="hidden sm:inline">CSV</span>
          </button>
          <button
            onClick={exportToExcel}
            disabled={isLoading || !data?.data?.length}
            className="flex items-center gap-2 px-3 py-2 border border-emerald-200 text-emerald-700 rounded-lg hover:bg-emerald-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Download className="w-4 h-4" />
            <span className="hidden sm:inline">Excel</span>
          </button>
          <button
            onClick={printReport}
            disabled={isLoading || !data?.data?.length}
            className="flex items-center gap-2 px-3 py-2 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Printer className="w-4 h-4" />
            <span className="hidden sm:inline">Imprimir</span>
          </button>
          <button
            onClick={() => setIsCreateModalOpen(true)}
            className="flex items-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors shadow-lg shadow-primary-600/30"
          >
            <Plus className="w-5 h-5" />
            Nova Agulha
          </button>
        </div>
      </div>

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <Crosshair className="w-5 h-5 text-blue-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-slate-900">{stats.total}</p>
              <p className="text-xs text-slate-500">Total de Agulhas</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
              <Crosshair className="w-5 h-5 text-emerald-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-emerald-600">{stats.ok}</p>
              <p className="text-xs text-slate-500">Estoque OK</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
              <Crosshair className="w-5 h-5 text-amber-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-amber-600">{stats.critical}</p>
              <p className="text-xs text-slate-500">Estoque Critico</p>
            </div>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white rounded-xl p-4 shadow-sm border border-slate-100"
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
              <Crosshair className="w-5 h-5 text-red-600" />
            </div>
            <div>
              <p className="text-2xl font-bold text-red-600">{stats.empty}</p>
              <p className="text-xs text-slate-500">Esgotados</p>
            </div>
          </div>
        </motion.div>
      </div>

<DataTable
        data={data?.data || []}
        columns={columns}
        searchPlaceholder="Buscar por codigo, tipo, maquina..."
        onSearch={setSearch}
        pagination={data?.pagination}
        onPageChange={setPage}
        onExport={handleExport}
        loading={isLoading}
        filters={
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 border border-slate-200 rounded-lg text-sm"
          >
            <option value="">Todos os Status</option>
            <option value="ok">OK</option>
            <option value="critical">Critico</option>
            <option value="empty">Esgotado</option>
          </select>
        }
        actions={(item: Needle) => (
          <div className="flex items-center justify-end gap-1">
            <button
              onClick={() => {
                setSelectedNeedle(item)
                setIsDetailModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Detalhes"
            >
              <Eye className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                setSelectedNeedle(item)
                setMovementType("entrada")
                setIsMovementModalOpen(true)
              }}
              className="p-2 hover:bg-emerald-100 rounded-lg"
              title="Entrada"
            >
              <ArrowUpRight className="w-4 h-4 text-emerald-600" />
            </button>
            <button
              onClick={() => {
                setSelectedNeedle(item)
                setMovementType("saida")
                setIsMovementModalOpen(true)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Saida"
            >
              <ArrowDownRight className="w-4 h-4 text-red-600" />
            </button>
            <button
              onClick={() => {
                setSelectedNeedle(item)
                setIsEditModalOpen(true)
              }}
              className="p-2 hover:bg-slate-100 rounded-lg"
              title="Editar"
            >
              <Edit2 className="w-4 h-4 text-slate-500" />
            </button>
            <button
              onClick={() => {
                if (confirm("Remover esta agulha?")) deleteMutation.mutate(item.id)
              }}
              className="p-2 hover:bg-red-100 rounded-lg"
              title="Remover"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
      />

{/* Create Modal */}
      <Modal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Nova Agulha">
        <form onSubmit={handleCreate} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo *</label>
              <input name="code" required className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo *</label>
              <select name="type" required className="w-full px-3 py-2 border border-slate-300 rounded-lg">
                <option value="">Selecione...</option>
                <option value="Circular">Circular</option>
                <option value="Reta">Reta</option>
                <option value="Jacquard">Jacquard</option>
                <option value="Intarsia">Intarsia</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Gauge</label>
              <input
                name="gauge"
                placeholder="Ex: 28, 24, 30"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
              <input name="machine" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade</label>
              <input
                name="quantity"
                type="number"
                min="0"
                defaultValue="0"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Qtd Minima</label>
              <input
                name="minQuantity"
                type="number"
                min="0"
                defaultValue="5"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
            <textarea name="notes" rows={2} className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsCreateModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {createMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

{/* Edit Modal */}
      <Modal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} title="Editar Agulha">
        <form onSubmit={handleEdit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Codigo</label>
              <input
                value={selectedNeedle?.code || ""}
                disabled
                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-50"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Tipo *</label>
              <select
                name="type"
                defaultValue={selectedNeedle?.type}
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              >
                <option value="Circular">Circular</option>
                <option value="Reta">Reta</option>
                <option value="Jacquard">Jacquard</option>
                <option value="Intarsia">Intarsia</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Gauge</label>
              <input
                name="gauge"
                defaultValue={selectedNeedle?.gauge}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
              <input
                name="machine"
                defaultValue={selectedNeedle?.machine}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Qtd Minima</label>
              <input
                name="minQuantity"
                type="number"
                defaultValue={selectedNeedle?.minQuantity}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Observacoes</label>
            <textarea
              name="notes"
              defaultValue={selectedNeedle?.notes}
              rows={2}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg"
            />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={updateMutation.isPending}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {updateMutation.isPending ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </form>
      </Modal>

<Modal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} title="Detalhes da Agulha">
        {selectedNeedle && (
          <div className="space-y-6">
            <div className="flex items-start gap-4">
              <div className="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center">
                <Crosshair className="w-8 h-8 text-primary-600" />
              </div>
              <div className="flex-1">
                <h3 className="text-xl font-bold text-slate-900">{selectedNeedle.type}</h3>
                <p className="text-sm text-slate-500 font-mono">{selectedNeedle.code}</p>
              </div>
              <div>
                {(() => {
                  const statusText =
                    selectedNeedle.quantity === 0
                      ? "Esgotado"
                      : selectedNeedle.quantity <= selectedNeedle.minQuantity
                        ? "Critico"
                        : "OK"
                  const color =
                    selectedNeedle.quantity === 0
                      ? "bg-red-100 text-red-800"
                      : selectedNeedle.quantity <= selectedNeedle.minQuantity
                        ? "bg-amber-100 text-amber-800"
                        : "bg-emerald-100 text-emerald-800"
                  return <span className={`px-3 py-1 rounded-full text-sm font-medium ${color}`}>{statusText}</span>
                })()}
              </div>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Gauge</p>
                <p className="text-lg font-bold text-slate-900">{selectedNeedle.gauge || "-"}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Maquina</p>
                <p className="text-lg font-bold text-slate-900">{selectedNeedle.machine || "-"}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Quantidade</p>
                <p className="text-lg font-bold text-slate-900">{selectedNeedle.quantity}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Qtd Minima</p>
                <p className="text-lg font-bold text-slate-900">{selectedNeedle.minQuantity}</p>
              </div>
            </div>
            {selectedNeedle.notes && (
              <div>
                <p className="text-xs text-slate-500 mb-1">Observacoes</p>
                <p className="text-sm text-slate-700">{selectedNeedle.notes}</p>
              </div>
            )}
            <div className="flex gap-2 pt-4 border-t">
              <button
                onClick={() => {
                  setIsDetailModalOpen(false)
                  setMovementType("entrada")
                  setIsMovementModalOpen(true)
                }}
                className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700"
              >
                <ArrowUpRight className="w-4 h-4" /> Entrada
              </button>
              <button
                onClick={() => {
                  setIsDetailModalOpen(false)
                  setMovementType("saida")
                  setIsMovementModalOpen(true)
                }}
                className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700"
              >
                <ArrowDownRight className="w-4 h-4" /> Saida
              </button>
              <button
                onClick={() => {
                  setIsDetailModalOpen(false)
                  setIsEditModalOpen(true)
                }}
                className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-slate-600 text-white rounded-lg hover:bg-slate-700"
              >
                <Edit2 className="w-4 h-4" /> Editar
              </button>
            </div>
          </div>
        )}
      </Modal>

{/* Movement Modal */}
      <Modal
        isOpen={isMovementModalOpen}
        onClose={() => setIsMovementModalOpen(false)}
        title={movementType === "entrada" ? "Entrada de Agulhas" : "Saida de Agulhas"}
      >
        <form onSubmit={handleMovement} className="space-y-4">
          <div
            className={`p-4 rounded-lg ${movementType === "entrada" ? "bg-emerald-50 border border-emerald-200" : "bg-red-50 border border-red-200"}`}
          >
            <p className="font-medium">
              {selectedNeedle?.code} - {selectedNeedle?.type}
            </p>
            <p className="text-sm text-slate-500">
              Estoque atual: <span className="font-bold">{selectedNeedle?.quantity}</span>
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Quantidade *</label>
            <input
              name="quantity"
              type="number"
              min="1"
              max={movementType === "saida" ? selectedNeedle?.quantity : undefined}
              required
              className="w-full px-3 py-2 border border-slate-300 rounded-lg"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Maquina</label>
            <input
              name="machine"
              defaultValue={selectedNeedle?.machine}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Motivo</label>
            <input name="reason" className="w-full px-3 py-2 border border-slate-300 rounded-lg" />
          </div>
          <div className="flex justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={() => setIsMovementModalOpen(false)}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={movementMutation.isPending}
              className={`px-4 py-2 text-white rounded-lg disabled:opacity-50 ${movementType === "entrada" ? "bg-emerald-600 hover:bg-emerald-700" : "bg-red-600 hover:bg-red-700"}`}
            >
              {movementMutation.isPending ? "Processando..." : "Confirmar"}
            </button>
          </div>
        </form>
      </Modal>

</div>
  )
}124:Tb4433,[V0_FILE]javascript:file="server.js" isEdit="true" isMerged="true"
// ============================================
// TEXTILMANAGER ERP - Sistema de Gestão Têxtil
// Backend: Node.js + Express + SQLite3
// ============================================

const express = require("express")
const sqlite3 = require("sqlite3").verbose()
const bodyParser = require("body-parser")
const session = require("express-session")
const path = require("path")

const app = express()
const PORT = 3000

// ============================================
// CONFIGURAÇÃO DO MIDDLEWARE
// ============================================

app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())
app.use(express.static("public"))

// Configuração de sessão para autenticação
app.use(
  session({
    secret: "textil-erp-secret-key-2024",
    resave: false,
    saveUninitialized: false,
    cookie: { maxAge: 24 * 60 * 60 * 1000 }, // 24 horas
  }),
)

// Configuração do EJS
app.set("view engine", "ejs")
app.set("views", path.join(__dirname, "views"))

// ============================================
// CONFIGURAÇÃO DO BANCO DE DADOS SQLite
// ============================================

const db = new sqlite3.Database("./textil_erp.db", (err) => {
  if (err) {
    console.error("❌ Erro ao conectar ao banco de dados:", err.message)
  } else {
    console.log("✓ Conectado ao banco de dados SQLite (textil_erp.db)")
  }
})

// Função para inicializar as tabelas
function inicializarBancoDeDados() {
  db.serialize(() => {
    // Tabela de Usuários
    db.run(
      `
      CREATE TABLE IF NOT EXISTS usuarios (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT NOT NULL UNIQUE,
        password TEXT NOT NULL,
        nome TEXT NOT NULL,
        email TEXT,
        nivel TEXT DEFAULT 'operador',
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela usuarios:", err)
        else console.log('✓ Tabela "usuarios" verificada/criada')

// Inserir usuário admin padrão
        db.run(`
        INSERT OR IGNORE INTO usuarios (username, password, nome, nivel)
        VALUES ('admin', 'admin', 'Administrador', 'admin')
      `)
      },
    )

// Tabela de Locais/Salas
    db.run(
      `
      CREATE TABLE IF NOT EXISTS locais (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        nome TEXT NOT NULL UNIQUE,
        descricao TEXT,
        tipo TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela locais:", err)
        else console.log('✓ Tabela "locais" verificada/criada')
      },
    )

// Tabela de Produtos Gerais (Almoxarifado)
    db.run(
      `
      CREATE TABLE IF NOT EXISTS produtos (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        codigo TEXT UNIQUE,
        nome TEXT NOT NULL,
        descricao TEXT,
        categoria TEXT,
        unidade TEXT NOT NULL,
        estoque_minimo INTEGER DEFAULT 0,
        estoque_atual INTEGER DEFAULT 0,
        valor_unitario REAL DEFAULT 0,
        local_id INTEGER,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (local_id) REFERENCES locais (id)
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela produtos:", err)
        else console.log('✓ Tabela "produtos" verificada/criada')
      },
    )

// Tabela de Agulhas
    db.run(
      `
      CREATE TABLE IF NOT EXISTS agulhas (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        codigo TEXT UNIQUE NOT NULL,
        tipo TEXT NOT NULL,
        bitola TEXT,
        comprimento TEXT,
        quantidade_atual INTEGER DEFAULT 0,
        quantidade_minima INTEGER DEFAULT 5,
        localizacao TEXT,
        maquina TEXT,
        observacoes TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela agulhas:", err)
        else console.log('✓ Tabela "agulhas" verificada/criada')
      },
    )

// Tabela de Fios
    db.run(
      `
      CREATE TABLE IF NOT EXISTS fios (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        codigo TEXT UNIQUE NOT NULL,
        fornecedor TEXT,
        cor TEXT,
        lote TEXT,
        peso_bruto REAL,
        peso_liquido REAL,
        peso_cone REAL,
        peso_atual REAL,
        maquina TEXT,
        op TEXT,
        status TEXT DEFAULT 'PROCESSO',
        data_entrada DATE,
        data_retorno DATE,
        observacoes TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela fios:", err)
        else console.log('✓ Tabela "fios" verificada/criada')
      },
    )

// Tabela de Malhas de Segunda (Qualidade)
    db.run(
      `
      CREATE TABLE IF NOT EXISTS malhas_segunda (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        codigo TEXT UNIQUE,
        tipo_malha TEXT,
        cor TEXT,
        peso_kg REAL,
        defeito TEXT,
        op TEXT,
        destino TEXT,
        status TEXT DEFAULT 'ESTOQUE',
        data_entrada DATE,
        valor_estimado REAL,
        observacoes TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela malhas_segunda:", err)
        else console.log('✓ Tabela "malhas_segunda" verificada/criada')
      },
    )

// Tabela de Reciclados
    db.run(
      `
      CREATE TABLE IF NOT EXISTS reciclados (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        tipo_material TEXT NOT NULL,
        descricao TEXT,
        peso_kg REAL,
        quantidade INTEGER,
        origem TEXT,
        data_coleta DATE,
        comprador TEXT,
        valor_venda REAL,
        status TEXT DEFAULT 'ESTOQUE',
        observacoes TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela reciclados:", err)
        else console.log('✓ Tabela "reciclados" verificada/criada')
      },
    )

// Tabela de Expedição/Coletas
    db.run(
      `
      CREATE TABLE IF NOT EXISTS expedicao (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        numero_nf TEXT NOT NULL,
        cliente TEXT NOT NULL,
        destino TEXT,
        cidade TEXT,
        estado TEXT,
        telefone TEXT,
        peso_total REAL,
        valor_total REAL,
        transportadora TEXT,
        data_expedicao DATE,
        status TEXT DEFAULT 'PENDENTE',
        observacoes TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela expedicao:", err)
        else console.log('✓ Tabela "expedicao" verificada/criada')
      },
    )

// Tabela de Movimentações Gerais
    db.run(
      `
      CREATE TABLE IF NOT EXISTS movimentacoes (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        tipo TEXT NOT NULL CHECK(tipo IN ('ENTRADA', 'SAIDA')),
        modulo TEXT NOT NULL,
        item_id INTEGER NOT NULL,
        item_nome TEXT,
        quantidade REAL,
        usuario TEXT,
        observacoes TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `,
      (err) => {
        if (err) console.error("Erro ao criar tabela movimentacoes:", err)
        else console.log('✓ Tabela "movimentacoes" verificada/criada')
      },
    )
  })
}

inicializarBancoDeDados()

// ============================================
// FUNÇÕES AUXILIARES
// ============================================

function formatarDataBrasileira(dataISO) {
  if (!dataISO) return ""
  const data = new Date(dataISO)
  const dia = String(data.getDate()).padStart(2, "0")
  const mes = String(data.getMonth() + 1).padStart(2, "0")
  const ano = data.getFullYear()
  const hora = String(data.getHours()).padStart(2, "0")
  const minuto = String(data.getMinutes()).padStart(2, "0")
  return `${dia}/${mes}/${ano} ${hora}:${minuto}`
}

function formatarMoeda(valor) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(valor || 0)
}

// Middleware de autenticação
function verificarAutenticacao(req, res, next) {
  if (req.session && req.session.usuario) {
    return next()
  }
  res.redirect("/login")
}

// ============================================
// ROTAS DE AUTENTICAÇÃO
// ============================================

app.get("/login", (req, res) => {
  if (req.session && req.session.usuario) {
    return res.redirect("/")
  }
  res.render("login", { erro: null })
})

app.post("/login", (req, res) => {
  const { username, password } = req.body

db.get("SELECT * FROM usuarios WHERE username = ? AND password = ?", [username, password], (err, usuario) => {
    if (err) {
      console.error("Erro no login:", err)
      return res.render("login", { erro: "Erro no servidor" })
    }

if (!usuario) {
      return res.render("login", { erro: "Usuário ou senha inválidos" })
    }

req.session.usuario = {
      id: usuario.id,
      username: usuario.username,
      nome: usuario.nome,
      nivel: usuario.nivel,
    }

res.redirect("/")
  })
})

app.get("/logout", (req, res) => {
  req.session.destroy()
  res.redirect("/login")
})

// ============================================
// ROTAS - DASHBOARD
// ============================================

app.get("/", verificarAutenticacao, (req, res) => {
  const queries = {
    valorEstoque: new Promise((resolve, reject) => {
      db.get("SELECT SUM(estoque_atual * valor_unitario) as total FROM produtos", (err, row) => {
        if (err) reject(err)
        else resolve(row?.total || 0)
      })
    }),
    agulhasCriticas: new Promise((resolve, reject) => {
      db.get("SELECT COUNT(*) as total FROM agulhas WHERE quantidade_atual <= quantidade_minima", (err, row) => {
        if (err) reject(err)
        else resolve(row?.total || 0)
      })
    }),
    fiosProcesso: new Promise((resolve, reject) => {
      db.get('SELECT COUNT(*) as total FROM fios WHERE status = "PROCESSO"', (err, row) => {
        if (err) reject(err)
        else resolve(row?.total || 0)
      })
    }),
    totalVendido: new Promise((resolve, reject) => {
      db.get(
        `SELECT SUM(valor_total) as total FROM expedicao 
              WHERE status = 'CONCLUIDO' AND strftime('%Y-%m', data_expedicao) = strftime('%Y-%m', 'now')`,
        (err, row) => {
          if (err) reject(err)
          else resolve(row?.total || 0)
        },
      )
    }),
    distribuicaoEstoque: new Promise((resolve, reject) => {
      db.all(
        `
        SELECT 
          'Almoxarifado' as setor, 
          SUM(estoque_atual * valor_unitario) as valor 
        FROM produtos
        UNION ALL
        SELECT 
          'Fios' as setor, 
          COUNT(*) * 500 as valor 
        FROM fios WHERE status = 'PROCESSO'
        UNION ALL
        SELECT 
          'Segunda' as setor, 
          SUM(valor_estimado) as valor 
        FROM malhas_segunda WHERE status = 'ESTOQUE'
        UNION ALL
        SELECT 
          'Reciclados' as setor, 
          SUM(valor_venda) as valor 
        FROM reciclados WHERE status = 'ESTOQUE'
      `,
        (err, rows) => {
          if (err) reject(err)
          else resolve(rows)
        },
      )
    }),
    top5Produtos: new Promise((resolve, reject) => {
      db.all(
        `
        SELECT item_nome as nome, SUM(quantidade) as total
        FROM movimentacoes
        WHERE created_at >= date('now', '-30 days')
        GROUP BY item_nome
        ORDER BY total DESC
        LIMIT 5
      `,
        (err, rows) => {
          if (err) reject(err)
          else resolve(rows)
        },
      )
    }),
    alertas: new Promise((resolve, reject) => {
      db.all(
        `
        SELECT codigo, tipo, quantidade_atual, quantidade_minima
        FROM agulhas
        WHERE quantidade_atual <= quantidade_minima
        ORDER BY quantidade_atual ASC
        LIMIT 5
      `,
        (err, rows) => {
          if (err) reject(err)
          else resolve(rows)
        },
      )
    }),
  }

Promise.all([
    queries.valorEstoque,
    queries.agulhasCriticas,
    queries.fiosProcesso,
    queries.totalVendido,
    queries.distribuicaoEstoque,
    queries.top5Produtos,
    queries.alertas,
  ])
    .then(([valorEstoque, agulhasCriticas, fiosProcesso, totalVendido, distribuicao, top5, alertas]) => {
      res.render("dashboard", {
        pagina: "Dashboard",
        usuario: req.session.usuario,
        valorEstoque: formatarMoeda(valorEstoque),
        agulhasCriticas,
        fiosProcesso,
        totalVendido: formatarMoeda(totalVendido),
        distribuicaoEstoque: JSON.stringify(distribuicao),
        top5Produtos: JSON.stringify(top5),
        alertas,
        formatarMoeda,
      })
    })
    .catch((err) => {
      console.error("Erro ao carregar dashboard:", err)
      res.status(500).send("Erro ao carregar dashboard")
    })
})

// ============================================
// ROTAS - ALMOXARIFADO
// ============================================

app.get("/almoxarifado", verificarAutenticacao, (req, res) => {
  db.all(
    `
    SELECT p.*, l.nome as local_nome
    FROM produtos p
    LEFT JOIN locais l ON p.local_id = l.id
    ORDER BY p.nome
  `,
    (err, produtos) => {
      if (err) {
        console.error("Erro ao buscar produtos:", err)
        return res.status(500).send("Erro ao buscar produtos")
      }

db.all("SELECT * FROM locais ORDER BY nome", (err, locais) => {
        if (err) {
          console.error("Erro ao buscar locais:", err)
          return res.status(500).send("Erro ao buscar locais")
        }

res.render("almoxarifado", {
          pagina: "Almoxarifado Geral",
          usuario: req.session.usuario,
          produtos,
          locais,
          formatarMoeda,
        })
      })
    },
  )
})

app.post("/almoxarifado/criar", verificarAutenticacao, (req, res) => {
  const { codigo, nome, descricao, categoria, unidade, estoque_minimo, estoque_atual, valor_unitario, local_id } =
    req.body

db.run(
    `
    INSERT INTO produtos (codigo, nome, descricao, categoria, unidade, estoque_minimo, estoque_atual, valor_unitario, local_id)
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
  `,
    [
      codigo,
      nome,
      descricao,
      categoria,
      unidade,
      estoque_minimo || 0,
      estoque_atual || 0,
      valor_unitario || 0,
      local_id || null,
    ],
    (err) => {
      if (err) {
        console.error("Erro ao criar produto:", err)
        return res.status(500).send("Erro ao criar produto")
      }
      res.redirect("/almoxarifado")
    },
  )
})

app.post("/almoxarifado/editar/:id", verificarAutenticacao, (req, res) => {
  const { id } = req.params
  const { codigo, nome, descricao, categoria, unidade, estoque_minimo, valor_unitario, local_id } = req.body

db.run(
    `
    UPDATE produtos 
    SET codigo = ?, nome = ?, descricao = ?, categoria = ?, unidade = ?, estoque_minimo = ?, valor_unitario = ?, local_id = ?
    WHERE id = ?
  `,
    [codigo, nome, descricao, categoria, unidade, estoque_minimo, valor_unitario, local_id || null, id],
    (err) => {
      if (err) {
        console.error("Erro ao editar produto:", err)
        return res.status(500).send("Erro ao editar produto")
      }
      res.redirect("/almoxarifado")
    },
  )
})

app.post("/almoxarifado/deletar/:id", verificarAutenticacao, (req, res) => {
  const { id } = req.params

db.run("DELETE FROM produtos WHERE id = ?", [id], (err) => {
    if (err) {
      console.error("Erro ao deletar produto:", err)
      return res.status(500).send("Erro ao deletar produto")
    }
    res.redirect("/almoxarifado")
  })
})

// ============================================
// ROTAS - AGULHAS
// ============================================

app.get("/agulhas", verificarAutenticacao, (req, res) => {
  db.all("SELECT * FROM agulhas ORDER BY codigo", (err, agulhas) => {
    if (err) {
      console.error("Erro ao buscar agulhas:", err)
      return res.status(500).send("Erro ao buscar agulhas")
    }

res.render("agulhas", {
      pagina: "Controle de Agulhas",
      usuario: req.session.usuario,
      agulhas,
    })
  })
})

app.post("/agulhas/criar", verificarAutenticacao, (req, res) => {
  const { codigo, tipo, bitola, comprimento, quantidade_atual, quantidade_minima, localizacao, maquina, observacoes } =
    req.body

db.run(
    `
    INSERT INTO agulhas (codigo, tipo, bitola, comprimento, quantidade_atual, quantidade_minima, localizacao, maquina, observacoes)
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
  `,
    [
      codigo,
      tipo,
      bitola,
      comprimento,
      quantidade_atual || 0,
      quantidade_minima || 5,
      localizacao,
      maquina,
      observacoes,
    ],
    (err) => {
      if (err) {
        console.error("Erro ao criar agulha:", err)
        return res.status(500).send("Erro ao criar agulha")
      }
      res.redirect("/agulhas")
    },
  )
})

// ============================================
// ROTAS - FIOS
// ============================================

app.get("/fios", verificarAutenticacao, (req, res) => {
  db.all("SELECT * FROM fios ORDER BY created_at DESC", (err, fios) => {
    if (err) {
      console.error("Erro ao buscar fios:", err)
      return res.status(500).send("Erro ao buscar fios")
    }

res.render("fios", {
      pagina: "Fios & Saldos",
      usuario: req.session.usuario,
      fios,
      formatarDataBrasileira,
    })
  })
})

app.post("/fios/criar", verificarAutenticacao, (req, res) => {
  const { codigo, fornecedor, cor, lote, peso_bruto, peso_liquido, peso_cone, maquina, op, observacoes } = req.body

db.run(
    `
    INSERT INTO fios (codigo, fornecedor, cor, lote, peso_bruto, peso_liquido, peso_cone, peso_atual, maquina, op, data_entrada, observacoes)
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, date('now'), ?)
  `,
    [codigo, fornecedor, cor, lote, peso_bruto, peso_liquido, peso_cone, peso_liquido, maquina, op, observacoes],
    (err) => {
      if (err) {
        console.error("Erro ao criar fio:", err)
        return res.status(500).send("Erro ao criar fio")
      }
      res.redirect("/fios")
    },
  )
})

// ============================================
// ROTAS - QUALIDADE (MALHAS DE SEGUNDA)
// ============================================

app.get("/qualidade", verificarAutenticacao, (req, res) => {
  db.all("SELECT * FROM malhas_segunda ORDER BY created_at DESC", (err, malhas) => {
    if (err) {
      console.error("Erro ao buscar malhas:", err)
      return res.status(500).send("Erro ao buscar malhas")
    }

res.render("qualidade", {
      pagina: "Qualidade - Segunda",
      usuario: req.session.usuario,
      malhas,
      formatarMoeda,
      formatarDataBrasileira,
    })
  })
})

app.post("/qualidade/criar", verificarAutenticacao, (req, res) => {
  const { codigo, tipo_malha, cor, peso_kg, defeito, op, destino, valor_estimado, observacoes } = req.body

db.run(
    `
    INSERT INTO malhas_segunda (codigo, tipo_malha, cor, peso_kg, defeito, op, destino, data_entrada, valor_estimado, observacoes)
    VALUES (?, ?, ?, ?, ?, ?, ?, date('now'), ?, ?)
  `,
    [codigo, tipo_malha, cor, peso_kg, defeito, op, destino, valor_estimado || 0, observacoes],
    (err) => {
      if (err) {
        console.error("Erro ao criar malha:", err)
        return res.status(500).send("Erro ao criar malha")
      }
      res.redirect("/qualidade")
    },
  )
})

// ============================================
// ROTAS - EXPEDIÇÃO
// ============================================

app.get("/expedicao", verificarAutenticacao, (req, res) => {
  db.all("SELECT * FROM expedicao ORDER BY created_at DESC", (err, expedicoes) => {
    if (err) {
      console.error("Erro ao buscar expedições:", err)
      return res.status(500).send("Erro ao buscar expedições")
    }

res.render("expedicao", {
      pagina: "Expedição & Coletas",
      usuario: req.session.usuario,
      expedicoes,
      formatarMoeda,
      formatarDataBrasileira,
    })
  })
})

app.post("/expedicao/criar", verificarAutenticacao, (req, res) => {
  const {
    numero_nf,
    cliente,
    destino,
    cidade,
    estado,
    telefone,
    peso_total,
    valor_total,
    transportadora,
    observacoes,
  } = req.body

db.run(
    `
    INSERT INTO expedicao (numero_nf, cliente, destino, cidade, estado, telefone, peso_total, valor_total, transportadora, data_expedicao, observacoes)
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, date('now'), ?)
  `,
    [numero_nf, cliente, destino, cidade, estado, telefone, peso_total, valor_total, transportadora, observacoes],
    (err) => {
      if (err) {
        console.error("Erro ao criar expedição:", err)
        return res.status(500).send("Erro ao criar expedição")
      }
      res.redirect("/expedicao")
    },
  )
})

// ============================================
// ROTAS - RECICLADOS
// ============================================

app.get("/reciclados", verificarAutenticacao, (req, res) => {
  db.all("SELECT * FROM reciclados ORDER BY created_at DESC", (err, reciclados) => {
    if (err) {
      console.error("Erro ao buscar reciclados:", err)
      return res.status(500).send("Erro ao buscar reciclados")
    }

res.render("reciclados", {
      pagina: "Reciclados",
      usuario: req.session.usuario,
      reciclados,
      formatarMoeda,
      formatarDataBrasileira,
    })
  })
})

app.post("/reciclados/criar", verificarAutenticacao, (req, res) => {
  const { tipo_material, descricao, peso_kg, quantidade, origem, comprador, valor_venda, observacoes } = req.body

db.run(
    `
    INSERT INTO reciclados (tipo_material, descricao, peso_kg, quantidade, origem, data_coleta, comprador, valor_venda, observacoes)
    VALUES (?, ?, ?, ?, ?, date('now'), ?, ?, ?)
  `,
    [tipo_material, descricao, peso_kg, quantidade, origem, comprador, valor_venda || 0, observacoes],
    (err) => {
      if (err) {
        console.error("Erro ao criar reciclado:", err)
        return res.status(500).send("Erro ao criar reciclado")
      }
      res.redirect("/reciclados")
    },
  )
})

// ============================================
// INICIAR SERVIDOR
// ============================================

app.listen(PORT, () => {
  console.log("===========================================")
  console.log("🏭 TEXTILMANAGER ERP - SISTEMA TÊXTIL")
  console.log("===========================================")
  console.log(`✓ Servidor rodando na porta ${PORT}`)
  console.log(`✓ Acesse: http://localhost:${PORT}`)
  console.log(`✓ Login padrão: admin / admin`)
  console.log("===========================================")
})

// Fechar conexão ao encerrar
process.on("SIGINT", () => {
  db.close((err) => {
    if (err) console.error("Erro ao fechar banco:", err)
    else console.log("✓ Banco de dados fechado")
    process.exit(0)
  })
})
[V0_FILE]plaintext:file="views/layout.ejs" isEdit="true" isMerged="true"
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pagina %> - TextilManager ERP</title>
  
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  
  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
  
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  
  <style>
    :root {
      --sidebar-width: 260px;
      --primary-color: #667eea;
      --primary-dark: #5568d3;
      --success-color: #10b981;
      --danger-color: #ef4444;
      --warning-color: #f59e0b;
      --info-color: #3b82f6;
      --dark-color: #1e293b;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f1f5f9;
      overflow-x: hidden;
    }
    
    /* Sidebar Fixa */
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: var(--sidebar-width);
      height: 100vh;
      background: linear-gradient(180deg, var(--dark-color) 0%, #0f172a 100%);
      color: white;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    }
    
    .sidebar-header {
      padding: 1.5rem;
      background: rgba(255,255,255,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .sidebar-header h4 {
      margin: 0;
      font-size: 1.3rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .sidebar-header h4 i {
      font-size: 1.8rem;
      color: var(--primary-color);
    }
    
    .sidebar-nav {
      padding: 1rem 0;
    }
    
    .nav-item {
      margin: 0.25rem 0.75rem;
    }
    
    .nav-link {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.875rem 1rem;
      color: #cbd5e1;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-weight: 500;
    }
    
    .nav-link i {
      font-size: 1.3rem;
      width: 24px;
      text-align: center;
    }
    
    .nav-link:hover {
      background: rgba(102, 126, 234, 0.15);
      color: white;
      transform: translateX(4px);
    }
    
    .nav-link.active {
      background: var(--primary-color);
      color: white;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    .user-info {
      padding: 1rem 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: auto;
    }
    
    .user-info small {
      color: #94a3b8;
    }
    
    /* Main Content */
    .main-wrapper {
      margin-left: var(--sidebar-width);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .top-navbar {
      background: white;
      padding: 1rem 2rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .page-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--dark-color);
      margin: 0;
    }
    
    .main-content {
      padding: 2rem;
      flex: 1;
    }
    
    /* Cards */
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      background: white;
    }
    
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    
    .kpi-card {
      padding: 1.5rem;
      border-left: 4px solid;
    }
    
    .kpi-card.primary { border-left-color: var(--primary-color); }
    .kpi-card.success { border-left-color: var(--success-color); }
    .kpi-card.danger { border-left-color: var(--danger-color); }
    .kpi-card.warning { border-left-color: var(--warning-color); }
    
    .kpi-icon {
      font-size: 2.5rem;
      opacity: 0.2;
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .kpi-value {
      font-size: 2rem;
      font-weight: 700;
      margin: 0.5rem 0;
    }
    
    .kpi-label {
      font-size: 0.9rem;
      color: #64748b;
      font-weight: 500;
    }
    
    /* DataTables Customization */
    .dataTables_wrapper {
      padding: 1rem 0;
    }
    
    .table {
      font-size: 0.9rem;
    }
    
    .table thead th {
      background: #f8fafc;
      color: var(--dark-color);
      font-weight: 600;
      border-bottom: 2px solid #e2e8f0;
      padding: 1rem 0.75rem;
    }
    
    .table tbody tr:hover {
      background-color: #f8fafc;
    }
    
    /* Badges */
    .badge {
      padding: 0.4rem 0.8rem;
      font-weight: 600;
      font-size: 0.75rem;
    }
    
    .badge-ok { background-color: var(--success-color); }
    .badge-critico { background-color: var(--danger-color); }
    .badge-esgotado { background-color: #6b7280; }
    
    /* Buttons */
    .btn {
      border-radius: 8px;
      padding: 0.5rem 1rem;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    
    .btn-primary {
      background: var(--primary-color);
      border: none;
    }
    
    .btn-primary:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    .btn-sm {
      padding: 0.375rem 0.75rem;
      font-size: 0.875rem;
    }
    
    /* Alert Card */
    .alert-card {
      background: #fef2f2;
      border-left: 4px solid var(--danger-color);
      border-radius: 8px;
      padding: 1rem;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
      }
      
      .main-wrapper {
        margin-left: 0;
      }
    }
  </style>
</head>
<body>
  
  <div class="sidebar">
    <div class="sidebar-header">
      <h4>
        <i class="bi bi-building"></i>
        <span>TextilManager</span>
      </h4>
      <small class="text-muted">ERP Industrial</small>
    </div>
    
    <nav class="sidebar-nav">
      <ul class="list-unstyled">
        <li class="nav-item">
          <a href="/" class="nav-link <%= pagina === 'Dashboard' ? 'active' : '' %>">
            <i class="bi bi-speedometer2"></i>
            <span>Dashboard</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a href="/almoxarifado" class="nav-link <%= pagina === 'Almoxarifado Geral' ? 'active' : '' %>">
            <i class="bi bi-box-seam"></i>
            <span>Almoxarifado</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a href="/fios" class="nav-link <%= pagina === 'Fios & Saldos' ? 'active' : '' %>">
            <i class="bi bi-bezier2"></i>
            <span>Fios & Saldos</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a href="/agulhas" class="nav-link <%= pagina === 'Controle de Agulhas' ? 'active' : '' %>">
            <i class="bi bi-pin-angle"></i>
            <span>Agulhas</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a href="/qualidade" class="nav-link <%= pagina === 'Qualidade - Segunda' ? 'active' : '' %>">
            <i class="bi bi-clipboard-check"></i>
            <span>Qualidade (Segunda)</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a href="/expedicao" class="nav-link <%= pagina === 'Expedição & Coletas' ? 'active' : '' %>">
            <i class="bi bi-truck"></i>
            <span>Expedição & Coletas</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a href="/reciclados" class="nav-link <%= pagina === 'Reciclados' ? 'active' : '' %>">
            <i class="bi bi-recycle"></i>
            <span>Reciclados</span>
          </a>
        </li>
      </ul>
    </nav>
    
    <div class="user-info">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <strong><%= usuario.nome %></strong>
          <br>
          <small><%= usuario.nivel %></small>
        </div>
        <a href="/logout" class="btn btn-sm btn-outline-light" title="Sair">
          <i class="bi bi-box-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>

<div class="main-wrapper">
    
    <div class="top-navbar">
      <h1 class="page-title"><%= pagina %></h1>
      <div>
        <span class="text-muted">
          <i class="bi bi-calendar3"></i>
          <%= new Date().toLocaleDateString('pt-BR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) %>
        </span>
      </div>
    </div>

<div class="main-content">
      <%- body %>
    </div>
  </div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
  
  
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>
</body>
</html>
[V0_FILE]plaintext:file="views/index.ejs" isMerged="true"
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pagina %> - Sistema de Almoxarifado</title>
  
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  
  <style>
    :root {
      --primary-color: #0d6efd;
      --secondary-color: #6c757d;
      --success-color: #198754;
      --danger-color: #dc3545;
      --warning-color: #ffc107;
      --info-color: #0dcaf0;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f8f9fa;
    }
    
    .navbar-brand {
      font-weight: bold;
      font-size: 1.3rem;
    }
    
    .main-content {
      padding: 2rem 0;
      min-height: calc(100vh - 120px);
    }
    
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }
    
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .kpi-card {
      padding: 1.5rem;
    }
    
    .kpi-icon {
      font-size: 2.5rem;
      opacity: 0.8;
    }
    
    .table-hover tbody tr:hover {
      background-color: rgba(13, 110, 253, 0.05);
    }
    
    .badge-status {
      padding: 0.5rem 1rem;
      font-size: 0.9rem;
    }
    
    .alerta-critico {
      border-left: 4px solid var(--danger-color);
      background-color: #fff5f5;
    }
    
    .alerta-aviso {
      border-left: 4px solid var(--warning-color);
      background-color: #fffbf0;
    }
    
    footer {
      background-color: #212529;
      color: white;
      padding: 1.5rem 0;
      margin-top: 3rem;
    }
    
    .btn-action {
      padding: 0.375rem 0.75rem;
      margin: 0 0.2rem;
    }
    
    .page-header {
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid #e9ecef;
    }
  </style>
</head>
<body>
  
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">
        <i class="bi bi-box-seam"></i> Sistema de Almoxarifado
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="/">
              <i class="bi bi-speedometer2"></i> Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/salas">
              <i class="bi bi-building"></i> Salas/Locais
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/produtos">
              <i class="bi bi-box"></i> Produtos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/movimentacoes">
              <i class="bi bi-arrow-left-right"></i> Movimentações
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/relatorios">
              <i class="bi bi-file-earmark-text"></i> Relatórios
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<div class="container-fluid main-content">
    <div class="container-fluid">
      
      <div class="page-header">
        <h1><i class="bi bi-speedometer2"></i> Dashboard</h1>
        <p class="text-muted">Visão geral do almoxarifado</p>
      </div>

<div class="row g-4 mb-4">
        <div class="col-md-4">
          <div class="card kpi-card bg-primary text-white">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h6 class="text-uppercase">Valor Total em Estoque</h6>
                <h2 class="mb-0"><%= valorTotal %></h2>
              </div>
              <i class="bi bi-currency-dollar kpi-icon"></i>
            </div>
          </div>
        </div>

<div class="col-md-4">
          <div class="card kpi-card bg-success text-white">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h6 class="text-uppercase">Total de Produtos</h6>
                <h2 class="mb-0"><%= totalProdutos %></h2>
              </div>
              <i class="bi bi-box kpi-icon"></i>
            </div>
          </div>
        </div>

<div class="col-md-4">
          <div class="card kpi-card bg-danger text-white">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h6 class="text-uppercase">Alertas Críticos</h6>
                <h2 class="mb-0"><%= alertasCriticos %></h2>
              </div>
              <i class="bi bi-exclamation-triangle kpi-icon"></i>
            </div>
          </div>
        </div>
      </div>

<div class="row g-4 mb-4">
        <div class="col-md-6">
          <div class="card p-4">
            <h5 class="card-title mb-4"><i class="bi bi-bar-chart"></i> Top 5 Produtos com Menor Estoque</h5>
            <canvas id="chartMenorEstoque"></canvas>
          </div>
        </div>

<div class="col-md-6">
          <div class="card p-4">
            <h5 class="card-title mb-4"><i class="bi bi-pie-chart"></i> Distribuição de Valor por Sala</h5>
            <canvas id="chartDistribuicao"></canvas>
          </div>
        </div>
      </div>

<% if (produtosBaixoEstoque.length > 0) { %>
      <div class="row mb-4">
        <div class="col-12">
          <div class="card alerta-critico">
            <div class="card-body">
              <h5 class="card-title text-danger">
                <i class="bi bi-exclamation-triangle-fill"></i> Produtos com Estoque Baixo
              </h5>
              <p class="text-muted">Os produtos abaixo estão com estoque igual ou abaixo do mínimo definido:</p>
              
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Produto</th>
                      <th>Categoria</th>
                      <th>Localização</th>
                      <th>Estoque Atual</th>
                      <th>Estoque Mínimo</th>
                      <th>Valor Unit.</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% produtosBaixoEstoque.forEach(produto => { %>
                    <tr>
                      <td><strong><%= produto.nome %></strong></td>
                      <td><%= produto.categoria || '-' %></td>
                      <td><%= produto.sala_nome || 'Sem localização' %></td>
                      <td><span class="badge bg-danger"><%= produto.estoque_atual %></span></td>
                      <td><%= produto.estoque_minimo %></td>
                      <td><%= formatarMoeda(produto.valor_unitario) %></td>
                      <td>
                        <% if (produto.estoque_atual === 0) { %>
                          <span class="badge bg-danger">ESGOTADO</span>
                        <% } else if (produto.estoque_atual <= produto.estoque_minimo) { %>
                          <span class="badge bg-warning text-dark">CRÍTICO</span>
                        <% } %>
                      </td>
                    </tr>
                    <% }); %>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% } else { %>
      <div class="row mb-4">
        <div class="col-12">
          <div class="alert alert-success">
            <i class="bi bi-check-circle-fill"></i> Nenhum produto com estoque crítico no momento!
          </div>
        </div>
      </div>
      <% } %>
    </div>
  </div>

<footer class="text-center">
    <div class="container">
      <p class="mb-0">© 2026 Sistema de Controle de Almoxarifado | Desenvolvido com Node.js + Express + SQLite</p>
    </div>
  </footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Dados do backend
    const top5Data = <%- top5MenorEstoque %>;
    const distribuicaoData = <%- distribuicaoPorSala %>;

// Gráfico: Top 5 Produtos com Menor Estoque (Gráfico de Barras)
    const ctxMenor = document.getElementById('chartMenorEstoque');
    new Chart(ctxMenor, {
      type: 'bar',
      data: {
        labels: top5Data.map(p => p.nome),
        datasets: [{
          label: 'Estoque Atual',
          data: top5Data.map(p => p.estoque_atual),
          backgroundColor: 'rgba(220, 53, 69, 0.8)',
          borderColor: 'rgba(220, 53, 69, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              precision: 0
            }
          }
        }
      }
    });

// Gráfico: Distribuição de Valor por Sala (Gráfico de Pizza)
    const ctxDist = document.getElementById('chartDistribuicao');
    
    // Cores vibrantes para o gráfico de pizza
    const cores = [
      'rgba(13, 110, 253, 0.8)',
      'rgba(25, 135, 84, 0.8)',
      'rgba(255, 193, 7, 0.8)',
      'rgba(220, 53, 69, 0.8)',
      'rgba(13, 202, 240, 0.8)',
      'rgba(108, 117, 125, 0.8)'
    ];

new Chart(ctxDist, {
      type: 'pie',
      data: {
        labels: distribuicaoData.map(d => d.nome || 'Sem localização'),
        datasets: [{
          data: distribuicaoData.map(d => d.valor_total || 0),
          backgroundColor: cores,
          borderColor: '#fff',
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
          legend: {
            position: 'bottom'
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                let label = context.label || '';
                if (label) {
                  label += ': ';
                }
                label += new Intl.NumberFormat('pt-BR', {
                  style: 'currency',
                  currency: 'BRL'
                }).format(context.parsed);
                return label;
              }
            }
          }
        }
      }
    });
  </script>
</body>
</html>
[V0_FILE]plaintext:file="views/salas.ejs" isMerged="true"
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pagina %> - Sistema de Almoxarifado</title>
  
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  
  <style>
    :root {
      --primary-color: #0d6efd;
      --secondary-color: #6c757d;
      --success-color: #198754;
      --danger-color: #dc3545;
      --warning-color: #ffc107;
      --info-color: #0dcaf0;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f8f9fa;
    }
    
    .navbar-brand {
      font-weight: bold;
      font-size: 1.3rem;
    }
    
    .main-content {
      padding: 2rem 0;
      min-height: calc(100vh - 120px);
    }
    
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }
    
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .table-hover tbody tr:hover {
      background-color: rgba(13, 110, 253, 0.05);
    }
    
    .btn-action {
      padding: 0.375rem 0.75rem;
      margin: 0 0.2rem;
    }
    
    .page-header {
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid #e9ecef;
    }
    
    footer {
      background-color: #212529;
      color: white;
      padding: 1.5rem 0;
      margin-top: 3rem;
    }
  </style>
</head>
<body>
  
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">
        <i class="bi bi-box-seam"></i> Sistema de Almoxarifado
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">
              <i class="bi bi-speedometer2"></i> Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="/salas">
              <i class="bi bi-building"></i> Salas/Locais
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/produtos">
              <i class="bi bi-box"></i> Produtos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/movimentacoes">
              <i class="bi bi-arrow-left-right"></i> Movimentações
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/relatorios">
              <i class="bi bi-file-earmark-text"></i> Relatórios
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<div class="container-fluid main-content">
    <div class="container-fluid">
      
      <div class="page-header d-flex justify-content-between align-items-center">
        <div>
          <h1><i class="bi bi-building"></i> Salas/Locais</h1>
          <p class="text-muted">Gerencie os locais de armazenamento</p>
        </div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCriarSala">
          <i class="bi bi-plus-circle"></i> Nova Sala
        </button>
      </div>

<div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <% if (salas.length === 0) { %>
                <div class="text-center py-5">
                  <i class="bi bi-inbox" style="font-size: 4rem; opacity: 0.3;"></i>
                  <p class="text-muted mt-3">Nenhuma sala cadastrada ainda.</p>
                  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCriarSala">
                    <i class="bi bi-plus-circle"></i> Cadastrar Primeira Sala
                  </button>
                </div>
              <% } else { %>
                <div class="table-responsive">
                  <table class="table table-hover table-striped">
                    <thead class="table-primary">
                      <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Descrição</th>
                        <th>Data de Criação</th>
                        <th class="text-center">Ações</th>
                      </tr>
                    </thead>
                    <tbody>
                      <% salas.forEach(sala => { %>
                      <tr>
                        <td><strong>#<%= sala.id %></strong></td>
                        <td><i class="bi bi-building"></i> <%= sala.nome %></td>
                        <td><%= sala.descricao || '-' %></td>
                        <td><%= formatarDataBrasileira(sala.created_at) %></td>
                        <td class="text-center">
                          <button 
                            class="btn btn-sm btn-warning btn-action" 
                            onclick="editarSala(<%= sala.id %>, '<%= sala.nome %>', '<%= sala.descricao || '' %>')">
                            <i class="bi bi-pencil"></i> Editar
                          </button>
                          <button 
                            class="btn btn-sm btn-danger btn-action" 
                            onclick="confirmarDelete(<%= sala.id %>, '<%= sala.nome %>')">
                            <i class="bi bi-trash"></i> Deletar
                          </button>
                        </td>
                      </tr>
                      <% }); %>
                    </tbody>
                  </table>
                </div>
              <% } %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="modal fade" id="modalCriarSala" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"><i class="bi bi-plus-circle"></i> Nova Sala/Local</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <form action="/salas/criar" method="POST">
          <div class="modal-body">
            <div class="mb-3">
              <label for="nome" class="form-label">Nome da Sala *</label>
              <input type="text" class="form-control" id="nome" name="nome" required placeholder="Ex: Sala A, Estante 3">
            </div>
            <div class="mb-3">
              <label for="descricao" class="form-label">Descrição</label>
              <textarea class="form-control" id="descricao" name="descricao" rows="3" placeholder="Descrição opcional do local">

[V0_FILE]plaintext:file="views/produtos.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Produtos

Gerencie o catálogo de produtos

<% if (produtos.length === 0) { %>

<% if (busca) { %> Nenhum produto encontrado com o termo "<%= busca %>". <% } else { %> Nenhum produto cadastrado ainda. <% } %>

<% } else { %>

<% produtos.forEach(produto => { %> <% }); %>

ID	Nome	Categoria	Unidade	Localização	Estoque Atual	Estoque Mínimo	Valor Unit.	Status	Ações
#<%= produto.id %>	<%= produto.nome %>	<%= produto.categoria \|\| '-' %>	<%= produto.unidade %>	<%= produto.sala_nome \|\| 'Sem localização' %>	<% if (produto.estoque_atual === 0) { %> <%= produto.estoque_atual %> <% } else if (produto.estoque_atual <= produto.estoque_minimo) { %> <%= produto.estoque_atual %> <% } else { %> <%= produto.estoque_atual %> <% } %>	<%= produto.estoque_minimo %>	<%= formatarMoeda(produto.valor_unitario) %>	<% if (produto.estoque_atual === 0) { %> ESGOTADO <% } else if (produto.estoque_atual <= produto.estoque_minimo) { %> CRÍTICO <% } else { %> OK <% } %>

Total: <%= produtos.length %> produto(s) encontrado(s)

<% } %>

[V0_FILE]plaintext:file="views/movimentacoes.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Informações Importantes

Entrada: Use para registrar recebimento de fornecedores, devoluções ou ajustes positivos de estoque.
Saída: Use para registrar consumo interno, transferências ou ajustes negativos de estoque.
Validação: O sistema não permite saídas maiores que o estoque disponível.
Histórico: Todas as movimentações são registradas e podem ser consultadas na página de Relatórios.

[V0_FILE]plaintext:file="views/relatorios.ejs" isMerged="true" <%= pagina %> - Sistema de Almoxarifado

Filtros

<% if (movimentacoes.length === 0) { %>

Nenhuma movimentação registrada ainda.

Ir para Movimentações

<% } else { %>

<% movimentacoes.forEach(mov => { %> <% }); %>

ID	Data/Hora	Tipo	Produto	Quantidade	Detalhes	Ações
#<%= mov.id %>	<%= formatarDataBrasileira(mov.created_at) %>	<% if (mov.tipo === 'ENTRADA') { %> ENTRADA <% } else { %> SAÍDA <% } %>	<%= mov.produto_nome %>	<%= mov.quantidade %>	<% if (mov.tipo === 'ENTRADA') { %> <% if (mov.fornecedor) { %> Fornecedor: <%= mov.fornecedor %> <% } %> <% if (mov.numero_nf) { %> NF: <%= mov.numero_nf %> <% } %> <% if (mov.lote) { %> Lote: <%= mov.lote %> <% } %> <% } else { %> <% if (mov.solicitante) { %> Solicitante: <%= mov.solicitante %> <% } %> <% if (mov.destino) { %> Destino: <%= mov.destino %> <% } %> <% } %>

Exibindo <%= movimentacoes.length %> movimentação(ões) <% if (tipo) { %> do tipo <%= tipo %> <% } %>

<% } %>

<% if (erro) { %>

<%= erro %>

<% } %>

[V0_FILE]plaintext:file="views/dashboard.ejs" isEdit="true" isMerged="true" Dashboard - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Valor em Estoque

<%= valorEstoque %>

Agulhas Críticas

<%= agulhasCriticas %>

Fios em Processo

<%= fiosProcesso %>

Total Vendido (Mês)

<%= totalVendido %>

Distribuição de Estoque por Setor

Top 5 Produtos Mais Movimentados

Alertas de Estoque Crítico

<% if (alertas.length === 0) { %>

Nenhum alerta no momento. Tudo sob controle!

<% } else { %>

<% alertas.forEach(item => { %> <% }) %>

Código	Tipo	Qtd. Atual	Qtd. Mínima	Status
<%= item.codigo %>	<%= item.tipo %>	<%= item.quantidade_atual %>	<%= item.quantidade_minima %>	CRÍTICO

<% } %>

[V0_FILE]plaintext:file="views/almoxarifado.ejs" isEdit="true" isMerged="true" Almoxarifado - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Código	Nome	Categoria	Unidade	Estoque Atual	Estoque Mínimo	Valor Unit.	Local	Status	Ações
<%= produto.codigo \|\| '-' %>	<%= produto.nome %>	<%= produto.categoria \|\| '-' %>	<%= produto.unidade %>	<%= produto.estoque_atual %>	<%= produto.estoque_minimo %>	<%= formatarMoeda(produto.valor_unitario) %>	<%= produto.local_nome \|\| '-' %>	<%= statusTexto %>

[V0_FILE]plaintext:file="views/agulhas.ejs" isEdit="true" isMerged="true" Agulhas - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Código	Tipo	Bitola	Comprimento	Qtd. Atual	Qtd. Mínima	Localização	Máquina	Status
<%= agulha.codigo %>	<%= agulha.tipo %>	<%= agulha.bitola \|\| '-' %>	<%= agulha.comprimento \|\| '-' %>	<%= agulha.quantidade_atual %>	<%= agulha.quantidade_minima %>	<%= agulha.localizacao \|\| '-' %>	<%= agulha.maquina \|\| '-' %>	<%= statusTexto %>

[V0_FILE]plaintext:file="views/fios.ejs" isEdit="true" isMerged="true" Fios & Saldos - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Código	Fornecedor	Cor	Lote	Peso Atual	Máquina	OP	Status	Data Entrada
<%= fio.codigo %>	<%= fio.fornecedor \|\| '-' %>	<%= fio.cor \|\| '-' %>	<%= fio.lote \|\| '-' %>	<%= fio.peso_atual \|\| '-' %> kg	<%= fio.maquina \|\| '-' %>	<%= fio.op \|\| '-' %>	<%= statusTexto %>	<%= formatarDataBrasileira(fio.data_entrada) %>

[V0_FILE]plaintext:file="views/expedicao.ejs" isEdit="true" isMerged="true" Expedição - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

NF	Cliente	Cidade/Estado	Telefone	Peso (kg)	Valor	Transportadora	Status	Ações
<%= exp.numero_nf %>	<%= exp.cliente %>	<%= exp.cidade \|\| '-' %> / <%= exp.estado \|\| '-' %>	<%= exp.telefone \|\| '-' %>	<%= exp.peso_total \|\| '-' %>	<%= formatarMoeda(exp.valor_total) %>	<%= exp.transportadora \|\| '-' %>	<%= statusTexto %>	<% if (telefoneNumeros && exp.status === 'PENDENTE') { %> <% } %>

[V0_FILE]plaintext:file="views/qualidade.ejs" isEdit="true" isMerged="true" Qualidade - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Código	Tipo de Malha	Cor	Peso (kg)	Defeito	OP	Destino	Valor Estimado	Status
<%= malha.codigo \|\| '-' %>	<%= malha.tipo_malha \|\| '-' %>	<%= malha.cor \|\| '-' %>	<%= malha.peso_kg \|\| 0 %> kg	<%= malha.defeito \|\| '-' %>	<%= malha.op \|\| '-' %>	<%= malha.destino \|\| '-' %>	<%= formatarMoeda(malha.valor_estimado) %>	<%= statusTexto %>

[V0_FILE]plaintext:file="views/reciclados.ejs" isEdit="true" isMerged="true" Reciclados - TextilManager ERP

<%= usuario.nome %>
<%= usuario.nivel %>

Tipo de Material	Descrição	Peso (kg)	Quantidade	Origem	Comprador	Valor Venda	Status
<%= rec.tipo_material %>	<%= rec.descricao \|\| '-' %>	<%= rec.peso_kg \|\| '-' %> kg	<%= rec.quantidade \|\| '-' %>	<%= rec.origem \|\| '-' %>	<%= rec.comprador \|\| '-' %>	<%= formatarMoeda(rec.valor_venda) %>	<%= statusTexto %>

{/* Left side - Form */}

TextilManager

ERP Pro

Bem-vindo de volta!

Entre com suas credenciais para acessar o sistema.

Senha

Credenciais de teste:
admin@textilmanager.com / admin123

{/* Right side - Image */}

Gestão Têxtil Completa

Controle total do seu almoxarifado, fios, agulhas, qualidade e expedição em um único sistema.

100%

Responsivo

Módulos

24/7

Disponível

{/* Header */}

Dashboard

Visao geral do sistema TextilManager

{/* Main KPI Cards */}

{mainKpiCards.map((kpi, index) => (

{kpi.trend === "up" ? : }

{kpi.value}

{kpi.title}

{kpi.subtitle}

Ver detalhes

))}

{/* Secondary KPIs */} {secondaryKpis.map((kpi) => (

{kpi.value}

{kpi.label}

))} {/* Alerts Section */} {(criticalAlerts.length > 0 || warningAlerts.length > 0) && ( {/* Critical Alerts */} {criticalAlerts.length > 0 && (

Alertas Criticos ({criticalAlerts.length})

{criticalAlerts.slice(0, 6).map((alert: Record) => (

{alert.title as string}

{alert.message as string}

))}

)} {/* Warning Alerts */} {warningAlerts.length > 0 && (

Atencao ({warningAlerts.length})

{warningAlerts.slice(0, 8).map((alert: Record) => (

{alert.title as string}

{alert.message as string}

))}

)} )} {/* Charts Row */}

{/* Category Distribution */}

Distribuicao por Categoria

Nenhum dado disponível

)}

{/* Shipments by Status */}

Status das Expedicoes

{shipmentsByStatus.length > 0 ? ( {shipmentsByStatus.map((entry: Record, index: number) => ( ))} ) : (

Nenhum dado disponível

)}

{/* Tables Row */}

{/* Critical Products */}

Produtos com Estoque Critico

Ver todos

Codigo	Produto	Local	Qtd	Status
{product.code as string}	{product.name as string}	{((product.warehouse as Record)?.name as string) \|\| ((product.location as Record)?.name as string) \|\| "-"}	{product.quantity as number}	{status.status}
Nenhum produto com estoque critico

{/* Recent Activities Timeline */}

Atividades Recentes

{(activities || []).length > 0 ? ( (activities || []).slice(0, 10).map((activity: Record) => (

{activity.action as string} - {activity.entity as string}

{activity.entityName as string}

{((activity.user as Record)?.name as string) || "Sistema"} -{" "} {formatDateTime(activity.createdAt as string)}

)) ) : (

Nenhuma atividade recente

)}

{/* Shipments and Threads Row */}

{/* Latest Shipments */}

Ultimas Expedicoes

Ver todas

{latestShipments.length > 0 ? ( latestShipments.slice(0, 5).map((shipment: Record) => (

{shipment.code as string}

{((shipment.customer as Record)?.name as string) || "Sem cliente"}

{shipment.status as string}

)) ) : (

Nenhuma expedicao recente

)}

{/* Critical Threads */}

Fios com Peso Baixo

Ver todos

{criticalThreads.length > 0 ? ( criticalThreads.map((thread: Record) => (

{thread.name as string}

{thread.code as string}

{(thread.currentWeight as number).toFixed(2)} kg

Min: {(thread.minWeight as number).toFixed(2)} kg

)) ) : (

Nenhum fio com peso critico

)}

{/* Info Alerts (less prominent) */} {infoAlerts.length > 0 && (

Informacoes ({infoAlerts.length})

{infoAlerts.slice(0, 6).map((alert: Record) => ( {alert.message as string} ))}

)}

{title}

{children}

{/* Header */}

{/* Search */}

{/* Actions */}

{filters && (

{filters}

)} {onExport && (

)}

{/* Table */}

{columns.map((column) => ( ))} {actions && } {loading ? ( ) : sortedData.length === 0 ? ( ) : ( sortedData.map((item) => ( {columns.map((column) => ( ))} {actions && } )) )}

column.sortable && handleSort(column.key)} > {column.header} {column.sortable && ( )}	Ações
Carregando...
{emptyMessage}
{column.render ? column.render(item) : ((item as Record)[column.key] as React.ReactNode) \|\| "-"}	{actions(item)}

{/* Pagination */} {pagination && pagination.totalPages > 1 && (

Mostrando {(pagination.page - 1) * pagination.limit + 1} a{" "} {Math.min(pagination.page * pagination.limit, pagination.total)} de {pagination.total} registros

{pagination.page} / {pagination.totalPages}

)}

${stats.total}Total Produtos

${stats.ok}Estoque OK

${stats.critical}Critico

${stats.empty}Esgotado

R$ ${totalValue.toFixed(2)}Valor Total

Codigo	Produto	Categoria	Local	Qtd	Unid.	Min.	Custo Unit.	Valor Total	Status
${p.code}	${p.name}	${p.category?.name \|\| "-"}	${p.location?.name \|\| "-"}	${p.quantity}	${p.unit}	${p.minQuantity}	R$ ${p.costPrice?.toFixed(2) \|\| "0.00"}	R$ ${(p.costPrice * p.quantity)?.toFixed(2) \|\| "0.00"}	${status.status}
TOTAL GERAL:								R$ ${totalValue.toFixed(2)}