feat(orders): fluxo de aprovação — approve/reject endpoints + UIs (C5)

PATCH /orders/:id/approve e /reject com alçada role-gated; OrderDetailPage
com modais de aprovação e recusa; ApprovalQueuePage para Sandra; badge de
pendências na Sidebar; DevLogin com 4 perfis (rep, supervisor, gerente).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/components/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { Menu } from 'antd';
+import { Badge, Menu } from 'antd';
 import { useLocation, useNavigate } from '@tanstack/react-router';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -11,8 +11,10 @@ import {
   faGear,
   faPercent,
   faFileInvoiceDollar,
+  faCheckCircle,
 } from '@fortawesome/free-solid-svg-icons';
 import type { ItemType } from 'antd/es/menu/interface';
+import { useOrderList } from '../../lib/queries/orders';
 
 /**
  * Sidebar canônica do SAR (260px fixa — brand.md).
@@ -21,6 +23,8 @@ import type { ItemType } from 'antd/es/menu/interface';
 export function Sidebar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const { data: pendingOrders } = useOrderList({ status: 'pending_approval', limit: 1 });
+  const pendingCount = pendingOrders?.total ?? 0;
 
   const items: ItemType[] = [
     {
@@ -53,6 +57,18 @@ export function Sidebar() {
       icon: <FontAwesomeIcon icon={faClipboardList} fixedWidth />,
       label: 'Pedidos',
     },
+    {
+      key: '/aprovacoes',
+      icon: <FontAwesomeIcon icon={faCheckCircle} fixedWidth />,
+      label: (
+        <span>
+          Aprovações{' '}
+          {pendingCount > 0 && (
+            <Badge count={pendingCount} size="small" style={{ marginLeft: 4 }} />
+          )}
+        </span>
+      ),
+    },
     {
       key: '/comissao',
       icon: <FontAwesomeIcon icon={faPercent} fixedWidth />,