ajustes

prisma/schema.prisma

@@ -45,6 +45,7 @@ model Comanda {
   nomeCliente          String?       
   status               String        @default("ABERTA") // ABERTA, FECHADA, PAGA, CANCELADA
   total                Float         @default(0.0)
+  valorPago            Float         @default(0.0)
   desconto             Float         @default(0.0)
   acrescimo            Float         @default(0.0)
   taxaServico          Boolean       @default(false)
@@ -53,6 +54,7 @@ model Comanda {
   criadoEm             DateTime      @default(now())
   fechadoEm            DateTime?
   itens                ItemPedido[]
+  pagamentos           Pagamento[]
 }
 
 model ItemPedido {
@@ -67,3 +69,13 @@ model ItemPedido {
   comanda       Comanda  @relation(fields: [comandaId], references: [id])
   criadoEm      DateTime @default(now())
 }
+
+model Pagamento {
+  id             String   @id @default(uuid())
+  comandaId      String
+  comanda        Comanda  @relation(fields: [comandaId], references: [id])
+  valor          Float
+  formaPagamento String   // DINHEIRO, CARTAO_CREDITO, CARTAO_DEBITO, PIX
+  observacao     String?
+  criadoEm       DateTime @default(now())
+}

src/controllers/order.controller.ts

@@ -1,5 +1,5 @@
 import { FastifyRequest, FastifyReply } from 'fastify';
-import { createOrderSchema, addItemOrderSchema, updateItemStatusSchema, updateOrderSchema, payOrderSchema } from '../schemas/order.schema';
+import { createOrderSchema, addItemOrderSchema, updateItemStatusSchema, updateItemObservacaoSchema, updateOrderSchema, payOrderSchema, partialPaymentSchema } from '../schemas/order.schema';
 import * as orderService from '../services/order.service';
 import { z } from 'zod';
 
@@ -23,6 +23,23 @@ export async function listOrdersController(request: FastifyRequest, reply: Fasti
   return reply.send(orders);
 }
 
+export async function listPaymentsController(request: FastifyRequest, reply: FastifyReply) {
+  const querySchema = z.object({
+    dataInicio: z.string().optional(),
+    dataFim: z.string().optional(),
+  });
+
+  const query = querySchema.parse(request.query);
+  const filter: any = {};
+  if (query.dataInicio) filter.dataInicio = query.dataInicio;
+  if (query.dataFim) filter.dataFim = query.dataFim;
+
+  const payments = await orderService.listPayments(
+    (filter.dataInicio || filter.dataFim) ? filter : undefined
+  );
+  return reply.send(payments);
+}
+
 export async function createOrderController(request: FastifyRequest, reply: FastifyReply) {
   const data = createOrderSchema.parse(request.body);
   const order = await orderService.createOrder(data);
@@ -59,6 +76,17 @@ export async function updateItemStatusController(request: FastifyRequest, reply:
   return reply.send(item);
 }
 
+export async function updateItemObservacaoController(request: FastifyRequest, reply: FastifyReply) {
+  const { id } = z.object({ id: z.string().uuid() }).parse(request.params);
+  const data = updateItemObservacaoSchema.parse(request.body);
+  try {
+    const item = await orderService.updateItemObservacao(id, data);
+    return reply.send(item);
+  } catch (error: any) {
+    return reply.status(400).send({ error: error.message });
+  }
+}
+
 export async function payOrderController(request: FastifyRequest, reply: FastifyReply) {
   const { id } = z.object({ id: z.string().uuid() }).parse(request.params);
   const body = request.body && Object.keys(request.body as object).length > 0
@@ -72,6 +100,17 @@ export async function payOrderController(request: FastifyRequest, reply: Fastify
   }
 }
 
+export async function registerPaymentController(request: FastifyRequest, reply: FastifyReply) {
+  const { id } = z.object({ id: z.string().uuid() }).parse(request.params);
+  const data = partialPaymentSchema.parse(request.body);
+  try {
+    const pagamento = await orderService.registerPayment(id, data);
+    return reply.status(201).send(pagamento);
+  } catch (error: any) {
+    return reply.status(400).send({ error: error.message });
+  }
+}
+
 export async function updateOrderController(request: FastifyRequest, reply: FastifyReply) {
   const { id } = z.object({ id: z.string().uuid() }).parse(request.params);
   const data = updateOrderSchema.parse(request.body);

src/routes/order.routes.ts

@@ -6,6 +6,9 @@ export async function orderRoutes(app: FastifyInstance) {
   // Listagem geral (qualquer autenticado)
   app.get('/comandas', { preHandler: [authenticate] }, orderController.listOrdersController);
 
+  // Listagem de pagamentos (qualquer autenticado)
+  app.get('/pagamentos', { preHandler: [authenticate] }, orderController.listPaymentsController);
+
   // Comandas (Garçom, Caixa, Admin)
   app.post('/comandas', { preHandler: [requireRoles(['GARCOM', 'CAIXA', 'ADMIN'])] }, orderController.createOrderController);
   app.post('/comandas/:id/itens', { preHandler: [requireRoles(['GARCOM', 'CAIXA', 'ADMIN'])] }, orderController.addItemToOrderController);
@@ -13,11 +16,15 @@ export async function orderRoutes(app: FastifyInstance) {
   
   // Pagamento (Caixa, Admin)
   app.post('/comandas/:id/pagar', { preHandler: [requireRoles(['CAIXA', 'ADMIN'])] }, orderController.payOrderController);
+  app.post('/comandas/:id/pagamentos', { preHandler: [requireRoles(['CAIXA', 'ADMIN'])] }, orderController.registerPaymentController);
 
   // Painel Cozinha / Bar
   app.get('/painel/itens', { preHandler: [requireRoles(['COZINHA', 'BARMAN', 'ADMIN'])] }, orderController.listKitchenBarController);
   app.patch('/painel/itens/:id/status', { preHandler: [requireRoles(['COZINHA', 'BARMAN', 'ADMIN'])] }, orderController.updateItemStatusController);
 
+  // Editar observação de item (Garçom, Caixa, Admin)
+  app.patch('/comandas/itens/:id/observacao', { preHandler: [requireRoles(['GARCOM', 'CAIXA', 'ADMIN'])] }, orderController.updateItemObservacaoController);
+
   // Excluir item de comanda (apenas CAIXA e ADMIN)
   app.delete('/comandas/itens/:id', { preHandler: [requireRoles(['CAIXA', 'ADMIN'])] }, orderController.deleteItemFromOrderController);
 }

src/schemas/order.schema.ts

@@ -29,9 +29,25 @@ export const payOrderSchema = z.object({
   formaPagamento: z.enum(['DINHEIRO', 'CARTAO_CREDITO', 'CARTAO_DEBITO', 'PIX']),
 });
 
+export const partialPaymentSchema = z.object({
+  valor: z.number().min(0).optional(),
+  formaPagamento: z.enum(['DINHEIRO', 'CARTAO_CREDITO', 'CARTAO_DEBITO', 'PIX']),
+  observacao: z.string().optional(),
+  itemIds: z.array(z.string().uuid()).optional(),
+}).refine(
+  (data) => (data.itemIds && data.itemIds.length > 0) || (data.valor !== undefined && data.valor > 0),
+  { message: 'Informe um valor positivo ou selecione itens para pagamento' }
+);
+
 export type CreateOrderInput = z.infer<typeof createOrderSchema>;
 export type AddItemOrderInput = z.infer<typeof addItemOrderSchema>;
+export const updateItemObservacaoSchema = z.object({
+  observacao: z.string().optional(),
+});
+
 export type UpdateItemStatusInput = z.infer<typeof updateItemStatusSchema>;
+export type UpdateItemObservacaoInput = z.infer<typeof updateItemObservacaoSchema>;
 export type UpdateOrderInput = z.infer<typeof updateOrderSchema>;
 export type PayOrderInput = z.infer<typeof payOrderSchema>;
+export type PartialPaymentInput = z.infer<typeof partialPaymentSchema>;
 

src/services/order.service.ts

@@ -1,5 +1,5 @@
 import { prisma } from '../lib/prisma';
-import { CreateOrderInput, AddItemOrderInput, UpdateItemStatusInput, UpdateOrderInput, PayOrderInput } from '../schemas/order.schema';
+import { CreateOrderInput, AddItemOrderInput, UpdateItemStatusInput, UpdateItemObservacaoInput, UpdateOrderInput, PayOrderInput, PartialPaymentInput } from '../schemas/order.schema';
 
 export interface ListOrdersFilter {
   statuses?: string[];
@@ -7,6 +7,42 @@ export interface ListOrdersFilter {
   dataFim?: string;
 }
 
+export interface ListPaymentsFilter {
+  dataInicio?: string;
+  dataFim?: string;
+}
+
+export async function listPayments(filter?: ListPaymentsFilter) {
+  const where: any = {};
+
+  if (filter?.dataInicio || filter?.dataFim) {
+    where.criadoEm = {};
+    if (filter.dataInicio) {
+      const [y, m, d] = filter.dataInicio.split('-').map(Number);
+      where.criadoEm.gte = new Date(y, m - 1, d, 0, 0, 0, 0);
+    }
+    if (filter.dataFim) {
+      const [y, m, d] = filter.dataFim.split('-').map(Number);
+      where.criadoEm.lte = new Date(y, m - 1, d, 23, 59, 59, 999);
+    }
+  }
+
+  return prisma.pagamento.findMany({
+    where,
+    orderBy: { criadoEm: 'desc' },
+    include: {
+      comanda: {
+        select: {
+          id: true,
+          identificador: true,
+          nomeCliente: true,
+          status: true,
+        },
+      },
+    },
+  });
+}
+
 export async function listOrders(filter?: ListOrdersFilter) {
   const where: any = {};
 
@@ -30,7 +66,8 @@ export async function listOrders(filter?: ListOrdersFilter) {
     include: {
       itens: {
         include: { produto: true }
-      }
+      },
+      pagamentos: true,
     }
   });
 }
@@ -116,6 +153,28 @@ export async function updateItemStatus(itemId: string, data: UpdateItemStatusInp
   });
 }
 
+export async function updateItemObservacao(itemId: string, data: UpdateItemObservacaoInput) {
+  const item = await prisma.itemPedido.findUnique({
+    where: { id: itemId },
+    include: { comanda: true },
+  });
+
+  if (!item) {
+    throw new Error('Item do pedido não encontrado');
+  }
+
+  if (item.comanda.status !== 'ABERTA') {
+    throw new Error('Não é possível editar itens de uma comanda fechada/paga/cancelada');
+  }
+
+  return prisma.itemPedido.update({
+    where: { id: itemId },
+    data: {
+      observacao: data.observacao ?? null,
+    },
+  });
+}
+
 export async function payOrder(comandaId: string, data?: PayOrderInput) {
   const comanda = await prisma.comanda.findUnique({
     where: { id: comandaId },
@@ -128,15 +187,110 @@ export async function payOrder(comandaId: string, data?: PayOrderInput) {
   if (comanda.status !== 'ABERTA') {
     throw new Error('Comanda não está aberta para pagamento');
   }
-  
-  return prisma.comanda.update({
+
+  const totalFinal = calcularTotalFinal(comanda);
+  const restante = Math.max(totalFinal - comanda.valorPago, 0);
+
+  if (restante <= 0) {
+    throw new Error('Comanda já foi paga integralmente');
+  }
+
+  const [, comandaAtualizada] = await prisma.$transaction([
+    prisma.pagamento.create({
+      data: {
+        comandaId,
+        valor: restante,
+        formaPagamento: data?.formaPagamento ?? 'DINHEIRO',
+        observacao: 'Pagamento integral',
+      },
+    }),
+    prisma.comanda.update({
+      where: { id: comandaId },
+      data: {
+        status: 'PAGA',
+        fechadoEm: new Date(),
+        formaPagamento: data?.formaPagamento,
+        valorPago: totalFinal,
+      },
+    }),
+  ]);
+
+  return comandaAtualizada;
+}
+
+function calcularTotalFinal(comanda: { total: number; desconto: number; acrescimo: number; taxaServico: boolean }): number {
+  let total = comanda.total || 0;
+  total -= (comanda.desconto || 0);
+  total += (comanda.acrescimo || 0);
+  if (comanda.taxaServico) total += total * 0.10;
+  return Math.max(total, 0);
+}
+
+export async function registerPayment(comandaId: string, data: PartialPaymentInput) {
+  const comanda = await prisma.comanda.findUnique({
     where: { id: comandaId },
-    data: {
-      status: 'PAGA',
-      fechadoEm: new Date(),
-      formaPagamento: data?.formaPagamento,
-    },
+    include: { itens: true },
   });
+
+  if (!comanda) {
+    throw new Error('Comanda não encontrada');
+  }
+
+  if (comanda.status === 'PAGA') {
+    throw new Error('Comanda já foi paga integralmente');
+  }
+
+  if (comanda.status === 'CANCELADA') {
+    throw new Error('Não é possível pagar uma comanda cancelada');
+  }
+
+  const totalFinal = calcularTotalFinal(comanda);
+  const restante = Math.max(totalFinal - comanda.valorPago, 0);
+
+  if (restante <= 0) {
+    throw new Error('Comanda já foi paga integralmente');
+  }
+
+  let valorPagamento = data.valor ?? 0;
+
+  if (data.itemIds && data.itemIds.length > 0) {
+    const itensSelecionados = comanda.itens.filter(i => data.itemIds!.includes(i.id));
+    if (itensSelecionados.length === 0) {
+      throw new Error('Nenhum item válido selecionado');
+    }
+    valorPagamento = itensSelecionados.reduce((acc, i) => acc + i.precoUnitario * i.quantidade, 0);
+  }
+
+  if (!valorPagamento || valorPagamento <= 0) {
+    throw new Error('Valor do pagamento deve ser maior que zero');
+  }
+
+  if (valorPagamento > restante) {
+    throw new Error(`Valor excede o restante. Disponível: R$ ${restante.toFixed(2)}`);
+  }
+
+  const novoValorPago = comanda.valorPago + valorPagamento;
+  const totalmentePago = novoValorPago >= totalFinal;
+
+  const pagamento = await prisma.$transaction([
+    prisma.pagamento.create({
+      data: {
+        comandaId,
+        valor: valorPagamento,
+        formaPagamento: data.formaPagamento,
+        observacao: data.observacao ?? null,
+      },
+    }),
+    prisma.comanda.update({
+      where: { id: comandaId },
+      data: {
+        valorPago: novoValorPago,
+        ...(totalmentePago ? { status: 'PAGA', fechadoEm: new Date() } : {}),
+      },
+    }),
+  ]);
+
+  return pagamento[0];
 }
 
 export async function updateOrder(comandaId: string, data: UpdateOrderInput) {
@@ -168,7 +322,8 @@ export async function updateOrder(comandaId: string, data: UpdateOrderInput) {
     include: {
       itens: {
         include: { produto: true }
-      }
+      },
+      pagamentos: true,
     }
   });
 }

web/src/main.ts

@@ -9,9 +9,9 @@ import { renderDashboard } from './views/dashboard';
 
 const app = document.getElementById('app')!;
 
-export function navigateTo(path: string) {
+export async function navigateTo(path: string) {
   window.history.pushState({}, '', path);
-  router();
+  await router();
 }
 
 (window as any).navigateTo = navigateTo;

web/src/style.css

@@ -803,6 +803,24 @@ tbody td {
     white-space: nowrap;
     text-align: right;
   }
+  #detalhes-itens-tbody td.item-obs .item-obs-editable {
+    cursor: pointer;
+    display: inline-block;
+    padding: 0.15rem 0.3rem;
+    border-radius: 4px;
+    border: 1px dashed transparent;
+    transition: border-color 0.15s, background 0.15s;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #detalhes-itens-tbody td.item-obs .item-obs-editable:hover {
+    border-color: var(--accent-primary);
+    background: var(--bg-secondary);
+  }
+  #detalhes-itens-tbody td.item-obs .obs-inline-input {
+    width: 100%;
+  }
 
   /* Line 3 — status + actions */
   #detalhes-itens-tbody td.item-status { text-align: left; }
@@ -1008,6 +1026,16 @@ tbody td {
   margin-top: 0.25rem;
 }
 
+#pag-itens-list label:hover {
+  background: var(--bg-secondary);
+  border-radius: 4px;
+}
+#pag-itens-list input[type="checkbox"] {
+  accent-color: var(--accent-primary);
+  width: 16px;
+  height: 16px;
+}
+
 
 @media (max-width: 480px) {
   h1 { font-size: 1.5rem; }

web/src/views/checkout.ts

@@ -1,14 +1,30 @@
 import { api } from '../api';
-import { renderNavbar, toast, formatBRL } from '../utils';
+import { renderNavbar, formatBRL } from '../utils';
 
-const FORMAS_PAGAMENTO = [
-  { value: 'DINHEIRO', label: '💵 Dinheiro' },
-  { value: 'CARTAO_CREDITO', label: '💳 Cartão Crédito' },
-  { value: 'CARTAO_DEBITO', label: '💳 Cartão Débito' },
-  { value: 'PIX', label: '📱 PIX' },
-];
+const FORMAS_PAGAMENTO_LABEL: Record<string, string> = {
+  DINHEIRO: '💵 Dinheiro',
+  CARTAO_CREDITO: '💳 Cartão Crédito',
+  CARTAO_DEBITO: '💳 Cartão Débito',
+  PIX: '📱 PIX',
+};
+
+function toLocalDateStr(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+function getDefaultDateRange(): { inicio: string; fim: string } {
+  const now = new Date();
+  const fim = toLocalDateStr(now);
+  const inicio = toLocalDateStr(new Date(now.getTime() - 12 * 60 * 60 * 1000));
+  return { inicio, fim };
+}
 
 export async function renderCheckout(container: HTMLElement) {
+  const { inicio, fim } = getDefaultDateRange();
+
   container.innerHTML = `
     ${renderNavbar('/checkout')}
     <div class="container animate-fade-in">
@@ -16,160 +32,111 @@ export async function renderCheckout(container: HTMLElement) {
         <h1>Caixa / Checkout 💳</h1>
       </div>
 
-      <div class="glass-panel" style="max-width:500px;margin-bottom:2rem;">
-        <h3>Buscar Comanda</h3>
-        <div style="display:flex;gap:0.75rem;margin-top:1rem;flex-wrap:wrap;">
-          <input type="text" id="search-input" class="form-control" style="flex:1;min-width:180px;" placeholder="Identificador (ex: Mesa 5)">
-          <button class="btn" id="btn-buscar" style="white-space:nowrap;">Buscar</button>
+      <div class="glass-panel" style="margin-bottom:1.5rem;">
+        <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+          <label style="color:var(--text-secondary);font-size:0.875rem;font-weight:600;">Período:</label>
+          <div style="display:flex;align-items:center;gap:0.4rem;">
+            <label style="font-size:0.8rem;color:var(--text-secondary);">De</label>
+            <input type="date" id="checkout-data-inicio" class="form-control" value="${inicio}" style="font-size:0.85rem;">
+          </div>
+          <div style="display:flex;align-items:center;gap:0.4rem;">
+            <label style="font-size:0.8rem;color:var(--text-secondary);">Até</label>
+            <input type="date" id="checkout-data-fim" class="form-control" value="${fim}" style="font-size:0.85rem;">
+          </div>
+          <button class="btn btn-sm" id="checkout-btn-filtrar">Filtrar</button>
+          <button class="btn btn-sm btn-secondary" id="checkout-btn-limpar" style="color:var(--text-secondary);">Últimas 12h</button>
         </div>
       </div>
 
-      <div id="checkout-result"></div>
+      <div id="checkout-pagamentos-total" style="margin-bottom:0.75rem;"></div>
+      <div id="checkout-pagamentos-lista">
+        <p class="card-subtitle">Carregando pagamentos...</p>
+      </div>
     </div>
   `;
 
-  document.getElementById('btn-buscar')?.addEventListener('click', searchComanda);
-  document.getElementById('search-input')?.addEventListener('keydown', (e) => {
-    if ((e as KeyboardEvent).key === 'Enter') searchComanda();
+  document.getElementById('checkout-btn-filtrar')?.addEventListener('click', loadPagamentos);
+  document.getElementById('checkout-btn-limpar')?.addEventListener('click', () => {
+    const range = getDefaultDateRange();
+    (document.getElementById('checkout-data-inicio') as HTMLInputElement).value = range.inicio;
+    (document.getElementById('checkout-data-fim') as HTMLInputElement).value = range.fim;
+    loadPagamentos();
   });
+
+  await loadPagamentos();
 }
 
-function calcularTotalFinal(c: any): number {
-  let total = c.total || 0;
-  total -= (c.desconto || 0);
-  total += (c.acrescimo || 0);
-  if (c.taxaServico) total += total * 0.10;
-  return Math.max(total, 0);
-}
+async function loadPagamentos() {
+  const dataInicio = (document.getElementById('checkout-data-inicio') as HTMLInputElement).value;
+  const dataFim = (document.getElementById('checkout-data-fim') as HTMLInputElement).value;
+  const lista = document.getElementById('checkout-pagamentos-lista')!;
+  const totalEl = document.getElementById('checkout-pagamentos-total')!;
 
-async function searchComanda() {
-  const query = (document.getElementById('search-input') as HTMLInputElement).value.trim();
-  const result = document.getElementById('checkout-result')!;
+  lista.innerHTML = `<p class="card-subtitle">Carregando...</p>`;
 
-  if (!query) { toast('Digite um identificador para buscar', 'error'); return; }
-
-  result.innerHTML = `<p class="card-subtitle">Buscando...</p>`;
   try {
-    const all = await api.get('/comandas');
-    const found: any[] = all.filter((c: any) =>
-      c.identificador.toLowerCase().includes(query.toLowerCase()) && c.status === 'ABERTA'
-    );
+    const qs = new URLSearchParams();
+    if (dataInicio) qs.set('dataInicio', dataInicio);
+    if (dataFim) qs.set('dataFim', dataFim);
+    const query = qs.toString();
+    const pagamentos = await api.get(`/pagamentos${query ? '?' + query : ''}`);
 
-    if (!found.length) {
-      result.innerHTML = `<p class="card-subtitle">Nenhuma comanda ABERTA encontrada para "<strong>${query}</strong>".</p>`;
+    if (!pagamentos.length) {
+      lista.innerHTML = `<p class="card-subtitle" style="text-align:center;margin-top:2rem;">Nenhum pagamento registrado no período.</p>`;
+      totalEl.innerHTML = '';
       return;
     }
 
-    result.innerHTML = found.map((c: any) => buildComandaCard(c)).join('');
-
-    document.querySelectorAll('.btn-pay').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        const id = (btn as HTMLElement).dataset.id!;
-        const ident = (btn as HTMLElement).dataset.ident!;
-        const total = parseFloat((btn as HTMLElement).dataset.total!);
-        const forma = (document.getElementById(`pagamento-${id}`) as HTMLSelectElement)?.value;
-
-        if (!forma) {
-          toast('Selecione a forma de pagamento', 'error');
-          return;
-        }
-
-        if (!confirm(`Confirmar pagamento de ${formatBRL(total)} para "${ident}" via ${forma.replace('_', ' ')}?`)) return;
-        try {
-          await api.post(`/comandas/${id}/pagar`, { formaPagamento: forma });
-          toast(`Comanda "${ident}" fechada com sucesso!`, 'success');
-          result.innerHTML = `
-            <div class="glass-panel" style="max-width:500px;text-align:center;">
-              <p style="font-size:3rem;margin-bottom:1rem;">✅</p>
-              <h2 style="color:var(--success)">Pagamento Realizado!</h2>
-              <p class="card-subtitle">Comanda "${ident}" foi fechada.</p>
-            </div>`;
-        } catch (err: any) {
-          toast(err.message, 'error');
-        }
-      });
-    });
-  } catch (err: any) {
-    result.innerHTML = `<p style="color:var(--accent-primary)">Erro: ${err.message}</p>`;
-  }
-}
-
-function buildComandaCard(c: any): string {
-  const itens = c.itens ?? [];
-  const itensHtml = itens.length
-    ? itens.map((i: any) => `
-        <tr>
-          <td data-label="Produto">${i.produto?.nome ?? '—'}</td>
-          <td data-label="Qtd" style="text-align:center;">${i.quantidade}</td>
-          <td data-label="Unitário" style="text-align:right;">${formatBRL(i.precoUnitario)}</td>
-          <td data-label="Subtotal" style="text-align:right;">${formatBRL(i.precoUnitario * i.quantidade)}</td>
-          <td data-label="Status"><span class="badge badge-${i.status === 'ENTREGUE' ? 'success' : 'warning'}">${i.status}</span></td>
-        </tr>
-      `).join('')
-    : `<tr><td colspan="5" style="text-align:center;color:var(--text-secondary);">Nenhum item ainda</td></tr>`;
-
-  const totalFinal = calcularTotalFinal(c);
-  const desconto = c.desconto || 0;
-  const acrescimo = c.acrescimo || 0;
-
-  return `
-    <div class="glass-panel" style="max-width:700px;margin-bottom:2rem;">
-      <div class="page-header" style="margin-bottom:1.5rem;">
-        <div>
-          <h2 style="margin:0;">${c.identificador}</h2>
-          ${c.nomeCliente ? `<p class="card-subtitle" style="margin:0.25rem 0 0;">${c.nomeCliente}</p>` : ''}
-        </div>
-        <span class="badge status-${c.status.toLowerCase()}">${c.status}</span>
+    const totalGeral = pagamentos.reduce((acc: number, p: any) => acc + p.valor, 0);
+    totalEl.innerHTML = `
+      <div style="display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary);border-radius:8px;padding:0.75rem 1rem;">
+        <span style="font-size:0.9rem;color:var(--text-secondary);">${pagamentos.length} pagamento(s) encontrado(s)</span>
+        <span style="font-size:1.1rem;font-weight:700;color:var(--success);">Total: ${formatBRL(totalGeral)}</span>
       </div>
+    `;
 
-      <div class="table-wrap" style="margin-bottom:1.5rem;">
+    lista.innerHTML = `
+      <div class="table-wrap">
         <table>
           <thead>
             <tr>
-              <th>Produto</th>
-              <th style="text-align:center;">Qtd</th>
-              <th style="text-align:right;">Unitário</th>
-              <th style="text-align:right;">Subtotal</th>
-              <th>Status</th>
+              <th>Data / Hora</th>
+              <th>Comanda</th>
+              <th>Cliente</th>
+              <th>Forma de Pagamento</th>
+              <th style="text-align:right;">Valor</th>
+              <th>Obs</th>
             </tr>
           </thead>
-          <tbody>${itensHtml}</tbody>
+          <tbody>
+            ${pagamentos.map((p: any) => `
+              <tr>
+                <td data-label="Data" style="white-space:nowrap;">${new Date(p.criadoEm).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })}</td>
+                <td data-label="Comanda">
+                  <a href="#" class="checkout-link-comanda" data-comanda-id="${p.comanda.id}" style="color:var(--accent-primary);text-decoration:none;font-weight:600;">
+                    ${p.comanda.identificador}
+                  </a>
+                  <span class="badge status-${p.comanda.status.toLowerCase()}" style="font-size:0.65rem;margin-left:0.3rem;">${p.comanda.status}</span>
+                </td>
+                <td data-label="Cliente" style="color:var(--text-secondary);">${p.comanda.nomeCliente ?? '—'}</td>
+                <td data-label="Pagamento">${FORMAS_PAGAMENTO_LABEL[p.formaPagamento] ?? p.formaPagamento}</td>
+                <td data-label="Valor" style="text-align:right;font-weight:700;color:var(--success);">${formatBRL(p.valor)}</td>
+                <td data-label="Obs" style="color:var(--text-secondary);font-style:italic;font-size:0.8rem;">${p.observacao ?? '—'}</td>
+              </tr>
+            `).join('')}
+          </tbody>
         </table>
       </div>
+    `;
 
-      <div style="background:var(--bg-secondary);border-radius:8px;padding:0.75rem 1rem;font-size:0.85rem;margin-bottom:1rem;">
-        <div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;">
-          <span style="color:var(--text-secondary);">Subtotal:</span>
-          <span>${formatBRL(c.total || 0)}</span>
-        </div>
-        ${desconto > 0 ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;color:var(--warning);">
-          <span>Desconto:</span><span>-${formatBRL(desconto)}</span>
-        </div>` : ''}
-        ${acrescimo > 0 ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;color:var(--accent-secondary);">
-          <span>Acréscimo:</span><span>+${formatBRL(acrescimo)}</span>
-        </div>` : ''}
-        ${c.taxaServico ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;color:var(--text-secondary);">
-          <span>Taxa Serviço (10%):</span><span>+${formatBRL((c.total - desconto + acrescimo) * 0.10)}</span>
-        </div>` : ''}
-      </div>
-
-      <div class="total-bar">
-        <span style="color:var(--text-secondary);font-size:1rem;font-weight:500;">Total a Pagar</span>
-        <span class="total-value">${formatBRL(totalFinal)}</span>
-      </div>
-
-      ${c.status === 'ABERTA' ? `
-        <div class="form-group" style="margin-top:1.25rem;margin-bottom:0.75rem;">
-          <label>Forma de Pagamento</label>
-          <select id="pagamento-${c.id}" class="form-control">
-            ${FORMAS_PAGAMENTO.map(fp => `<option value="${fp.value}">${fp.label}</option>`).join('')}
-          </select>
-        </div>
-        <button class="btn btn-success btn-pay" style="width:100%;font-size:1.1rem;"
-          data-id="${c.id}" data-ident="${c.identificador}" data-total="${totalFinal}">
-          💳 Finalizar Pagamento
-        </button>
-      ` : ''}
-    </div>
-  `;
+    lista.querySelectorAll('.checkout-link-comanda').forEach(link => {
+      link.addEventListener('click', async (e) => {
+        e.preventDefault();
+        const comandaId = (link as HTMLElement).dataset.comandaId!;
+        await (window as any).navigateTo('/orders#' + comandaId);
+      });
+    });
+  } catch (err: any) {
+    lista.innerHTML = `<p style="color:var(--accent-primary)">Erro: ${err.message}</p>`;
+  }
 }

web/src/views/kitchen.ts

@@ -1,12 +1,13 @@
 import { api } from '../api';
 import { renderNavbar, toast } from '../utils';
 
-let previousItemIds: Set<string> = new Set<string>();
+let previousItemIdsByStatus: Map<string, Set<string>> = new Map();
 let audioCtx: AudioContext | null = null;
 
 function playNotificationSound() {
   try {
     if (!audioCtx) audioCtx = new AudioContext();
+    if (audioCtx.state === 'suspended') audioCtx.resume();
     const osc = audioCtx.createOscillator();
     const gain = audioCtx.createGain();
     osc.connect(gain);
@@ -69,14 +70,15 @@ export async function renderKitchen(container: HTMLElement) {
 
       const currentIds = new Set<string>(items.map((i: any) => i.id));
 
-      if (previousItemIds.size > 0) {
-        const newItems = items.filter((i: any) => !previousItemIds.has(i.id));
+      const previousIds = previousItemIdsByStatus.get(currentStatus);
+      if (previousIds && previousIds.size > 0) {
+        const newItems = items.filter((i: any) => !previousIds.has(i.id));
         if (newItems.length > 0) {
           playNotificationSound();
           toast(`${newItems.length} novo(s) pedido(s) recebido(s)!`, 'success');
         }
       }
-      previousItemIds = currentIds;
+      previousItemIdsByStatus.set(currentStatus, currentIds);
 
       if (!items.length) {
         grid.innerHTML = `<p class="card-subtitle" style="grid-column:1/-1;text-align:center;padding:3rem 0;">
@@ -108,7 +110,7 @@ export async function renderKitchen(container: HTMLElement) {
               Pedido às ${new Date(item.criadoEm).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
             </p>
             ${action.label ? `
-              <button class="btn" style="width:100%;" onclick="window.advanceStatus('${item.id}','${action.next}')">
+              <button class="btn" style="width:100%;" data-action="advance" data-item-id="${item.id}" data-next-status="${action.next}">
                 ${action.label}
               </button>
             ` : `<p class="card-subtitle" style="text-align:center;">✅ Entregue</p>`}
@@ -159,7 +161,12 @@ export async function renderKitchen(container: HTMLElement) {
     else stopAutoRefresh();
   });
 
-  (window as any).advanceStatus = async (id: string, status: string) => {
+  // Event delegation for advance buttons
+  document.getElementById('items-grid')?.addEventListener('click', async (e) => {
+    const btn = (e.target as HTMLElement).closest('[data-action="advance"]') as HTMLElement | null;
+    if (!btn) return;
+    const id = btn.dataset.itemId!;
+    const status = btn.dataset.nextStatus!;
     try {
       await api.patch(`/painel/itens/${id}/status`, { status });
       toast('Status atualizado!', 'success');
@@ -167,12 +174,26 @@ export async function renderKitchen(container: HTMLElement) {
     } catch (err: any) {
       toast(err.message, 'error');
     }
+  });
+
+  // Pause auto-refresh when tab is hidden
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      stopAutoRefresh();
+    } else {
+      const checkbox = document.getElementById('auto-refresh-toggle') as HTMLInputElement | null;
+      if (checkbox?.checked) startAutoRefresh();
+    }
   };
+  document.addEventListener('visibilitychange', handleVisibilityChange);
 
   // Cleanup on navigation
   const cleanup = () => {
     stopAutoRefresh();
-    previousItemIds.clear();
+    previousItemIdsByStatus.clear();
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
+    audioCtx?.close();
+    audioCtx = null;
   };
   window.addEventListener('popstate', cleanup);
 

web/src/views/orders.ts

@@ -196,10 +196,72 @@ export async function renderOrders(container: HTMLElement) {
           </div>
         </div>
       </div>
+
+      <!-- Modal Pagamento Parcial -->
+      <div id="modal-pagamento-parcial" class="modal-overlay" style="display:none;">
+        <div class="modal" style="max-width: 500px;">
+          <div class="modal-header">
+            <h3>Receber Pagamento</h3>
+            <button class="btn-icon" id="modal-pagamento-close">✕</button>
+          </div>
+          <input type="hidden" id="pagamento-comanda-id">
+          <div id="pagamento-restante-info" style="background:var(--bg-secondary);border-radius:8px;padding:0.75rem 1rem;margin-bottom:1rem;font-size:0.9rem;"></div>
+
+          <div class="tabs" style="margin-bottom:1rem;">
+            <button class="tab-btn active" data-pagtab="itens">Selecionar Itens</button>
+            <button class="tab-btn" data-pagtab="fixo">Valor Fixo</button>
+          </div>
+
+          <!-- Tab: Selecionar Itens -->
+          <div id="pagtab-itens">
+            <div style="max-height:200px;overflow-y:auto;margin-bottom:1rem;">
+              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;">
+                <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;font-size:0.85rem;">
+                  <input type="checkbox" id="pag-select-all"> Selecionar todos
+                </label>
+                <span id="pag-itens-valor" style="font-weight:600;color:var(--accent-primary);font-size:0.9rem;">R$ 0,00</span>
+              </div>
+              <div id="pag-itens-list"></div>
+            </div>
+          </div>
+
+          <!-- Tab: Valor Fixo -->
+          <div id="pagtab-fixo" style="display:none;">
+            <div class="form-group">
+              <label>Valor (R$)</label>
+              <input type="number" id="pag-valor-fixo" class="form-control" step="0.01" min="0.01" placeholder="0,00">
+            </div>
+          </div>
+
+          <div class="form-group" style="margin-top:0.75rem;">
+            <label>Forma de Pagamento</label>
+            <select id="pag-forma" class="form-control">
+              ${FORMAS_PAGAMENTO.map(fp => `<option value="${fp.value}">${fp.label}</option>`).join('')}
+            </select>
+          </div>
+          <div class="form-group">
+            <label>Observação (opcional)</label>
+            <input type="text" id="pag-obs" class="form-control" placeholder="Ex: pagamento referente à mesa 5...">
+          </div>
+
+          <button type="button" class="btn btn-success" style="width:100%;margin-top:0.5rem;" id="btn-confirmar-pagamento">
+            💳 Confirmar Pagamento
+          </button>
+        </div>
+      </div>
   `;
 
   await loadComandas({ status: 'ABERTA,FECHADA' });
   bindOrderEvents();
+
+  const hash = window.location.hash.slice(1);
+  if (hash) {
+    await loadComandas({});
+    setTimeout(() => {
+      (window as any).openDetails(hash);
+      window.history.replaceState({}, '', '/orders');
+    }, 50);
+  }
 }
 
 function calcularTotalFinal(c: any): number {
@@ -434,6 +496,71 @@ function bindOrderEvents() {
     }, 300);
   });
 
+  // Modal Pagamento Parcial - close
+  document.getElementById('modal-pagamento-close')?.addEventListener('click', () => {
+    (document.getElementById('modal-pagamento-parcial') as HTMLElement).style.display = 'none';
+  });
+
+  // Modal Pagamento Parcial - tab switching
+  document.querySelectorAll('[data-pagtab]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('[data-pagtab]').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const tab = (btn as HTMLElement).dataset.pagtab;
+      (document.getElementById('pagtab-itens') as HTMLElement).style.display = tab === 'itens' ? 'block' : 'none';
+      (document.getElementById('pagtab-fixo') as HTMLElement).style.display = tab === 'fixo' ? 'block' : 'none';
+    });
+  });
+
+  // Modal Pagamento Parcial - select all
+  document.getElementById('pag-select-all')?.addEventListener('change', (e) => {
+    const checked = (e.target as HTMLInputElement).checked;
+    document.querySelectorAll('.pag-item-check').forEach(cb => {
+      (cb as HTMLInputElement).checked = checked;
+    });
+    updatePagamentoItensValor();
+  });
+
+  // Modal Pagamento Parcial - confirm
+  document.getElementById('btn-confirmar-pagamento')?.addEventListener('click', async () => {
+    const comandaId = (document.getElementById('pagamento-comanda-id') as HTMLInputElement).value;
+    const forma = (document.getElementById('pag-forma') as HTMLSelectElement).value;
+    const obs = (document.getElementById('pag-obs') as HTMLInputElement).value;
+    const activeTab = document.querySelector('[data-pagtab].active') as HTMLElement;
+    const isItensTab = activeTab?.dataset.pagtab === 'itens';
+
+    let payload: any = { formaPagamento: forma };
+    if (obs.trim()) payload.observacao = obs.trim();
+
+    if (isItensTab) {
+      const checked = document.querySelectorAll('.pag-item-check:checked');
+      const itemIds = Array.from(checked).map(cb => (cb as HTMLInputElement).dataset.itemId);
+      if (itemIds.length === 0) {
+        toast('Selecione pelo menos um item!', 'error');
+        return;
+      }
+      payload.itemIds = itemIds;
+      payload.valor = 0;
+    } else {
+      const valor = parseFloat((document.getElementById('pag-valor-fixo') as HTMLInputElement).value);
+      if (!valor || valor <= 0) {
+        toast('Informe um valor válido!', 'error');
+        return;
+      }
+      payload.valor = valor;
+    }
+
+    try {
+      await api.post(`/comandas/${comandaId}/pagamentos`, payload);
+      toast('Pagamento registrado!', 'success');
+      (document.getElementById('modal-pagamento-parcial') as HTMLElement).style.display = 'none';
+      await loadComandas({ status: 'ABERTA,FECHADA' });
+      (window as any).openDetails(comandaId);
+    } catch (err: any) {
+      toast(err.message, 'error');
+    }
+  });
+
   (window as any).openAddItem = async (comandaId: string) => {
     (document.getElementById('current-comanda-id') as HTMLInputElement).value = comandaId;
     (document.getElementById('selected-produto-id') as HTMLInputElement).value = '';
@@ -494,7 +621,12 @@ function bindOrderEvents() {
           <td data-label="Produto" class="item-name">${i.quantidade}x ${i.produto?.nome ?? '—'}</td>
           <td data-label="Qtd" class="item-qty">${i.quantidade}</td>
           <td data-label="Subtotal" class="item-value">${formatBRL(i.precoUnitario * i.quantidade)}</td>
-          <td data-label="Obs" class="item-obs">${i.observacao ?? ''}</td>
+          <td data-label="Obs" class="item-obs">
+            ${canDelete
+              ? `<span class="item-obs-editable" data-item-id="${i.id}">${i.observacao ?? '<i style="opacity:0.4">adicionar obs</i>'}</span>`
+              : (i.observacao ?? '')
+            }
+          </td>
           <td data-label="Status" class="item-status"><span class="badge badge-${i.status === 'ENTREGUE' ? 'success' : 'warning'}">${i.status}</span></td>
           <td data-label="Ações" class="item-actions">
             ${canDelete ? `
@@ -522,6 +654,49 @@ function bindOrderEvents() {
           }
         });
       });
+
+      // Inline edit observacao
+      tbody.querySelectorAll('.item-obs-editable').forEach(span => {
+        span.addEventListener('click', () => {
+          const itemId = (span as HTMLElement).dataset.itemId!;
+          const currentText = span.textContent ?? '';
+          const input = document.createElement('input');
+          input.type = 'text';
+          input.className = 'obs-inline-input';
+          input.value = currentText;
+          input.style.cssText = 'width:100%;padding:0.25rem 0.4rem;border:1px solid var(--accent-primary);border-radius:4px;font-size:0.8rem;background:var(--bg-primary);color:var(--text-primary);';
+
+          const save = async () => {
+            const novaObs = input.value.trim();
+            if (novaObs === currentText) {
+              span.textContent = currentText || '';
+              if (!currentText) span.innerHTML = '<i style="opacity:0.4">adicionar obs</i>';
+              return;
+            }
+            try {
+              await api.patch(`/comandas/itens/${itemId}/observacao`, { observacao: novaObs || undefined });
+              span.textContent = novaObs;
+              if (!novaObs) span.innerHTML = '<i style="opacity:0.4">adicionar obs</i>';
+              toast('Observação atualizada!', 'success');
+              await loadComandas({ status: 'ABERTA,FECHADA' });
+            } catch (err: any) {
+              toast(err.message, 'error');
+              span.textContent = currentText;
+            }
+          };
+
+          input.addEventListener('blur', save);
+          input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
+            if (e.key === 'Escape') { span.textContent = currentText; if (!currentText) span.innerHTML = '<i style="opacity:0.4">adicionar obs</i>'; }
+          });
+
+          span.textContent = '';
+          span.appendChild(input);
+          input.focus();
+          input.select();
+        });
+      });
     }
 
     // Resumo financeiro
@@ -531,6 +706,9 @@ function bindOrderEvents() {
     const acrescimo = c.acrescimo || 0;
     const taxaServico = c.taxaServico ? (subtotal - desconto + acrescimo) * 0.10 : 0;
     const totalFinal = Math.max(subtotal - desconto + acrescimo + taxaServico, 0);
+    const valorPago = c.valorPago || 0;
+    const restante = Math.max(totalFinal - valorPago, 0);
+    const pagamentos = c.pagamentos ?? [];
 
     resumoEl.innerHTML = `
       <div style="background:var(--bg-secondary);border-radius:8px;padding:0.75rem 1rem;font-size:0.85rem;">
@@ -547,39 +725,57 @@ function bindOrderEvents() {
         ${c.taxaServico ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;color:var(--text-secondary);">
           <span>Taxa Serviço (10%):</span><span>+${formatBRL(taxaServico)}</span>
         </div>` : ''}
-        ${c.formaPagamento ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;">
-          <span style="color:var(--text-secondary);">Pagamento:</span>
-          <span>${c.formaPagamento.replace('_', ' ')}</span>
+        ${valorPago > 0 ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;color:var(--success);font-weight:600;">
+          <span>Já pago:</span><span>-${formatBRL(valorPago)}</span>
+        </div>` : ''}
+        ${restante > 0 && valorPago > 0 ? `<div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;font-weight:700;color:var(--accent-primary);border-top:1px solid var(--border-color);padding-top:0.35rem;">
+          <span>Restante:</span><span>${formatBRL(restante)}</span>
         </div>` : ''}
       </div>
+      ${pagamentos.length > 0 ? `
+        <div style="margin-top:0.75rem;">
+          <div style="font-size:0.8rem;color:var(--text-secondary);margin-bottom:0.35rem;font-weight:600;">Histórico de Pagamentos</div>
+          ${pagamentos.map((p: any) => `
+            <div style="display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;padding:0.3rem 0;border-bottom:1px solid var(--border-color);">
+              <div>
+                <span style="color:var(--text-secondary);">${new Date(p.criadoEm).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
+                <span style="margin-left:0.4rem;">${p.formaPagamento.replace('_', ' ')}</span>
+                ${p.observacao ? `<span style="margin-left:0.4rem;color:var(--text-secondary);font-style:italic;">— ${p.observacao}</span>` : ''}
+              </div>
+              <span style="font-weight:600;color:var(--success);">${formatBRL(p.valor)}</span>
+            </div>
+          `).join('')}
+        </div>
+      ` : ''}
     `;
 
-    document.getElementById('detalhes-total')!.textContent = formatBRL(totalFinal);
+    document.getElementById('detalhes-total')!.textContent = formatBRL(restante > 0 ? restante : totalFinal);
 
     const acoesContainer = document.getElementById('detalhes-acoes-pagamento')!;
     acoesContainer.innerHTML = '';
     const canPay = user && ['ADMIN', 'CAIXA'].includes(user.role);
     
-    if (canPay && c.status !== 'PAGA' && c.status !== 'CANCELADA') {
+    if (canPay && c.status !== 'PAGA' && c.status !== 'CANCELADA' && restante > 0) {
       acoesContainer.innerHTML = `
-        <div style="width:100%;">
-          <div class="form-group" style="margin-bottom:0.75rem;">
-            <label>Forma de Pagamento</label>
-            <select id="pagamento-forma" class="form-control">
-              ${FORMAS_PAGAMENTO.map(fp => `<option value="${fp.value}">${fp.label}</option>`).join('')}
-            </select>
-          </div>
-          <button type="button" class="btn btn-success" style="width: 100%;" id="btn-detalhes-receber">
-            💳 Receber Valor / Pagar
-          </button>
-        </div>
+        <button type="button" class="btn btn-success" style="flex:1;" id="btn-pagamento-parcial">
+          💰 Pagamento Parcial
+        </button>
+        <button type="button" class="btn btn-success" style="flex:1;" id="btn-pagamento-total">
+          💳 Pagar Tudo
+        </button>
       `;
       
-      document.getElementById('btn-detalhes-receber')?.addEventListener('click', async () => {
-        const forma = (document.getElementById('pagamento-forma') as HTMLSelectElement).value;
-        if (!confirm(`Confirmar recebimento de ${formatBRL(totalFinal)} para "${c.identificador}"?`)) return;
+      document.getElementById('btn-pagamento-parcial')?.addEventListener('click', () => {
+        openPagamentoModal(c);
+      });
+
+      document.getElementById('btn-pagamento-total')?.addEventListener('click', async () => {
+        const forma = prompt('Forma de pagamento:\n1 - Dinheiro\n2 - Cartão Crédito\n3 - Cartão Débito\n4 - PIX\n\nDigite o número:');
+        const formaMap: Record<string, string> = { '1': 'DINHEIRO', '2': 'CARTAO_CREDITO', '3': 'CARTAO_DEBITO', '4': 'PIX' };
+        const formaPagamento = formaMap[forma ?? ''] ?? 'DINHEIRO';
+        if (!confirm(`Confirmar pagamento de ${formatBRL(restante)} (restante) para "${c.identificador}"?`)) return;
         try {
-          await api.post(`/comandas/${c.id}/pagar`, { formaPagamento: forma });
+          await api.post(`/comandas/${c.id}/pagar`, { formaPagamento });
           toast('Pagamento registrado!', 'success');
           (document.getElementById('modal-detalhes-comanda') as HTMLElement).style.display = 'none';
           await loadComandas({ status: 'ABERTA,FECHADA' });
@@ -587,9 +783,66 @@ function bindOrderEvents() {
           toast(err.message, 'error');
         }
       });
+    } else if (canPay && c.status === 'PAGA') {
+      acoesContainer.innerHTML = `<p style="text-align:center;color:var(--success);width:100%;font-weight:600;">✅ Comanda Paga</p>`;
     }
 
     (document.getElementById('modal-detalhes-comanda') as HTMLElement).style.display = 'flex';
     document.querySelector('.detalhes-edit-section')?.classList.remove('expanded');
   };
+
+  function openPagamentoModal(c: any) {
+    const totalFinal = calcularTotalFinal(c);
+    const restante = Math.max(totalFinal - (c.valorPago || 0), 0);
+
+    (document.getElementById('pagamento-comanda-id') as HTMLInputElement).value = c.id;
+    (document.getElementById('pagamento-restante-info') as HTMLElement).innerHTML =
+      `<div style="display:flex;justify-content:space-between;"><span>Restante a pagar:</span><strong style="color:var(--accent-primary);">${formatBRL(restante)}</strong></div>`;
+
+    // Reset tabs
+    document.querySelectorAll('[data-pagtab]').forEach(b => b.classList.remove('active'));
+    document.querySelector('[data-pagtab="itens"]')?.classList.add('active');
+    (document.getElementById('pagtab-itens') as HTMLElement).style.display = 'block';
+    (document.getElementById('pagtab-fixo') as HTMLElement).style.display = 'none';
+    (document.getElementById('pag-valor-fixo') as HTMLInputElement).value = '';
+    (document.getElementById('pag-obs') as HTMLInputElement).value = '';
+    (document.getElementById('pag-select-all') as HTMLInputElement).checked = false;
+
+    // Render items
+    const itensList = document.getElementById('pag-itens-list')!;
+    const itens = c.itens ?? [];
+    itensList.innerHTML = itens.map((i: any) => {
+      const subtotal = i.precoUnitario * i.quantidade;
+      return `
+        <label style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0;border-bottom:1px solid var(--border-color);font-size:0.85rem;cursor:pointer;">
+          <input type="checkbox" class="pag-item-check" data-item-id="${i.id}" data-item-valor="${subtotal}">
+          <span style="flex:1;">${i.quantidade}x ${i.produto?.nome ?? '—'}</span>
+          <span style="color:var(--text-secondary);">${formatBRL(subtotal)}</span>
+        </label>
+      `;
+    }).join('');
+
+    // Bind item checkboxes
+    itensList.querySelectorAll('.pag-item-check').forEach(cb => {
+      cb.addEventListener('change', () => {
+        updatePagamentoItensValor();
+        const totalChecks = itensList.querySelectorAll('.pag-item-check').length;
+        const checkedChecks = itensList.querySelectorAll('.pag-item-check:checked').length;
+        (document.getElementById('pag-select-all') as HTMLInputElement).checked = totalChecks === checkedChecks;
+      });
+    });
+
+    updatePagamentoItensValor();
+
+    (document.getElementById('modal-pagamento-parcial') as HTMLElement).style.display = 'flex';
+  }
+
+  function updatePagamentoItensValor() {
+    const checked = document.querySelectorAll('.pag-item-check:checked');
+    let total = 0;
+    checked.forEach(cb => {
+      total += parseFloat((cb as HTMLElement).dataset.itemValor || '0');
+    });
+    (document.getElementById('pag-itens-valor')!.textContent) = formatBRL(total);
+  }
 }