From 75a4de93a114b0e0acd80f7ad5a23e4969d2c0dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Fri, 17 Apr 2026 10:13:20 -0300
Subject: [PATCH 01/13] feat: :sparkles: ajuste de elemento fantasma na sidebar

---
 package-lock.json             | 270 ++++++++++++++++------------------
 src/components/AppSidebar.tsx |  14 +-
 2 files changed, 131 insertions(+), 153 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index de0bc63..4f804fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -363,9 +363,9 @@
       }
     },
     "node_modules/@chenglou/pretext": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@chenglou/pretext/-/pretext-0.0.3.tgz",
-      "integrity": "sha512-RQmqMqUAPRCyv4R3LlRi/ao6KbNWYclqLA+V1HS7sWgyUUbjn3JmmlfXZSY/BjM4rbmIaMSyIVisYocYGYftiQ==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@chenglou/pretext/-/pretext-0.0.5.tgz",
+      "integrity": "sha512-A8GZN10REdFGsyuiUgLV8jjPDDFMg5GmgxGWV0I3igxBOnzj+jgz2VMmVD7g+SFyoctfeqHFxbNatKSzVRWtRg==",
       "license": "MIT",
       "optional": true
     },
@@ -513,7 +513,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
       "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -525,7 +524,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
       "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -536,7 +534,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
       "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -859,10 +856,9 @@
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz",
-      "integrity": "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==",
-      "dev": true,
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -878,10 +874,10 @@
       }
     },
     "node_modules/@oxc-project/types": {
-      "version": "0.122.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz",
-      "integrity": "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==",
-      "dev": true,
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.124.0.tgz",
+      "integrity": "sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg==",
+      "devOptional": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
@@ -2622,13 +2618,12 @@
       "license": "MIT"
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz",
-      "integrity": "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-YYe6aWruPZDtHNpwu7+qAHEMbQ/yRl6atqb/AhznLTnD3UY99Q1jE7ihLSahNWkF4EqRPVC4SiR4O0UkLK02tA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2639,13 +2634,12 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.12.tgz",
-      "integrity": "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-oArR/ig8wNTPYsXL+Mzhs0oxhxfuHRfG7Ikw7jXsw8mYOtk71W0OkF2VEVh699pdmzjPQsTjlD1JIOoHkLP1Fg==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2656,13 +2650,12 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.12.tgz",
-      "integrity": "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-YzeVqOqjPYvUbJSWJ4EDL8ahbmsIXQpgL3JVipmN+MX0XnXMeWomLN3Fb+nwCmP/jfyqte5I3XRSm7OfQrbyxw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2673,13 +2666,12 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.12.tgz",
-      "integrity": "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-9Erhx956jeQ0nNTyif1+QWAXDRD38ZNjr//bSHrt6wDwB+QkAfl2q6Mn1k6OBPerznjRmbM10lgRb1Pli4xZPw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2690,13 +2682,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.12.tgz",
-      "integrity": "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.15.tgz",
+      "integrity": "sha512-cVwk0w8QbZJGTnP/AHQBs5yNwmpgGYStL88t4UIaqcvYJWBfS0s3oqVLZPwsPU6M0zlW4GqjP0Zq5MnAGwFeGA==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2707,13 +2698,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.12.tgz",
-      "integrity": "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-eBZ/u8iAK9SoHGanqe/jrPnY0JvBN6iXbVOsbO38mbz+ZJsaobExAm1Iu+rxa4S1l2FjG0qEZn4Rc6X8n+9M+w==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "libc": [
         "glibc"
       ],
@@ -2727,13 +2717,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.12.tgz",
-      "integrity": "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.15.tgz",
+      "integrity": "sha512-ZvRYMGrAklV9PEkgt4LQM6MjQX2P58HPAuecwYObY2DhS2t35R0I810bKi0wmaYORt6m/2Sm+Z+nFgb0WhXNcQ==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "libc": [
         "musl"
       ],
@@ -2747,13 +2736,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.12.tgz",
-      "integrity": "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-VDpgGBzgfg5hLg+uBpCLoFG5kVvEyafmfxGUV0UHLcL5irxAK7PKNeC2MwClgk6ZAiNhmo9FLhRYgvMmedLtnQ==",
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "libc": [
         "glibc"
       ],
@@ -2767,13 +2755,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.12.tgz",
-      "integrity": "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-y1uXY3qQWCzcPgRJATPSOUP4tCemh4uBdY7e3EZbVwCJTY3gLJWnQABgeUetvED+bt1FQ01OeZwvhLS2bpNrAQ==",
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "libc": [
         "glibc"
       ],
@@ -2787,13 +2774,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.12.tgz",
-      "integrity": "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-023bTPBod7J3Y/4fzAN6QtpkSABR0rigtrwaP+qSEabUh5zf6ELr9Nc7GujaROuPY3uwdSIXWrvhn1KxOvurWA==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "libc": [
         "glibc"
       ],
@@ -2807,13 +2793,12 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.12.tgz",
-      "integrity": "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.15.tgz",
+      "integrity": "sha512-witB2O0/hU4CgfOOKUoeFgQ4GktPi1eEbAhaLAIpgD6+ZnhcPkUtPsoKKHRzmOoWPZue46IThdSgdo4XneOLYw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "libc": [
         "musl"
       ],
@@ -2827,13 +2812,12 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.12.tgz",
-      "integrity": "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-UCL68NJ0Ud5zRipXZE9dF5PmirzJE4E4BCIOOssEnM7wLDsxjc6Qb0sGDxTNRTP53I6MZpygyCpY8Aa8sPfKPg==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2844,30 +2828,46 @@
       }
     },
     "node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.12.tgz",
-      "integrity": "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.15.tgz",
+      "integrity": "sha512-ApLruZq/ig+nhaE7OJm4lDjayUnOHVUa77zGeqnqZ9pn0ovdVbbNPerVibLXDmWeUZXjIYIT8V3xkT58Rm9u5Q==",
       "cpu": [
         "wasm32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.1.1"
+        "@emnapi/core": "1.9.2",
+        "@emnapi/runtime": "1.9.2",
+        "@napi-rs/wasm-runtime": "^1.1.3"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.12.tgz",
-      "integrity": "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==",
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.15.tgz",
+      "integrity": "sha512-KmoUoU7HnN+Si5YWJigfTws1jz1bKBYDQKdbLspz0UaqjjFkddHsqorgiW1mxcAj88lYUE6NC/zJNwT+SloqtA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.15.tgz",
+      "integrity": "sha512-3P2A8L+x75qavWLe/Dll3EYBJLQmtkJN8rfh+U/eR3MqMgL/h98PhYI+JFfXuDPgPeCB7iZAKiqii5vqOvnA0g==",
+      "cpu": [
+        "x64"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3355,7 +3355,6 @@
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
       "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -4011,9 +4010,9 @@
       }
     },
     "node_modules/boneyard-js": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/boneyard-js/-/boneyard-js-1.6.7.tgz",
-      "integrity": "sha512-ClzI7uF4cAaSBQOtwChjNQhIzOUIWofYBBN8Q0bY/b7+i3Ik6o/ykd0SZp4XaRMt7z9BDwE7Ir/U6IxDV9cGqw==",
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/boneyard-js/-/boneyard-js-1.7.7.tgz",
+      "integrity": "sha512-/xWx9Okv73pfdFLHS8oQw4SkPBDJN1OxDSIb3bMY2LI/t50a5qHkJNLm6/GeFpaahTSVJQKG7p6kgisheDsGFg==",
       "license": "MIT",
       "dependencies": {
         "playwright": "^1.58.2"
@@ -4022,19 +4021,24 @@
         "boneyard-js": "bin/cli.js"
       },
       "optionalDependencies": {
-        "@chenglou/pretext": "^0.0.3"
+        "@chenglou/pretext": "^0.0.5"
       },
       "peerDependencies": {
         "@angular/core": ">=14",
+        "preact": ">=10",
         "react": ">=18",
         "react-native": ">=0.71",
         "svelte": ">=5.29",
+        "vite": ">=5",
         "vue": ">=3"
       },
       "peerDependenciesMeta": {
         "@angular/core": {
           "optional": true
         },
+        "preact": {
+          "optional": true
+        },
         "react": {
           "optional": true
         },
@@ -4044,6 +4048,9 @@
         "svelte": {
           "optional": true
         },
+        "vite": {
+          "optional": true
+        },
         "vue": {
           "optional": true
         }
@@ -4310,7 +4317,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -4623,7 +4630,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -4692,7 +4699,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -4892,7 +4898,7 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -5044,7 +5050,7 @@
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
       "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -5077,7 +5083,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5098,7 +5103,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5119,7 +5123,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5140,7 +5143,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5161,7 +5163,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5182,7 +5183,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "libc": [
         "glibc"
       ],
@@ -5206,7 +5206,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "libc": [
         "musl"
       ],
@@ -5230,7 +5229,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "libc": [
         "glibc"
       ],
@@ -5254,7 +5252,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "libc": [
         "musl"
       ],
@@ -5278,7 +5275,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5299,7 +5295,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5417,7 +5412,7 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -5564,14 +5559,14 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -5628,7 +5623,7 @@
       "version": "8.5.8",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
       "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5977,14 +5972,14 @@
       }
     },
     "node_modules/rolldown": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.12.tgz",
-      "integrity": "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==",
-      "dev": true,
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.15.tgz",
+      "integrity": "sha512-Ff31guA5zT6WjnGp0SXw76X6hzGRk/OQq2hE+1lcDe+lJdHSgnSX6nK3erbONHyCbpSj9a9E+uX/OvytZoWp2g==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.122.0",
-        "@rolldown/pluginutils": "1.0.0-rc.12"
+        "@oxc-project/types": "=0.124.0",
+        "@rolldown/pluginutils": "1.0.0-rc.15"
       },
       "bin": {
         "rolldown": "bin/cli.mjs"
@@ -5993,45 +5988,28 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.0.0-rc.12",
-        "@rolldown/binding-darwin-arm64": "1.0.0-rc.12",
-        "@rolldown/binding-darwin-x64": "1.0.0-rc.12",
-        "@rolldown/binding-freebsd-x64": "1.0.0-rc.12",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12",
-        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12",
-        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12",
-        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12",
-        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12",
-        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12",
-        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12",
-        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12",
-        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12",
-        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12",
-        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12"
-      }
-    },
-    "node_modules/rolldown/node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.12.tgz",
-      "integrity": "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "@rolldown/binding-android-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.15",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.15",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.15",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.15",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.15",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.15"
       }
     },
     "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.12.tgz",
-      "integrity": "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==",
-      "dev": true,
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.15.tgz",
+      "integrity": "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/saxes": {
@@ -6107,7 +6085,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -6225,7 +6203,7 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -6487,16 +6465,16 @@
       }
     },
     "node_modules/vite": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.3.tgz",
-      "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
-      "dev": true,
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz",
+      "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
         "postcss": "^8.5.8",
-        "rolldown": "1.0.0-rc.12",
+        "rolldown": "1.0.0-rc.15",
         "tinyglobby": "^0.2.15"
       },
       "bin": {
@@ -6514,7 +6492,7 @@
       "peerDependencies": {
         "@types/node": "^20.19.0 || >=22.12.0",
         "@vitejs/devtools": "^0.1.0",
-        "esbuild": "^0.27.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
         "jiti": ">=1.21.0",
         "less": "^4.0.0",
         "sass": "^1.70.0",
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 5fc9556..d668194 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -70,16 +70,14 @@ interface AppSidebarProps {
 const NAV_ITEMS: NavItem[] = [
   { label: "Início", Icon: Home, view: "home" },
 
-  { label: "Demandas", Icon: ListChecks, view: "demandas", requiresClient: true },
-
   {
-    label: "Calendário",
-    Icon: CalendarDays,
+    label: "Demandas",
+    Icon: ListChecks,
     requiresClient: true,
     children: [
+      { view: "demandas", label: "Todas Demandas" },
       { view: "calendar", label: "Calendário" },
       { view: "timeline", label: "Linha do Tempo" },
-      { view: "list", label: "Lista" },
     ],
   },
 
@@ -301,11 +299,13 @@ export function AppSidebar({
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent side="right" align="start" className="w-56">
-          {isAdmin && (
+          {/* {isAdmin && (
             <>
               <DropdownMenuSeparator />
             </>
-          )}
+          )} */}
+
+          
           {availableClients.map((client) => (
             <DropdownMenuItem
               key={client.id}

From f1f2ed7aea57b311856dca045df39d3587504b34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Fri, 17 Apr 2026 10:32:01 -0300
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20:sparkles:=20adicionada=20view=20?=
 =?UTF-8?q?de=20transi=C3=A7=C3=A3o=20entre=20cliients?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/architecture.md                       |  39 +++-
 src/App.tsx                                |  29 ++-
 src/components/ClientTransitionOverlay.tsx | 259 +++++++++++++++++++++
 3 files changed, 318 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ClientTransitionOverlay.tsx

diff --git a/docs/architecture.md b/docs/architecture.md
index dc3257e..3646a14 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -7,10 +7,11 @@ src/
 ├── App.tsx                    # Root: providers, roteamento, inicialização do cliente
 ├── main.tsx                   # Entry point
 ├── components/
-│   ├── TaskModal.tsx          # Modal criar/editar demanda
-│   ├── AppHeader.tsx          # Header: logo, hamburger mobile, NotificationBell, theme toggle (desktop)
-│   ├── AppSidebar.tsx         # Sidebar de navegação; theme toggle no footer mobile
-│   └── ui/                    # Design system (Button, Input, Label, Badge)
+│   ├── TaskModal.tsx                  # Modal criar/editar demanda
+│   ├── AppHeader.tsx                  # Header: logo, hamburger mobile, NotificationBell, theme toggle (desktop)
+│   ├── AppSidebar.tsx                 # Sidebar de navegação; theme toggle no footer mobile
+│   ├── ClientTransitionOverlay.tsx    # Overlay animado exibido ao trocar de cliente
+│   └── ui/                            # Design system (Button, Input, Label, Badge)
 ├── views/
 │   ├── home/                  # HomeView — saudação, SearchLauncher, QuickAccess
 │   ├── dashboard/             # DashboardView → Calendar/Timeline
@@ -155,14 +156,40 @@ Relê o perfil do usuário atual (member + clients) sem reiniciar o ciclo de aut
 
 ## Troca de Cliente
 
+A troca de cliente exibe um overlay de transição animado antes de efetivar a mudança:
+
 ```
 handleSelectClient(newId)
-  → invalidate()          ← limpa tasks/members imediatamente (sem vazamento)
-  → setClient(newId)      ← persiste no localStorage
+  → setTransitionClient({ id, name })   ← exibe ClientTransitionOverlay (~3s)
+      ↓ onComplete (após fade-out)
+  → setClient(newId)                    ← persiste no localStorage
   → setView("home")
+  → toast cinza "Trocado para <Cliente>" (sonner, 3s)
   → useEffect dispara fetchData(newId)
 ```
 
+### `ClientTransitionOverlay` (`src/components/ClientTransitionOverlay.tsx`)
+
+Overlay fullscreen (`z-[9999]`) exibido ao trocar de cliente. Duração total ~3.8s.
+
+**Camadas visuais (profundidade):**
+- Gradiente radial fixo no fundo (`--muted`) simulando luminosidade de céu — não anima
+- 8 nuvens SVG com posição, escala e opacidade fixas no `style`; cada nuvem anima **apenas `translateX`** via keyframe único gerado dinamicamente por valor de `dx` (`ct-cloud-8`, `ct-cloud-10`, etc.) — isso evita que o `scale` do style seja sobrescrito e mantém o drift orgânico e independente
+- Linha de horizonte + pista SVG posicionadas em `bottom: 24-26%`, criando perspectiva de chão
+
+**Avião lateral (`PlaneSide`) + rastro:**
+- SVG de vista lateral: fuselagem em perspectiva, asa principal, cauda vertical e horizontal, janelas
+- Percorre da esquerda para a direita em arco de decolagem (`ct-takeoff`): táxi → inclinação suave → saída diagonal em ~25°
+- Rastro de condensação duplo com gradiente linear atrás do avião
+
+**Conteúdo central (sem card):**
+- Label "DESTINO" em uppercase + tracking largo
+- Nome do cliente em `text-5xl` bold, fonte Syne
+- Separador decorativo `✦`
+- Mensagens rotativas com fade + `translateY(3px)` suave (350ms): `🛂 Verificando passaporte` → `🎫 Confirmando embarque` → `🛫 Decolando agora` → `✈️ Em rota de cruzeiro`
+
+Ao fechar, dispara `onComplete` → efetiva a troca no store e exibe toast de confirmação.
+
 ## `ClientOption` (tipo em `src/contexts/AuthContext.ts`)
 
 ```ts
diff --git a/src/App.tsx b/src/App.tsx
index e32cded..0f269be 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,6 +29,7 @@ import type { Notification } from "./types/notification";
 import type { ViewType } from "@/store/useUIStore";
 import { canAccessView, resolveAccessRole } from "@/lib/accessControl";
 import { ConfirmModal, TooltipProvider } from "@/components/ui";
+import { ClientTransitionOverlay } from "@/components/ClientTransitionOverlay";
 
 export default function App() {
   const { session, user, signIn, signOut, authError, loading: authLoading, isAdmin, member, clients, refreshProfile } = useAuthContext();
@@ -128,10 +129,25 @@ export default function App() {
   const [pendingDeleteTaskId, setPendingDeleteTaskId] = useState<string | null>(null)
   const [closeTaskModalOnDelete, setCloseTaskModalOnDelete] = useState(false)
 
+  const [transitionClient, setTransitionClient] = useState<{ id: string | null | undefined; name: string } | null>(null)
+
   const handleSelectClient = useCallback((clientId: string | null | undefined) => {
-    setClient(clientId);
-    setView("home");
-  }, [setClient, setView]);
+    const targetClient = clients.find((c) => c.id === clientId)
+    if (!targetClient || clientId === effectiveClientId) return
+    setTransitionClient({ id: clientId, name: targetClient.name })
+  }, [clients, effectiveClientId])
+
+  const handleTransitionComplete = useCallback(() => {
+    if (!transitionClient) return
+    setClient(transitionClient.id)
+    setView("home")
+    toast('Visualização alterada', {
+      description: `Trocado para ${transitionClient.name}`,
+      style: { background: 'var(--muted)', color: 'var(--foreground)', border: '1px solid var(--border)' },
+      duration: 3000,
+    })
+    setTransitionClient(null)
+  }, [transitionClient, setClient, setView])
 
   const handleViewChange = useCallback((newView: ViewType) => {
     setMobileSidebarOpen(false);
@@ -332,6 +348,13 @@ export default function App() {
         />
       )}
 
+      {transitionClient && (
+        <ClientTransitionOverlay
+          clientName={transitionClient.name}
+          onComplete={handleTransitionComplete}
+        />
+      )}
+
       {pendingDeleteTaskId && (
         <ConfirmModal
           title="Eliminar demanda"
diff --git a/src/components/ClientTransitionOverlay.tsx b/src/components/ClientTransitionOverlay.tsx
new file mode 100644
index 0000000..bb63edb
--- /dev/null
+++ b/src/components/ClientTransitionOverlay.tsx
@@ -0,0 +1,259 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface ClientTransitionOverlayProps {
+  clientName: string
+  onComplete: () => void
+}
+
+const MESSAGES = [
+  '🛂 Verificando passaporte',
+  '🎫 Confirmando embarque',
+  '🛫 Decolando agora',
+  '✈️  Em rota de cruzeiro',
+]
+
+const TOTAL_MS = 3800
+const MSG_INTERVAL = TOTAL_MS / MESSAGES.length
+
+// Nuvens
+const CLOUDS = [
+  { x: 6,  y: 12, s: 1.0, o: 0.06, d: 22, dx: 10 },
+  { x: 70, y:  8, s: 0.7, o: 0.04, d: 28, dx: 8  },
+  { x: 35, y: 20, s: 1.3, o: 0.05, d: 18, dx: 14 },
+  { x: 82, y: 32, s: 0.85,o: 0.04, d: 24, dx: 9  },
+  { x: 15, y: 48, s: 1.1, o: 0.05, d: 20, dx: 12 },
+  { x: 58, y: 58, s: 0.65,o: 0.03, d: 30, dx: 7  },
+  { x: 3,  y: 68, s: 0.9, o: 0.05, d: 26, dx: 11 },
+  { x: 88, y: 65, s: 1.2, o: 0.04, d: 16, dx: 13 },
+]
+
+function PlaneSide({ size = 56 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size * 0.66}
+      viewBox="0 0 120 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="text-foreground drop-shadow-md"
+    >
+      {/* O avião agora é desenhado RETO. A rotação acontece na keyframe do CSS */}
+      <g>
+        {/* ELEMENTOS DE FUNDO */}
+        <path d="M 55 36 L 75 36 L 62 20 L 48 20 Z" fill="currentColor" opacity="0.2" />
+        <rect x="65" y="24" width="14" height="6" rx="2" fill="currentColor" opacity="0.2" />
+        <path d="M 30 32 L 22 22 L 14 22 L 24 32 Z" fill="currentColor" opacity="0.25" />
+
+        {/* ELEMENTOS PRINCIPAIS */}
+        <path
+          d="M 20 38 C 18 36, 25 28, 40 28 L 85 28 C 105 28, 112 32, 112 36 C 112 42, 102 46, 85 46 L 40 46 C 25 46, 18 40, 20 38 Z"
+          fill="currentColor"
+          opacity="0.9"
+        />
+        <path d="M 98 28.5 Q 106 28.5 109 33 L 100 33 Z" fill="currentColor" opacity="0.5" />
+        <path
+          d="M 45 35 L 85 35"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeDasharray="1 6"
+          strokeLinecap="round"
+          opacity="0.35"
+        />
+        <path d="M 40 28 L 24 8 L 14 8 L 28 28 Z" fill="currentColor" opacity="0.85" />
+        <path d="M 24 40 L 34 40 L 22 52 L 14 52 Z" fill="currentColor" opacity="0.85" />
+        <path d="M 48 40 L 75 40 L 52 64 L 35 64 Z" fill="currentColor" opacity="0.85" />
+        <path d="M 58 44 L 62 40 L 68 40 L 64 44 Z" fill="currentColor" opacity="0.9" />
+        <rect x="54" y="42" width="18" height="8" rx="3" fill="currentColor" />
+      </g>
+    </svg>
+  )
+}
+
+function Cloud({ x, y, s, o, d, dx }: typeof CLOUDS[0]) {
+  const delay = -(d * 0.4)
+  return (
+    <div
+      className="absolute pointer-events-none"
+      style={{
+        left: `${x}%`,
+        top: `${y}%`,
+        opacity: o,
+        transform: `scale(${s})`,
+        transformOrigin: 'left center',
+        animation: `ct-cloud-${Math.round(dx)} ${d}s ease-in-out ${delay}s infinite alternate`,
+      }}
+    >
+      <svg width="110" height="44" viewBox="0 0 110 44" fill="currentColor" className="text-foreground blur-[1px]">
+        <ellipse cx="55" cy="34" rx="48" ry="12" />
+        <ellipse cx="36" cy="26" rx="26" ry="16" />
+        <ellipse cx="66" cy="22" rx="30" ry="18" />
+        <ellipse cx="50" cy="18" rx="20" ry="14" />
+      </svg>
+    </div>
+  )
+}
+
+export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransitionOverlayProps) {
+  const [messageIndex, setMessageIndex] = useState(0)
+  const [msgOut, setMsgOut] = useState(false)
+  const [visible, setVisible] = useState(false)
+  const onCompleteRef = useRef(onComplete)
+  onCompleteRef.current = onComplete
+
+  useEffect(() => {
+    const showTimer = setTimeout(() => setVisible(true), 20)
+
+    let current = 0
+    const msgInterval = setInterval(() => {
+      setMsgOut(true)
+      setTimeout(() => {
+        current = (current + 1) % MESSAGES.length
+        setMessageIndex(current)
+        setMsgOut(false)
+      }, 350)
+    }, MSG_INTERVAL)
+
+    const fadeOutTimer = setTimeout(() => {
+      setVisible(false)
+      setTimeout(() => onCompleteRef.current(), 500)
+    }, TOTAL_MS)
+
+    return () => {
+      clearTimeout(showTimer)
+      clearInterval(msgInterval)
+      clearTimeout(fadeOutTimer)
+    }
+  }, [])
+
+  const uniqueDx = [...new Set(CLOUDS.map((c) => Math.round(c.dx)))]
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex flex-col items-center justify-center overflow-hidden bg-background"
+      style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s ease' }}
+    >
+      {/* Gradiente de céu */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background: 'radial-gradient(ellipse 70% 50% at 50% 35%, var(--muted) 0%, transparent 100%)',
+          opacity: 0.6,
+        }}
+      />
+
+      {/* Nuvens */}
+      {CLOUDS.map((c, i) => (
+        <Cloud key={i} {...c} />
+      ))}
+
+      {/* Linha de horizonte */}
+      <div
+        className="absolute w-full pointer-events-none"
+        style={{ bottom: '26%', height: '1px', background: 'var(--border)', opacity: 0.3 }}
+      />
+
+      {/* Pista animada (Ilusão de velocidade) */}
+      <div
+        className="absolute pointer-events-none overflow-hidden"
+        style={{ bottom: '24%', left: '50%', transform: 'translateX(-50%)', width: '300px' }}
+      >
+        <svg width="400" height="24" viewBox="0 0 400 24" fill="none" className="text-foreground">
+          <line x1="0" y1="1" x2="400" y2="1" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.18" />
+          <line x1="0" y1="23" x2="400" y2="23" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.18" />
+          <g style={{ animation: 'ct-runway 0.4s linear infinite' }}>
+            {Array.from({ length: 14 }).map((_, i) => (
+              <rect key={i} x={i * 35} y={10} width={20} height={4} rx={2} fill="currentColor" opacity="0.1" />
+            ))}
+          </g>
+        </svg>
+      </div>
+
+      {/* Avião lateral + rastro (Animado via GPU usando Translate3D) */}
+      <div
+        className="absolute pointer-events-none"
+        style={{
+          bottom: '24%',
+          left: '0', // Ponto de partida fixo para usar apenas translate3d
+          animation: 'ct-takeoff 3.8s cubic-bezier(0.3, 0, 0.2, 1) forwards',
+        }}
+      >
+        {/* Rastro */}
+        <div
+          className="absolute pointer-events-none"
+          style={{ right: '100%', top: '40%', transform: 'translateY(-50%)' }}
+        >
+          <svg width="180" height="8" viewBox="0 0 180 8" fill="none">
+            <defs>
+              <linearGradient id="tg" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="currentColor" stopOpacity="0" />
+                <stop offset="100%" stopColor="currentColor" stopOpacity="0.15" />
+              </linearGradient>
+            </defs>
+            <rect x="0" y="1" width="180" height="2.5" rx="1.5" fill="url(#tg)" className="text-foreground" />
+            <rect x="20" y="5" width="130" height="1.5" rx="1" fill="url(#tg)" className="text-foreground" opacity="0.4" />
+          </svg>
+        </div>
+
+        <PlaneSide size={64} />
+      </div>
+
+      {/* Conteúdo central */}
+      <div className="relative flex flex-col items-center gap-4 z-10 backdrop-blur-sm bg-background/30 p-8 rounded-3xl">
+        <p className="text-xs font-semibold tracking-[0.35em] uppercase text-muted-foreground">
+          Destino
+        </p>
+
+        <h2
+          className="text-5xl font-bold text-foreground text-center leading-tight px-8 drop-shadow-sm"
+          style={{ fontFamily: "'Syne', sans-serif" }}
+        >
+          {clientName}
+        </h2>
+
+        <div className="flex items-center gap-3 w-44">
+          <div className="flex-1 h-px bg-border" />
+          <span className="text-muted-foreground/30 text-xs">✦</span>
+          <div className="flex-1 h-px bg-border" />
+        </div>
+
+        <p
+          className="text-sm font-medium text-muted-foreground text-center whitespace-nowrap"
+          style={{
+            opacity: msgOut ? 0 : 0.85,
+            transform: msgOut ? 'translateY(4px)' : 'translateY(0)',
+            transition: 'opacity 0.35s ease, transform 0.35s ease',
+          }}
+        >
+          {MESSAGES[messageIndex]}
+        </p>
+      </div>
+
+      <style>{`
+        /* Animação via GPU usando viewports (vw/vh) e translate3d */
+        @keyframes ct-takeoff {
+          0%   { transform: translate3d(-15vw, 0, 0) rotate(0deg); }
+          45%  { transform: translate3d(45vw, 0, 0) rotate(0deg); }
+          65%  { transform: translate3d(60vw, -8vh, 0) rotate(-12deg); }
+          85%  { transform: translate3d(80vw, -30vh, 0) rotate(-22deg); }
+          100% { transform: translate3d(120vw, -60vh, 0) rotate(-28deg); }
+        }
+
+        /* Faz a pista correr para trás dando ilusão de velocidade horizontal */
+        @keyframes ct-runway {
+          from { transform: translateX(0); }
+          to   { transform: translateX(-35px); }
+        }
+
+        ${uniqueDx
+          .map(
+            (dx) => `
+        @keyframes ct-cloud-${dx} {
+          from { transform: translateX(-${dx}px); }
+          to   { transform: translateX(${dx}px); }
+        }`
+          )
+          .join('\n')}
+      `}</style>
+    </div>
+  )
+}
\ No newline at end of file

From ff8c610d3c0d3274268f47b97625c96b0d2b7c8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Fri, 17 Apr 2026 10:52:48 -0300
Subject: [PATCH 03/13] =?UTF-8?q?feat:=20:sparkles:=20ajustado=20anima?=
 =?UTF-8?q?=C3=A7=C3=A3o=20pra=20fazer=20o=20fetch=20durante=20a=20anima?=
 =?UTF-8?q?=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/architecture.md                       |  13 +-
 src/App.tsx                                |  11 +-
 src/components/ClientTransitionOverlay.tsx | 434 +++++++++++++--------
 3 files changed, 284 insertions(+), 174 deletions(-)

diff --git a/docs/architecture.md b/docs/architecture.md
index 3646a14..e45e027 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -160,14 +160,17 @@ A troca de cliente exibe um overlay de transição animado antes de efetivar a m
 
 ```
 handleSelectClient(newId)
-  → setTransitionClient({ id, name })   ← exibe ClientTransitionOverlay (~3s)
-      ↓ onComplete (após fade-out)
-  → setClient(newId)                    ← persiste no localStorage
-  → setView("home")
+  → setClient(newId)                    ← persiste no localStorage (imediato)
+  → setView("home")                     ← imediato
+  → setTransitionClient({ id, name })   ← exibe ClientTransitionOverlay (~3.2s)
+  → useEffect dispara fetchData(newId)  ← inicia em background durante o overlay
+      ↓ onComplete (após fade-out do overlay)
   → toast cinza "Trocado para <Cliente>" (sonner, 3s)
-  → useEffect dispara fetchData(newId)
+  → setTransitionClient(null)
 ```
 
+> A store e o fetch são disparados **imediatamente** ao clicar, antes do overlay fechar. Quando a animação termina, os dados já chegaram ou estão a caminho — sem espera visível após a transição.
+
 ### `ClientTransitionOverlay` (`src/components/ClientTransitionOverlay.tsx`)
 
 Overlay fullscreen (`z-[9999]`) exibido ao trocar de cliente. Duração total ~3.8s.
diff --git a/src/App.tsx b/src/App.tsx
index 0f269be..fc4dfeb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -134,20 +134,23 @@ export default function App() {
   const handleSelectClient = useCallback((clientId: string | null | undefined) => {
     const targetClient = clients.find((c) => c.id === clientId)
     if (!targetClient || clientId === effectiveClientId) return
+    // Exibe o overlay primeiro; após o fade-in (~650ms) dispara a troca para o fetch ocorrer em background
     setTransitionClient({ id: clientId, name: targetClient.name })
-  }, [clients, effectiveClientId])
+    setTimeout(() => {
+      setClient(clientId)
+      setView("home")
+    }, 650)
+  }, [clients, effectiveClientId, setClient, setView])
 
   const handleTransitionComplete = useCallback(() => {
     if (!transitionClient) return
-    setClient(transitionClient.id)
-    setView("home")
     toast('Visualização alterada', {
       description: `Trocado para ${transitionClient.name}`,
       style: { background: 'var(--muted)', color: 'var(--foreground)', border: '1px solid var(--border)' },
       duration: 3000,
     })
     setTransitionClient(null)
-  }, [transitionClient, setClient, setView])
+  }, [transitionClient])
 
   const handleViewChange = useCallback((newView: ViewType) => {
     setMobileSidebarOpen(false);
diff --git a/src/components/ClientTransitionOverlay.tsx b/src/components/ClientTransitionOverlay.tsx
index bb63edb..d2d5f46 100644
--- a/src/components/ClientTransitionOverlay.tsx
+++ b/src/components/ClientTransitionOverlay.tsx
@@ -1,107 +1,113 @@
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
+// --- TIPO DAS PROPS ---
 interface ClientTransitionOverlayProps {
   clientName: string
   onComplete: () => void
 }
 
 const MESSAGES = [
-  '🛂 Verificando passaporte',
+  '🛂 Verificando credenciais',
   '🎫 Confirmando embarque',
-  '🛫 Decolando agora',
-  '✈️  Em rota de cruzeiro',
+  '🛫 Autorização de torre',
+  '✈️ Em rota de cruzeiro',
 ]
 
-const TOTAL_MS = 3800
+const TOTAL_MS = 3200 // Transição mais rápida (reduzida de 4600ms para 3200ms)
 const MSG_INTERVAL = TOTAL_MS / MESSAGES.length
 
-// Nuvens
+// Nuvens com posições e velocidades otimizadas para fluir da direita para a esquerda
 const CLOUDS = [
-  { x: 6,  y: 12, s: 1.0, o: 0.06, d: 22, dx: 10 },
-  { x: 70, y:  8, s: 0.7, o: 0.04, d: 28, dx: 8  },
-  { x: 35, y: 20, s: 1.3, o: 0.05, d: 18, dx: 14 },
-  { x: 82, y: 32, s: 0.85,o: 0.04, d: 24, dx: 9  },
-  { x: 15, y: 48, s: 1.1, o: 0.05, d: 20, dx: 12 },
-  { x: 58, y: 58, s: 0.65,o: 0.03, d: 30, dx: 7  },
-  { x: 3,  y: 68, s: 0.9, o: 0.05, d: 26, dx: 11 },
-  { x: 88, y: 65, s: 1.2, o: 0.04, d: 16, dx: 13 },
+  { top: 5, size: 200, opacity: 0.45, duration: 45, delay: -10 },
+  { top: 15, size: 300, opacity: 0.35, duration: 35, delay: -5 },
+  { top: 30, size: 250, opacity: 0.25, duration: 50, delay: -20 },
+  { top: 45, size: 400, opacity: 0.3, duration: 40, delay: -15 },
+  { top: 10, size: 150, opacity: 0.5, duration: 25, delay: -2 },
+  { top: 60, size: 350, opacity: 0.2, duration: 60, delay: -30 },
 ]
 
-function PlaneSide({ size = 56 }: { size?: number }) {
+// --- COMPONENTES AUXILIARES ---
+
+function NoiseOverlay() {
   return (
-    <svg
-      width={size}
-      height={size * 0.66}
-      viewBox="0 0 120 80"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="text-foreground drop-shadow-md"
-    >
-      {/* O avião agora é desenhado RETO. A rotação acontece na keyframe do CSS */}
-      <g>
-        {/* ELEMENTOS DE FUNDO */}
-        <path d="M 55 36 L 75 36 L 62 20 L 48 20 Z" fill="currentColor" opacity="0.2" />
-        <rect x="65" y="24" width="14" height="6" rx="2" fill="currentColor" opacity="0.2" />
-        <path d="M 30 32 L 22 22 L 14 22 L 24 32 Z" fill="currentColor" opacity="0.25" />
-
-        {/* ELEMENTOS PRINCIPAIS */}
-        <path
-          d="M 20 38 C 18 36, 25 28, 40 28 L 85 28 C 105 28, 112 32, 112 36 C 112 42, 102 46, 85 46 L 40 46 C 25 46, 18 40, 20 38 Z"
-          fill="currentColor"
-          opacity="0.9"
-        />
-        <path d="M 98 28.5 Q 106 28.5 109 33 L 100 33 Z" fill="currentColor" opacity="0.5" />
-        <path
-          d="M 45 35 L 85 35"
-          stroke="currentColor"
-          strokeWidth="2.5"
-          strokeDasharray="1 6"
-          strokeLinecap="round"
-          opacity="0.35"
-        />
-        <path d="M 40 28 L 24 8 L 14 8 L 28 28 Z" fill="currentColor" opacity="0.85" />
-        <path d="M 24 40 L 34 40 L 22 52 L 14 52 Z" fill="currentColor" opacity="0.85" />
-        <path d="M 48 40 L 75 40 L 52 64 L 35 64 Z" fill="currentColor" opacity="0.85" />
-        <path d="M 58 44 L 62 40 L 68 40 L 64 44 Z" fill="currentColor" opacity="0.9" />
-        <rect x="54" y="42" width="18" height="8" rx="3" fill="currentColor" />
-      </g>
-    </svg>
+    <div className="pointer-events-none absolute inset-0 z-0 opacity-[0.03] mix-blend-overlay">
+      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" className="h-full w-full opacity-50">
+        <filter id="noiseFilter">
+          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
+        </filter>
+        <rect width="100%" height="100%" filter="url(#noiseFilter)" />
+      </svg>
+    </div>
   )
 }
 
-function Cloud({ x, y, s, o, d, dx }: typeof CLOUDS[0]) {
-  const delay = -(d * 0.4)
+function Cloud({ top, size, opacity, duration, delay }: typeof CLOUDS[0]) {
   return (
     <div
-      className="absolute pointer-events-none"
+      className="absolute right-0 z-0 pointer-events-none text-zinc-900 dark:text-white"
       style={{
-        left: `${x}%`,
-        top: `${y}%`,
-        opacity: o,
-        transform: `scale(${s})`,
-        transformOrigin: 'left center',
-        animation: `ct-cloud-${Math.round(dx)} ${d}s ease-in-out ${delay}s infinite alternate`,
+        top: `${top}%`,
+        width: size,
+        height: size * 0.4,
+        background: 'radial-gradient(ellipse at center, currentColor 0%, transparent 70%)',
+        opacity: opacity * 0.5, // Suavizado para funcionar bem tanto no claro quanto no escuro
+        filter: 'blur(8px)',
+        transform: 'translateX(100%)',
+        animation: `ct-drift ${duration}s linear ${delay}s infinite`,
       }}
-    >
-      <svg width="110" height="44" viewBox="0 0 110 44" fill="currentColor" className="text-foreground blur-[1px]">
-        <ellipse cx="55" cy="34" rx="48" ry="12" />
-        <ellipse cx="36" cy="26" rx="26" ry="16" />
-        <ellipse cx="66" cy="22" rx="30" ry="18" />
-        <ellipse cx="50" cy="18" rx="20" ry="14" />
-      </svg>
+    />
+  )
+}
+
+function PlaneIcon() {
+  return (
+    <svg width="84" height="84" viewBox="0 0 120 120" fill="none" className="text-zinc-800 dark:text-zinc-200 drop-shadow-2xl">
+      <g style={{ transformOrigin: 'center' }}>
+        {/* Fuselagem */}
+        <path d="M100.5 60C100.5 64.1421 82.5 68 60 68C37.5 68 19.5 64.1421 19.5 60C19.5 55.8579 37.5 52 60 52C82.5 52 100.5 55.8579 100.5 60Z" fill="currentColor" opacity="0.9" />
+        {/* Asa Principal */}
+        <path d="M65 54L35 15C32 10 38 10 42 15L75 54H65Z" fill="currentColor" />
+        <path d="M65 66L35 105C32 110 38 110 42 105L75 66H65Z" fill="currentColor" />
+        {/* Asa Traseira */}
+        <path d="M30 55L15 35C13 32 16 31 18 35L35 55H30Z" fill="currentColor" opacity="0.8" />
+        <path d="M30 65L15 85C13 88 16 89 18 85L35 65H30Z" fill="currentColor" opacity="0.8" />
+        {/* Cockpit Window */}
+        <path d="M85 60C85 61.5 82 63 78 63C74 63 71 61.5 71 60C71 58.5 74 57 78 57C82 57 85 58.5 85 60Z" fill="currentColor" opacity="0.2" />
+      </g>
+    </svg>
+  )
+}
+
+function Barcode() {
+  const bars = React.useMemo(() => {
+    return Array.from({ length: 32 }).map(() => ({
+      width: Math.random() > 0.6 ? '3px' : '1.5px',
+      height: `${40 + Math.random() * 60}%`,
+    }))
+  }, [])
+
+  return (
+    <div className="flex items-end gap-[3px] h-8 opacity-40">
+      {bars.map((bar, i) => (
+        <div key={i} className="bg-zinc-900 dark:bg-white" style={bar} />
+      ))}
     </div>
   )
 }
 
+// --- COMPONENTE PRINCIPAL ---
+
 export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransitionOverlayProps) {
   const [messageIndex, setMessageIndex] = useState(0)
   const [msgOut, setMsgOut] = useState(false)
   const [visible, setVisible] = useState(false)
+  
   const onCompleteRef = useRef(onComplete)
   onCompleteRef.current = onComplete
 
   useEffect(() => {
-    const showTimer = setTimeout(() => setVisible(true), 20)
+    // Pequeno delay para garantir que a animação de entrada seja vista
+    const showTimer = setTimeout(() => setVisible(true), 50)
 
     let current = 0
     const msgInterval = setInterval(() => {
@@ -110,12 +116,12 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
         current = (current + 1) % MESSAGES.length
         setMessageIndex(current)
         setMsgOut(false)
-      }, 350)
+      }, 300) // Fade out do texto mais rápido
     }, MSG_INTERVAL)
 
     const fadeOutTimer = setTimeout(() => {
       setVisible(false)
-      setTimeout(() => onCompleteRef.current(), 500)
+      setTimeout(() => onCompleteRef.current(), 600) // Fade global mais ágil
     }, TOTAL_MS)
 
     return () => {
@@ -125,135 +131,233 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
     }
   }, [])
 
-  const uniqueDx = [...new Set(CLOUDS.map((c) => Math.round(c.dx)))]
-
   return (
     <div
-      className="fixed inset-0 z-[9999] flex flex-col items-center justify-center overflow-hidden bg-background"
-      style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s ease' }}
+      className="fixed inset-0 z-[9999] flex flex-col items-center justify-center overflow-hidden bg-zinc-50 dark:bg-zinc-950 font-sans transition-colors duration-500"
+      style={{
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1)',
+      }}
     >
-      {/* Gradiente de céu */}
+      <NoiseOverlay />
+
+      {/* CÉU GRADIENTE SUAVE - Adaptável ao tema via pseudo-elemento / var CSS local */}
       <div
-        className="absolute inset-0 pointer-events-none"
+        className="absolute inset-0 z-0 pointer-events-none opacity-50 dark:opacity-100"
         style={{
-          background: 'radial-gradient(ellipse 70% 50% at 50% 35%, var(--muted) 0%, transparent 100%)',
-          opacity: 0.6,
+          background: 'radial-gradient(circle at 50% -20%, rgba(150,150,150,0.2) 0%, transparent 80%)',
         }}
       />
 
-      {/* Nuvens */}
+      {/* NUVENS ATMOSFÉRICAS */}
       {CLOUDS.map((c, i) => (
         <Cloud key={i} {...c} />
       ))}
 
-      {/* Linha de horizonte */}
-      <div
-        className="absolute w-full pointer-events-none"
-        style={{ bottom: '26%', height: '1px', background: 'var(--border)', opacity: 0.3 }}
-      />
+      {/* CHÃO / PISTA - Adaptável */}
+      <div className="absolute bottom-0 z-0 w-full h-[25vh] bg-black/5 dark:bg-white/5 border-t border-black/10 dark:border-white/10 flex flex-col items-center justify-start overflow-hidden">
+        {/* Linha Central da Pista Animada */}
+        <div className="w-full h-[2px] mt-6 relative opacity-30">
+          <div className="absolute inset-0 w-[200%] animate-runway-lines flex gap-12">
+             {Array.from({ length: 30 }).map((_, i) => (
+                <div key={i} className="h-full w-16 bg-black/30 dark:bg-white/30" />
+             ))}
+          </div>
+        </div>
+      </div>
 
-      {/* Pista animada (Ilusão de velocidade) */}
+      {/* AVIÃO ANIMADO - Movimento contínuo e mais rápido */}
       <div
-        className="absolute pointer-events-none overflow-hidden"
-        style={{ bottom: '24%', left: '50%', transform: 'translateX(-50%)', width: '300px' }}
+        className="absolute z-10 pointer-events-none"
+        style={{
+          bottom: 'calc(25vh + 10px)',
+          left: '-10%',
+          transformOrigin: 'center',
+          animation: 'ct-takeoff 3s ease-in forwards',
+        }}
       >
-        <svg width="400" height="24" viewBox="0 0 400 24" fill="none" className="text-foreground">
-          <line x1="0" y1="1" x2="400" y2="1" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.18" />
-          <line x1="0" y1="23" x2="400" y2="23" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.18" />
-          <g style={{ animation: 'ct-runway 0.4s linear infinite' }}>
-            {Array.from({ length: 14 }).map((_, i) => (
-              <rect key={i} x={i * 35} y={10} width={20} height={4} rx={2} fill="currentColor" opacity="0.1" />
-            ))}
-          </g>
-        </svg>
+        <PlaneIcon />
       </div>
 
-      {/* Avião lateral + rastro (Animado via GPU usando Translate3D) */}
+      {/* TICKET DE EMBARQUE PREMIUM - Tema Adaptável */}
       <div
-        className="absolute pointer-events-none"
+        className="ct-ticket relative z-20 w-[360px] max-w-[90vw] bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.2)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.8)] border border-zinc-200 dark:border-zinc-800 -translate-y-8 flex flex-col"
         style={{
-          bottom: '24%',
-          left: '0', // Ponto de partida fixo para usar apenas translate3d
-          animation: 'ct-takeoff 3.8s cubic-bezier(0.3, 0, 0.2, 1) forwards',
+          animation: visible
+            ? 'ct-card-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, ct-float 4s ease-in-out 0.8s infinite alternate'
+            : 'none',
+          opacity: 0,
         }}
       >
-        {/* Rastro */}
-        <div
-          className="absolute pointer-events-none"
-          style={{ right: '100%', top: '40%', transform: 'translateY(-50%)' }}
-        >
-          <svg width="180" height="8" viewBox="0 0 180 8" fill="none">
-            <defs>
-              <linearGradient id="tg" x1="0%" y1="0%" x2="100%" y2="0%">
-                <stop offset="0%" stopColor="currentColor" stopOpacity="0" />
-                <stop offset="100%" stopColor="currentColor" stopOpacity="0.15" />
-              </linearGradient>
-            </defs>
-            <rect x="0" y="1" width="180" height="2.5" rx="1.5" fill="url(#tg)" className="text-foreground" />
-            <rect x="20" y="5" width="130" height="1.5" rx="1" fill="url(#tg)" className="text-foreground" opacity="0.4" />
-          </svg>
-        </div>
+        {/* Topo do Ticket */}
+        <div className="p-8 pb-6 relative">
+          <div className="absolute top-0 right-0 p-4 opacity-10">
+             {/* Símbolo decorativo */}
+             <svg width="40" height="40" viewBox="0 0 100 100" fill="currentColor">
+                <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="2" fill="none" />
+                <circle cx="50" cy="50" r="15" fill="currentColor" />
+             </svg>
+          </div>
 
-        <PlaneSide size={64} />
-      </div>
+          <div className="flex justify-between items-center mb-8">
+            <span className="text-[9px] font-bold uppercase tracking-[0.3em] text-zinc-500 dark:text-zinc-400">
+              Boarding Pass
+            </span>
+            <span className="text-[9px] font-bold uppercase tracking-[0.1em] text-zinc-600 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-sm">
+              Priority
+            </span>
+          </div>
 
-      {/* Conteúdo central */}
-      <div className="relative flex flex-col items-center gap-4 z-10 backdrop-blur-sm bg-background/30 p-8 rounded-3xl">
-        <p className="text-xs font-semibold tracking-[0.35em] uppercase text-muted-foreground">
-          Destino
-        </p>
-
-        <h2
-          className="text-5xl font-bold text-foreground text-center leading-tight px-8 drop-shadow-sm"
-          style={{ fontFamily: "'Syne', sans-serif" }}
-        >
-          {clientName}
-        </h2>
+          <p className="text-[10px] uppercase tracking-[0.2em] text-zinc-400 dark:text-zinc-500 mb-1 font-medium">
+            Passenger
+          </p>
+          <h2 className="text-3xl font-black truncate tracking-tighter text-zinc-900 dark:text-white">
+            {clientName}
+          </h2>
+          
+          <div className="mt-6 flex justify-between items-end border-t border-zinc-200 dark:border-zinc-800 pt-4">
+             <div>
+                <p className="text-[8px] uppercase tracking-widest text-zinc-400 dark:text-zinc-500">Flight</p>
+                <p className="text-sm font-bold font-mono tracking-wide mt-0.5">NX-012</p>
+             </div>
+             <div>
+                <p className="text-[8px] uppercase tracking-widest text-zinc-400 dark:text-zinc-500 text-right">Gate</p>
+                <p className="text-sm font-bold font-mono tracking-wide mt-0.5 text-right">A-42</p>
+             </div>
+          </div>
+        </div>
 
-        <div className="flex items-center gap-3 w-44">
-          <div className="flex-1 h-px bg-border" />
-          <span className="text-muted-foreground/30 text-xs">✦</span>
-          <div className="flex-1 h-px bg-border" />
+        {/* Linha Picotada */}
+        <div className="relative h-4 flex items-center justify-center bg-white dark:bg-zinc-900">
+          <div className="absolute left-[-8px] w-4 h-4 bg-zinc-50 dark:bg-zinc-950 rounded-full border-r border-zinc-200 dark:border-zinc-800" />
+          <div className="absolute right-[-8px] w-4 h-4 bg-zinc-50 dark:bg-zinc-950 rounded-full border-l border-zinc-200 dark:border-zinc-800" />
+          <div className="w-[85%] border-t-[2px] border-dashed border-zinc-300 dark:border-zinc-700" />
         </div>
 
-        <p
-          className="text-sm font-medium text-muted-foreground text-center whitespace-nowrap"
-          style={{
-            opacity: msgOut ? 0 : 0.85,
-            transform: msgOut ? 'translateY(4px)' : 'translateY(0)',
-            transition: 'opacity 0.35s ease, transform 0.35s ease',
-          }}
-        >
-          {MESSAGES[messageIndex]}
-        </p>
+        {/* Canhoto Inferior */}
+        <div className="p-8 pt-6 bg-white dark:bg-zinc-900 flex flex-col items-center justify-between min-h-[120px] rounded-b-2xl">
+          <p
+            className="text-xs font-semibold tracking-wide text-zinc-600 dark:text-zinc-400 text-center uppercase"
+            style={{
+              opacity: msgOut ? 0 : 1,
+              transform: msgOut ? 'translateY(-4px)' : 'translateY(0)',
+              transition: 'opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1)',
+            }}
+          >
+            {MESSAGES[messageIndex]}
+          </p>
+
+          <div className="w-full mt-4 flex flex-col items-center gap-2">
+            <Barcode />
+            <p className="text-[8px] font-mono tracking-[0.4em] text-zinc-400 dark:text-zinc-500">
+              0010110 0110001
+            </p>
+          </div>
+        </div>
       </div>
 
+      {/* --- ESTILOS INJETADOS (KEYFRAMES) --- */}
       <style>{`
-        /* Animação via GPU usando viewports (vw/vh) e translate3d */
-        @keyframes ct-takeoff {
-          0%   { transform: translate3d(-15vw, 0, 0) rotate(0deg); }
-          45%  { transform: translate3d(45vw, 0, 0) rotate(0deg); }
-          65%  { transform: translate3d(60vw, -8vh, 0) rotate(-12deg); }
-          85%  { transform: translate3d(80vw, -30vh, 0) rotate(-22deg); }
-          100% { transform: translate3d(120vw, -60vh, 0) rotate(-28deg); }
+        /* Recorte de ticket suave */
+        .ct-ticket {
+          border-radius: 1.25rem;
         }
 
-        /* Faz a pista correr para trás dando ilusão de velocidade horizontal */
-        @keyframes ct-runway {
+        /* Movimento contínuo das nuvens */
+        @keyframes ct-drift {
+          from { transform: translateX(100vw); }
+          to   { transform: translateX(-100vw); }
+        }
+
+        /* Linhas da pista correndo para trás para dar ilusão de velocidade */
+        @keyframes runway-lines {
           from { transform: translateX(0); }
-          to   { transform: translateX(-35px); }
+          to   { transform: translateX(-50%); }
+        }
+
+        /* Animação Física FLUIDA do Avião (Sem "travadinhas") */
+        @keyframes ct-takeoff {
+          0% { 
+            transform: translate3d(-20vw, 0, 0) rotate(0deg); 
+          }
+          30% { 
+            transform: translate3d(25vw, 0, 0) rotate(0deg); /* Corre suavemente sem bobbing */
+          }
+          100% { 
+            transform: translate3d(120vw, -55vh, 0) rotate(-22deg); /* Sobe num único fluxo */
+          }
+        }
+
+        /* Entrada orgânica do Ticket */
+        @keyframes ct-card-enter {
+          0% { 
+            opacity: 0; 
+            transform: translateY(4rem) scale(0.9) rotateX(-10deg); 
+          }
+          100% { 
+            opacity: 1; 
+            transform: translateY(0) scale(1) rotateX(0deg); 
+          }
+        }
+
+        /* Flutuação leve e orgânica após a entrada */
+        @keyframes ct-float {
+          0% { transform: translateY(0); }
+          100% { transform: translateY(-8px); }
         }
 
-        ${uniqueDx
-          .map(
-            (dx) => `
-        @keyframes ct-cloud-${dx} {
-          from { transform: translateX(-${dx}px); }
-          to   { transform: translateX(${dx}px); }
-        }`
-          )
-          .join('\n')}
+        .animate-runway-lines {
+          animation: runway-lines 0.4s linear infinite;
+        }
       `}</style>
     </div>
   )
+}
+
+// === COMPONENTE APP DE DEMONSTRAÇÃO (Apenas para o Preview) ===
+export default function App() {
+  const [showOverlay, setShowOverlay] = useState(false)
+  const [isDarkMode, setIsDarkMode] = useState(false)
+
+  // Injeta a classe dark no HTML para o Tailwind aplicar os estilos adaptáveis
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [isDarkMode])
+
+  return (
+    <div className="min-h-screen w-full flex flex-col items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 font-sans transition-colors duration-300">
+      <div className="absolute top-4 right-4">
+        <button 
+          onClick={() => setIsDarkMode(!isDarkMode)}
+          className="px-4 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
+        >
+          Tema Atual: {isDarkMode ? '🌙 Escuro' : '☀️ Claro'}
+        </button>
+      </div>
+
+      <div className="text-center">
+        <h1 className="text-3xl font-black mb-4">Dashboard Principal</h1>
+        <p className="text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto">
+          Clique no botão abaixo para ver a transição 100% fluida e adaptável.
+        </p>
+        <button
+          onClick={() => setShowOverlay(true)}
+          className="px-6 py-3 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full font-medium shadow-lg hover:scale-105 active:scale-95 transition-transform"
+        >
+          Iniciar Transição
+        </button>
+      </div>
+
+      {showOverlay && (
+        <ClientTransitionOverlay
+          clientName="ALEXANDRE SILVA"
+          onComplete={() => setShowOverlay(false)}
+        />
+      )}
+    </div>
+  )
 }
\ No newline at end of file

From 50e9dbefe1bbe30995edf90e84f2d959e70c59ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Fri, 17 Apr 2026 12:02:24 -0300
Subject: [PATCH 04/13] =?UTF-8?q?feat:=20:sparkles:=20ajustado=20view=20e?=
 =?UTF-8?q?=20envio=20de=20notifica=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .claude/settings.local.json                   |    3 +-
 docs/hooks/notifications.md                   |   16 +
 docs/views/admin.md                           |   22 +
 package-lock.json                             | 1374 ++++++++++++++++-
 package.json                                  |    2 +
 src/components/ClientTransitionOverlay.tsx    |  265 ++--
 src/components/NotificationBell.tsx           |   36 +-
 src/lib/notifications.ts                      |   20 +
 .../admin/components/NotificationsPanel.tsx   |  490 +++---
 9 files changed, 1772 insertions(+), 456 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 2cd7175..e1ddaa6 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -37,7 +37,8 @@
       "Bash(mv components/DemandasFilters.tsx components/TasksFilters.tsx)",
       "Bash(npx --yes tsc --noEmit --project \"c:/Users/dinam/Documents/Projetos/run-way/tsconfig.json\")",
       "Bash(npm show:*)",
-      "Bash(ls c:/Users/dinam/Documents/Projetos/run-way/node_modules/boneyard-js/react*)"
+      "Bash(ls c:/Users/dinam/Documents/Projetos/run-way/node_modules/boneyard-js/react*)",
+      "Bash(npm list *)"
     ]
   },
   "hooks": {
diff --git a/docs/hooks/notifications.md b/docs/hooks/notifications.md
index 33aee8f..6bea740 100644
--- a/docs/hooks/notifications.md
+++ b/docs/hooks/notifications.md
@@ -100,6 +100,22 @@ Componente de sino com dropdown. Recebe notificações já carregadas via props
 - **Todas** — todas as notificações do usuário
 - **Cliente atual** — filtra por `client_id === selectedClientId`
 
+---
+
+# createNotificationForAll
+
+```ts
+createNotificationForAll(clientIds: string[], title: string, message: string, type?: string): Promise<void>
+```
+
+Insere um broadcast (`user_id = null`) para cada `clientId` em uma única operação `insert` em lote. Usado pelo `NotificationsPanel` na opção de destino **Todos**.
+
+---
+
+## Formatação da mensagem
+
+O campo `message` suporta **Markdown** — negrito, itálico, quebras de linha etc. Renderizado via `react-markdown` com classes `prose-xs` do Tailwind.
+
 ## Audiência
 
 Cada item exibe ícone e label indicando o destinatário:
diff --git a/docs/views/admin.md b/docs/views/admin.md
index 6ad8106..f8eb682 100644
--- a/docs/views/admin.md
+++ b/docs/views/admin.md
@@ -107,6 +107,28 @@ No tab **Membros**, os filtros disponíveis são: **Todos / Ativos / Sem acesso
 - **Sem acesso** filtra members ativos sem `auth_user_id`
 - **Desativados** filtra members com `is_active === false`
 
+## NotificationsPanel
+
+Aba de envio e histórico de notificações manuais.
+
+### Destinos
+
+| Opção | Comportamento |
+|---|---|
+| **Usuário** | Notificação direta a um membro ativo (`user_id` preenchido, `manual`) |
+| **Cliente** | Broadcast para todos os membros de um cliente (`user_id = null`, `client_id`) |
+| **Todos** | Broadcast para todos os clientes cadastrados — chama `createNotificationForAll` |
+
+### Editor de mensagem
+
+O campo **Mensagem** tem tabs **Editar / Preview**:
+- **Editar** — textarea mono; suporta Markdown (`**negrito**`, `_itálico_`, quebras de linha)
+- **Preview** — renderiza via `react-markdown` antes do envio
+
+### Histórico
+
+Scroll independente, contido em `100vh`. Mensagens renderizadas como Markdown via `react-markdown`.
+
 ## Impersonation
 
 Admin pode visualizar a aplicação como um cliente específico via `impersonatedClientId` (estado no `AuthContext`). Um banner amarelo aparece na AdminView quando ativo, com botão para sair da visão.
diff --git a/package-lock.json b/package-lock.json
index 4f804fb..a12aec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,8 @@
         "radix-ui": "^1.4.3",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "react-markdown": "^10.1.0",
+        "remark-breaks": "^4.0.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "vaul": "^1.1.2",
@@ -3380,6 +3382,15 @@
         "assertion-error": "^2.0.1"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -3391,9 +3402,26 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3401,6 +3429,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.12.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.2.tgz",
@@ -3414,7 +3457,6 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3430,6 +3472,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -3734,6 +3782,12 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
@@ -3979,6 +4033,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -4132,6 +4196,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -4159,6 +4233,46 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -4200,6 +4314,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4254,7 +4378,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -4275,7 +4398,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -4296,6 +4418,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4307,7 +4442,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4329,6 +4463,19 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -4575,6 +4722,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -4605,6 +4762,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4771,6 +4934,46 @@
         "node": ">=8"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -4801,6 +5004,16 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/iceberg-js": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
@@ -4857,6 +5070,46 @@
         "node": ">=8"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4880,6 +5133,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -5331,6 +5606,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -5371,92 +5656,728 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.27.1",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
-      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "dev": true,
-      "license": "CC0-1.0"
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
     },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "dev": true,
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
       "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/minimatch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
       },
-      "engines": {
-        "node": "*"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "devOptional": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
       "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
       },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.37",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
-      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/obug": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
-      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
-      "dev": true,
-      "funding": [
-        "https://github.com/sponsors/sxzz",
-        "https://opencollective.com/debug"
-      ],
-      "license": "MIT"
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
     },
-    "node_modules/optionator": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-      "dev": true,
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-newline-to-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-newline-to-break/-/mdast-util-newline-to-break-2.0.0.tgz",
+      "integrity": "sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-find-and-replace": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
+      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "deep-is": "^0.1.3",
@@ -5515,6 +6436,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
@@ -5688,6 +6634,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5868,6 +6824,33 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -5951,6 +6934,54 @@
         "node": ">=8"
       }
     },
+    "node_modules/remark-breaks": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-4.0.0.tgz",
+      "integrity": "sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-newline-to-break": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -6091,6 +7122,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -6105,6 +7146,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -6131,6 +7186,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6272,6 +7345,26 @@
         "node": ">=20"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -6358,6 +7451,93 @@
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "license": "MIT"
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -6464,6 +7644,34 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz",
@@ -6832,6 +8040,16 @@
           "optional": true
         }
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 71c49b1..5a8872f 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
+    "remark-breaks": "^4.0.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
diff --git a/src/components/ClientTransitionOverlay.tsx b/src/components/ClientTransitionOverlay.tsx
index d2d5f46..73fb5c6 100644
--- a/src/components/ClientTransitionOverlay.tsx
+++ b/src/components/ClientTransitionOverlay.tsx
@@ -1,20 +1,20 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from "react";
 
 // --- TIPO DAS PROPS ---
 interface ClientTransitionOverlayProps {
-  clientName: string
-  onComplete: () => void
+  clientName: string;
+  onComplete: () => void;
 }
 
 const MESSAGES = [
-  '🛂 Verificando credenciais',
-  '🎫 Confirmando embarque',
-  '🛫 Autorização de torre',
-  '✈️ Em rota de cruzeiro',
-]
+  "🛂 Verificando credenciais",
+  "🎫 Confirmando embarque",
+  "🛫 Autorização de torre",
+  "✈️ Em rota de cruzeiro",
+];
 
-const TOTAL_MS = 3200 // Transição mais rápida (reduzida de 4600ms para 3200ms)
-const MSG_INTERVAL = TOTAL_MS / MESSAGES.length
+const TOTAL_MS = 3200; // Transição mais rápida (reduzida de 4600ms para 3200ms)
+const MSG_INTERVAL = TOTAL_MS / MESSAGES.length;
 
 // Nuvens com posições e velocidades otimizadas para fluir da direita para a esquerda
 const CLOUDS = [
@@ -24,24 +24,33 @@ const CLOUDS = [
   { top: 45, size: 400, opacity: 0.3, duration: 40, delay: -15 },
   { top: 10, size: 150, opacity: 0.5, duration: 25, delay: -2 },
   { top: 60, size: 350, opacity: 0.2, duration: 60, delay: -30 },
-]
+];
 
 // --- COMPONENTES AUXILIARES ---
 
 function NoiseOverlay() {
   return (
     <div className="pointer-events-none absolute inset-0 z-0 opacity-[0.03] mix-blend-overlay">
-      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" className="h-full w-full opacity-50">
+      <svg
+        viewBox="0 0 200 200"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-full w-full opacity-50"
+      >
         <filter id="noiseFilter">
-          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.85"
+            numOctaves="3"
+            stitchTiles="stitch"
+          />
         </filter>
         <rect width="100%" height="100%" filter="url(#noiseFilter)" />
       </svg>
     </div>
-  )
+  );
 }
 
-function Cloud({ top, size, opacity, duration, delay }: typeof CLOUDS[0]) {
+function Cloud({ top, size, opacity, duration, delay }: (typeof CLOUDS)[0]) {
   return (
     <div
       className="absolute right-0 z-0 pointer-events-none text-zinc-900 dark:text-white"
@@ -49,42 +58,78 @@ function Cloud({ top, size, opacity, duration, delay }: typeof CLOUDS[0]) {
         top: `${top}%`,
         width: size,
         height: size * 0.4,
-        background: 'radial-gradient(ellipse at center, currentColor 0%, transparent 70%)',
+        background:
+          "radial-gradient(ellipse at center, currentColor 0%, transparent 70%)",
         opacity: opacity * 0.5, // Suavizado para funcionar bem tanto no claro quanto no escuro
-        filter: 'blur(8px)',
-        transform: 'translateX(100%)',
+        filter: "blur(8px)",
+        transform: "translateX(100%)",
         animation: `ct-drift ${duration}s linear ${delay}s infinite`,
       }}
     />
-  )
+  );
 }
 
 function PlaneIcon() {
   return (
-    <svg width="84" height="84" viewBox="0 0 120 120" fill="none" className="text-zinc-800 dark:text-zinc-200 drop-shadow-2xl">
-      <g style={{ transformOrigin: 'center' }}>
+    <svg
+      width="84"
+      height="84"
+      viewBox="0 0 120 120"
+      fill="none"
+      className="text-zinc-800 dark:text-zinc-200 drop-shadow-2xl"
+    >
+      <g style={{ transformOrigin: "center" }}>
         {/* Fuselagem */}
-        <path d="M100.5 60C100.5 64.1421 82.5 68 60 68C37.5 68 19.5 64.1421 19.5 60C19.5 55.8579 37.5 52 60 52C82.5 52 100.5 55.8579 100.5 60Z" fill="currentColor" opacity="0.9" />
+        <path
+          d="M100.5 60C100.5 64.1421 82.5 68 60 68C37.5 68 19.5 64.1421 19.5 60C19.5 55.8579 37.5 52 60 52C82.5 52 100.5 55.8579 100.5 60Z"
+          fill="currentColor"
+          opacity="0.9"
+        />
         {/* Asa Principal */}
-        <path d="M65 54L35 15C32 10 38 10 42 15L75 54H65Z" fill="currentColor" />
-        <path d="M65 66L35 105C32 110 38 110 42 105L75 66H65Z" fill="currentColor" />
+        <path
+          d="M65 54L35 15C32 10 38 10 42 15L75 54H65Z"
+          fill="currentColor"
+        />
+        <path
+          d="M65 66L35 105C32 110 38 110 42 105L75 66H65Z"
+          fill="currentColor"
+        />
         {/* Asa Traseira */}
-        <path d="M30 55L15 35C13 32 16 31 18 35L35 55H30Z" fill="currentColor" opacity="0.8" />
-        <path d="M30 65L15 85C13 88 16 89 18 85L35 65H30Z" fill="currentColor" opacity="0.8" />
+        <path
+          d="M30 55L15 35C13 32 16 31 18 35L35 55H30Z"
+          fill="currentColor"
+          opacity="0.8"
+        />
+        <path
+          d="M30 65L15 85C13 88 16 89 18 85L35 65H30Z"
+          fill="currentColor"
+          opacity="0.8"
+        />
         {/* Cockpit Window */}
-        <path d="M85 60C85 61.5 82 63 78 63C74 63 71 61.5 71 60C71 58.5 74 57 78 57C82 57 85 58.5 85 60Z" fill="currentColor" opacity="0.2" />
+        <path
+          d="M85 60C85 61.5 82 63 78 63C74 63 71 61.5 71 60C71 58.5 74 57 78 57C82 57 85 58.5 85 60Z"
+          fill="currentColor"
+          opacity="0.2"
+        />
       </g>
     </svg>
-  )
+  );
 }
 
+const BARCODE_BARS = Array.from({ length: 32 }).map((_, i) => {
+  // deterministic pseudo-random based on index to avoid impure render
+  const seed = Math.sin(i * 9301 + 49297) * 233280;
+  const r1 = seed - Math.floor(seed);
+  const seed2 = Math.sin(i * 4321 + 12345) * 233280;
+  const r2 = seed2 - Math.floor(seed2);
+  return {
+    width: r1 > 0.6 ? "3px" : "1.5px",
+    height: `${40 + r2 * 60}%`,
+  };
+});
+
 function Barcode() {
-  const bars = React.useMemo(() => {
-    return Array.from({ length: 32 }).map(() => ({
-      width: Math.random() > 0.6 ? '3px' : '1.5px',
-      height: `${40 + Math.random() * 60}%`,
-    }))
-  }, [])
+  const bars = BARCODE_BARS;
 
   return (
     <div className="flex items-end gap-[3px] h-8 opacity-40">
@@ -92,51 +137,56 @@ function Barcode() {
         <div key={i} className="bg-zinc-900 dark:bg-white" style={bar} />
       ))}
     </div>
-  )
+  );
 }
 
 // --- COMPONENTE PRINCIPAL ---
 
-export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransitionOverlayProps) {
-  const [messageIndex, setMessageIndex] = useState(0)
-  const [msgOut, setMsgOut] = useState(false)
-  const [visible, setVisible] = useState(false)
-  
-  const onCompleteRef = useRef(onComplete)
-  onCompleteRef.current = onComplete
+export function ClientTransitionOverlay({
+  clientName,
+  onComplete,
+}: ClientTransitionOverlayProps) {
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [msgOut, setMsgOut] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  const onCompleteRef = useRef(onComplete);
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  });
 
   useEffect(() => {
     // Pequeno delay para garantir que a animação de entrada seja vista
-    const showTimer = setTimeout(() => setVisible(true), 50)
+    const showTimer = setTimeout(() => setVisible(true), 50);
 
-    let current = 0
+    let current = 0;
     const msgInterval = setInterval(() => {
-      setMsgOut(true)
+      setMsgOut(true);
       setTimeout(() => {
-        current = (current + 1) % MESSAGES.length
-        setMessageIndex(current)
-        setMsgOut(false)
-      }, 300) // Fade out do texto mais rápido
-    }, MSG_INTERVAL)
+        current = (current + 1) % MESSAGES.length;
+        setMessageIndex(current);
+        setMsgOut(false);
+      }, 300); // Fade out do texto mais rápido
+    }, MSG_INTERVAL);
 
     const fadeOutTimer = setTimeout(() => {
-      setVisible(false)
-      setTimeout(() => onCompleteRef.current(), 600) // Fade global mais ágil
-    }, TOTAL_MS)
+      setVisible(false);
+      setTimeout(() => onCompleteRef.current(), 600); // Fade global mais ágil
+    }, TOTAL_MS);
 
     return () => {
-      clearTimeout(showTimer)
-      clearInterval(msgInterval)
-      clearTimeout(fadeOutTimer)
-    }
-  }, [])
+      clearTimeout(showTimer);
+      clearInterval(msgInterval);
+      clearTimeout(fadeOutTimer);
+    };
+  }, []);
 
   return (
     <div
       className="fixed inset-0 z-[9999] flex flex-col items-center justify-center overflow-hidden bg-zinc-50 dark:bg-zinc-950 font-sans transition-colors duration-500"
       style={{
         opacity: visible ? 1 : 0,
-        transition: 'opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1)',
+        transition: "opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1)",
       }}
     >
       <NoiseOverlay />
@@ -145,7 +195,8 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
       <div
         className="absolute inset-0 z-0 pointer-events-none opacity-50 dark:opacity-100"
         style={{
-          background: 'radial-gradient(circle at 50% -20%, rgba(150,150,150,0.2) 0%, transparent 80%)',
+          background:
+            "radial-gradient(circle at 50% -20%, rgba(150,150,150,0.2) 0%, transparent 80%)",
         }}
       />
 
@@ -159,9 +210,12 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
         {/* Linha Central da Pista Animada */}
         <div className="w-full h-[2px] mt-6 relative opacity-30">
           <div className="absolute inset-0 w-[200%] animate-runway-lines flex gap-12">
-             {Array.from({ length: 30 }).map((_, i) => (
-                <div key={i} className="h-full w-16 bg-black/30 dark:bg-white/30" />
-             ))}
+            {Array.from({ length: 30 }).map((_, i) => (
+              <div
+                key={i}
+                className="h-full w-16 bg-black/30 dark:bg-white/30"
+              />
+            ))}
           </div>
         </div>
       </div>
@@ -170,10 +224,10 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
       <div
         className="absolute z-10 pointer-events-none"
         style={{
-          bottom: 'calc(25vh + 10px)',
-          left: '-10%',
-          transformOrigin: 'center',
-          animation: 'ct-takeoff 3s ease-in forwards',
+          bottom: "calc(25vh + 10px)",
+          left: "-10%",
+          transformOrigin: "center",
+          animation: "ct-takeoff 3s ease-in forwards",
         }}
       >
         <PlaneIcon />
@@ -184,19 +238,31 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
         className="ct-ticket relative z-20 w-[360px] max-w-[90vw] bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.2)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.8)] border border-zinc-200 dark:border-zinc-800 -translate-y-8 flex flex-col"
         style={{
           animation: visible
-            ? 'ct-card-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, ct-float 4s ease-in-out 0.8s infinite alternate'
-            : 'none',
+            ? "ct-card-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, ct-float 4s ease-in-out 0.8s infinite alternate"
+            : "none",
           opacity: 0,
         }}
       >
         {/* Topo do Ticket */}
         <div className="p-8 pb-6 relative">
           <div className="absolute top-0 right-0 p-4 opacity-10">
-             {/* Símbolo decorativo */}
-             <svg width="40" height="40" viewBox="0 0 100 100" fill="currentColor">
-                <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="2" fill="none" />
-                <circle cx="50" cy="50" r="15" fill="currentColor" />
-             </svg>
+            {/* Símbolo decorativo */}
+            <svg
+              width="40"
+              height="40"
+              viewBox="0 0 100 100"
+              fill="currentColor"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                r="40"
+                stroke="currentColor"
+                strokeWidth="2"
+                fill="none"
+              />
+              <circle cx="50" cy="50" r="15" fill="currentColor" />
+            </svg>
           </div>
 
           <div className="flex justify-between items-center mb-8">
@@ -214,16 +280,24 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
           <h2 className="text-3xl font-black truncate tracking-tighter text-zinc-900 dark:text-white">
             {clientName}
           </h2>
-          
+
           <div className="mt-6 flex justify-between items-end border-t border-zinc-200 dark:border-zinc-800 pt-4">
-             <div>
-                <p className="text-[8px] uppercase tracking-widest text-zinc-400 dark:text-zinc-500">Flight</p>
-                <p className="text-sm font-bold font-mono tracking-wide mt-0.5">NX-012</p>
-             </div>
-             <div>
-                <p className="text-[8px] uppercase tracking-widest text-zinc-400 dark:text-zinc-500 text-right">Gate</p>
-                <p className="text-sm font-bold font-mono tracking-wide mt-0.5 text-right">A-42</p>
-             </div>
+            <div>
+              <p className="text-[8px] uppercase tracking-widest text-zinc-400 dark:text-zinc-500">
+                Flight
+              </p>
+              <p className="text-sm font-bold font-mono tracking-wide mt-0.5">
+                NX-012
+              </p>
+            </div>
+            <div>
+              <p className="text-[8px] uppercase tracking-widest text-zinc-400 dark:text-zinc-500 text-right">
+                Gate
+              </p>
+              <p className="text-sm font-bold font-mono tracking-wide mt-0.5 text-right">
+                A-42
+              </p>
+            </div>
           </div>
         </div>
 
@@ -240,8 +314,9 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
             className="text-xs font-semibold tracking-wide text-zinc-600 dark:text-zinc-400 text-center uppercase"
             style={{
               opacity: msgOut ? 0 : 1,
-              transform: msgOut ? 'translateY(-4px)' : 'translateY(0)',
-              transition: 'opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1)',
+              transform: msgOut ? "translateY(-4px)" : "translateY(0)",
+              transition:
+                "opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1)",
             }}
           >
             {MESSAGES[messageIndex]}
@@ -311,31 +386,31 @@ export function ClientTransitionOverlay({ clientName, onComplete }: ClientTransi
         }
       `}</style>
     </div>
-  )
+  );
 }
 
 // === COMPONENTE APP DE DEMONSTRAÇÃO (Apenas para o Preview) ===
 export default function App() {
-  const [showOverlay, setShowOverlay] = useState(false)
-  const [isDarkMode, setIsDarkMode] = useState(false)
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   // Injeta a classe dark no HTML para o Tailwind aplicar os estilos adaptáveis
   useEffect(() => {
     if (isDarkMode) {
-      document.documentElement.classList.add('dark')
+      document.documentElement.classList.add("dark");
     } else {
-      document.documentElement.classList.remove('dark')
+      document.documentElement.classList.remove("dark");
     }
-  }, [isDarkMode])
+  }, [isDarkMode]);
 
   return (
     <div className="min-h-screen w-full flex flex-col items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 font-sans transition-colors duration-300">
       <div className="absolute top-4 right-4">
-        <button 
+        <button
           onClick={() => setIsDarkMode(!isDarkMode)}
           className="px-4 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
         >
-          Tema Atual: {isDarkMode ? '🌙 Escuro' : '☀️ Claro'}
+          Tema Atual: {isDarkMode ? "🌙 Escuro" : "☀️ Claro"}
         </button>
       </div>
 
@@ -359,5 +434,5 @@ export default function App() {
         />
       )}
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index eaeba2d..7f1dd15 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -1,5 +1,7 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
-import { Bell, CheckCheck, User, Users } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkBreaks from 'remark-breaks'
+import { Bell, CheckCheck, UserCheck, UserX, ShieldCheck, ShieldOff, Megaphone, MessageSquare, ClipboardList } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -74,6 +76,19 @@ function groupNotificationsByDate(notifications: Notification[]): Map<string, No
   return sorted
 }
 
+function getNotificationTypeIcon(type: string): React.ReactNode {
+  switch (type) {
+    case 'step_assigned': return <UserCheck className="w-3.5 h-3.5 text-emerald-500" />
+    case 'step_unassigned': return <UserX className="w-3.5 h-3.5 text-orange-500" />
+    case 'role_changed': return <ShieldCheck className="w-3.5 h-3.5 text-violet-500" />
+    case 'client_access_granted': return <ShieldCheck className="w-3.5 h-3.5 text-blue-500" />
+    case 'client_access_revoked': return <ShieldOff className="w-3.5 h-3.5 text-destructive" />
+    case 'admin_broadcast': return <Megaphone className="w-3.5 h-3.5 text-primary" />
+    case 'manual': return <MessageSquare className="w-3.5 h-3.5 text-muted-foreground" />
+    default: return <ClipboardList className="w-3.5 h-3.5 text-muted-foreground" />
+  }
+}
+
 function playNotificationSound() {
   const audio = new Audio('/notification.mp3')
   audio.volume = 0.3
@@ -106,13 +121,8 @@ function NotificationItem({
         notification.read ? 'hover:bg-muted/40' : 'bg-primary/5 hover:bg-primary/10'
       }`}
     >
-      {/* Ícone de audiência */}
-      <div className={`mt-0.5 flex-shrink-0 p-1.5 rounded-full ${
-        isPersonal
-          ? 'bg-blue-200/80 text-blue-700 dark:bg-blue-900/60 dark:text-blue-300'
-          : 'bg-muted text-muted-foreground'
-      }`}>
-        {isPersonal ? <User className="w-3 h-3" /> : <Users className="w-3 h-3" />}
+      <div className="mt-0.5 flex-shrink-0 p-1.5 rounded-full bg-muted">
+        {getNotificationTypeIcon(notification.type)}
       </div>
 
       <div className="flex flex-col gap-0.5 flex-1 min-w-0">
@@ -125,9 +135,9 @@ function NotificationItem({
           </span>
         </div>
 
-        <p className="text-xs text-muted-foreground line-clamp-2">
-          {notification.message}
-        </p>
+        <div className="text-xs text-muted-foreground prose prose-xs dark:prose-invert max-w-none [&_p]:mb-0 [&_strong]:text-foreground [&_em]:text-foreground/80">
+          <ReactMarkdown remarkPlugins={[remarkBreaks]}>{notification.message}</ReactMarkdown>
+        </div>
 
         <span className={`text-[10px] mt-0.5 font-medium ${
           isPersonal ? 'text-blue-600 dark:text-blue-400' : 'text-muted-foreground'
@@ -246,7 +256,7 @@ export function NotificationBell({
                 e.preventDefault()
                 onMarkAllAsRead()
               }}
-              className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+              className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors cursor-pointer"
             >
               <CheckCheck className="w-3.5 h-3.5" />
               Marcar como lidas
@@ -294,6 +304,7 @@ export function NotificationBell({
                     <div className="px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground bg-muted/40 sticky top-0 z-10">
                       {GROUP_LABELS[groupKey]}
                     </div>
+                    <div className="flex flex-col gap-1">
                     {items.map((notification) => (
                       <NotificationItem
                         key={notification.id}
@@ -302,6 +313,7 @@ export function NotificationBell({
                         onClick={onNotificationClick}
                       />
                     ))}
+                    </div>
                   </div>
                 )
               })}
diff --git a/src/lib/notifications.ts b/src/lib/notifications.ts
index a36b994..8e8f885 100644
--- a/src/lib/notifications.ts
+++ b/src/lib/notifications.ts
@@ -118,6 +118,26 @@ export async function createNotificationForClient(
   if (error) throw error
 }
 
+export async function createNotificationForAll(
+  clientIds: string[],
+  title: string,
+  message: string,
+  type: string = 'admin_broadcast'
+) {
+  if (!supabaseAdmin) throw new Error('Admin não configurado')
+
+  const rows = clientIds.map((clientId) => ({
+    client_id: clientId,
+    user_id: null,
+    title,
+    message,
+    type,
+  }))
+
+  const { error } = await supabaseAdmin.from('notifications').insert(rows)
+  if (error) throw error
+}
+
 export function resolveNotificationRoute(notification: Notification): string | null {
   if (!notification.metadata) return null
 
diff --git a/src/views/admin/components/NotificationsPanel.tsx b/src/views/admin/components/NotificationsPanel.tsx
index 72315b6..2fe6a5d 100644
--- a/src/views/admin/components/NotificationsPanel.tsx
+++ b/src/views/admin/components/NotificationsPanel.tsx
@@ -1,9 +1,11 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
-import { Send, Users, Building2, Clock, AlertTriangle, RefreshCw, Eye, EyeOff } from 'lucide-react'
+import { Send, Users, Building2, Globe, Clock, AlertTriangle, RefreshCw, Eye, EyeOff, UserCheck, UserX, ShieldCheck, ShieldOff, Megaphone, ClipboardList, MessageSquare } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkBreaks from 'remark-breaks'
 import { Button, Input, Label } from '@/components/ui'
 import { toast } from 'sonner'
 import { supabaseAdmin } from '@/lib/supabase'
-import { createNotification, createNotificationForClient, fetchAllNotifications, markAsRead as markAsReadApi } from '@/lib/notifications'
+import { createNotification, createNotificationForClient, createNotificationForAll, fetchAllNotifications, markAsRead as markAsReadApi } from '@/lib/notifications'
 import type { Member } from '@/hooks/useSupabase'
 import type { Client } from '@/types/db'
 import type { Notification } from '@/types/notification'
@@ -13,20 +15,27 @@ interface NotificationsPanelProps {
   users: Member[]
 }
 
-type TargetType = 'user' | 'client'
+type TargetType = 'user' | 'client' | 'all'
 
 function formatDate(dateString: string): string {
   try {
-    const date = new Date(dateString)
-    return date.toLocaleString('pt-BR', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
+    return new Date(dateString).toLocaleString('pt-BR', {
+      day: '2-digit', month: '2-digit', year: 'numeric',
+      hour: '2-digit', minute: '2-digit',
     })
-  } catch {
-    return ''
+  } catch { return '' }
+}
+
+function getNotificationTypeIcon(type: string): React.ReactNode {
+  switch (type) {
+    case 'step_assigned': return <UserCheck className="w-4 h-4 text-emerald-500" />
+    case 'step_unassigned': return <UserX className="w-4 h-4 text-orange-500" />
+    case 'role_changed': return <ShieldCheck className="w-4 h-4 text-violet-500" />
+    case 'client_access_granted': return <ShieldCheck className="w-4 h-4 text-blue-500" />
+    case 'client_access_revoked': return <ShieldOff className="w-4 h-4 text-destructive" />
+    case 'admin_broadcast': return <Megaphone className="w-4 h-4 text-primary" />
+    case 'manual': return <MessageSquare className="w-4 h-4 text-muted-foreground" />
+    default: return <ClipboardList className="w-4 h-4 text-muted-foreground" />
   }
 }
 
@@ -43,82 +52,42 @@ function getNotificationTypeLabel(type: string): string {
   return labels[type] || type
 }
 
-function isToday(dateString: string): boolean {
-  const date = new Date(dateString)
-  const today = new Date()
-  return date.toDateString() === today.toDateString()
-}
-
-function isYesterday(dateString: string): boolean {
-  const date = new Date(dateString)
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  return date.toDateString() === yesterday.toDateString()
-}
-
-function isLast7Days(dateString: string): boolean {
-  const date = new Date(dateString)
-  const today = new Date()
-  const diffDays = Math.floor((today.getTime() - date.getTime()) / (1000 * 60 * 60 * 24))
-  return diffDays >= 1 && diffDays <= 7
+function isToday(d: string) { return new Date(d).toDateString() === new Date().toDateString() }
+function isYesterday(d: string) {
+  const y = new Date(); y.setDate(y.getDate() - 1)
+  return new Date(d).toDateString() === y.toDateString()
 }
-
-interface GroupedNotifications {
-  today: Notification[]
-  yesterday: Notification[]
-  last7Days: Notification[]
-  older: Notification[]
+function isLast7Days(d: string) {
+  const diff = Math.floor((Date.now() - new Date(d).getTime()) / 86400000)
+  return diff >= 1 && diff <= 7
 }
 
-function groupNotifications(notifications: Notification[]): GroupedNotifications {
-  const grouped: GroupedNotifications = {
-    today: [],
-    yesterday: [],
-    last7Days: [],
-    older: [],
-  }
-
-  for (const notif of notifications) {
-    if (isToday(notif.created_at)) {
-      grouped.today.push(notif)
-    } else if (isYesterday(notif.created_at)) {
-      grouped.yesterday.push(notif)
-    } else if (isLast7Days(notif.created_at)) {
-      grouped.last7Days.push(notif)
-    } else {
-      grouped.older.push(notif)
-    }
+function groupNotifications(notifications: Notification[]) {
+  const g = { today: [] as Notification[], yesterday: [] as Notification[], last7Days: [] as Notification[], older: [] as Notification[] }
+  for (const n of notifications) {
+    if (isToday(n.created_at)) g.today.push(n)
+    else if (isYesterday(n.created_at)) g.yesterday.push(n)
+    else if (isLast7Days(n.created_at)) g.last7Days.push(n)
+    else g.older.push(n)
   }
-
-  return grouped
+  return g
 }
 
-function NotificationList({
-  notifications,
-  onMarkAsRead,
-  onToggleRead,
-}: {
+function NotificationList({ notifications, onMarkAsRead, onToggleRead }: {
   notifications: Notification[]
   onMarkAsRead: (id: string) => void
   onToggleRead?: (id: string) => void
 }) {
   if (notifications.length === 0) return null
-
   return (
     <div className="border rounded-lg divide-y">
       {notifications.map((notif) => (
-        <div
-          key={notif.id}
-          className={`px-4 py-3 flex items-start gap-3 ${notif.read ? 'opacity-50 bg-muted/20' : 'bg-background'}`}
-        >
+        <div key={notif.id} className={`px-4 py-3 flex items-start gap-3 ${notif.read ? 'opacity-50 bg-muted/20' : 'bg-background'}`}>
+          <div className="flex-shrink-0 mt-0.5">{getNotificationTypeIcon(notif.type)}</div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              {!notif.read && (
-                <span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
-              )}
-              <span className={`font-medium ${notif.read ? 'font-normal' : 'font-semibold'}`}>
-                {notif.title}
-              </span>
+              {!notif.read && <span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />}
+              <span className={`font-medium ${notif.read ? 'font-normal' : 'font-semibold'}`}>{notif.title}</span>
               <span className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
                 {getNotificationTypeLabel(notif.type)}
               </span>
@@ -128,26 +97,18 @@ function NotificationList({
                 </span>
               )}
             </div>
-            <p className="text-sm text-muted-foreground mt-1">{notif.message}</p>
-            <span className="text-xs text-muted-foreground">
-              {formatDate(notif.created_at)}
-            </span>
+            <div className="text-sm text-muted-foreground mt-1 prose prose-sm dark:prose-invert max-w-none [&_p]:mb-0 [&_strong]:text-foreground">
+              <ReactMarkdown remarkPlugins={[remarkBreaks]}>{notif.message}</ReactMarkdown>
+            </div>
+            <span className="text-xs text-muted-foreground">{formatDate(notif.created_at)}</span>
           </div>
           <div className="flex items-center gap-1">
             {!notif.read ? (
-              <button
-                onClick={() => onMarkAsRead(notif.id)}
-                className="p-1.5 rounded hover:bg-muted text-muted-foreground flex items-center gap-1 text-xs"
-                title="Marcar como lida"
-              >
+              <button onClick={() => onMarkAsRead(notif.id)} className="p-1.5 rounded hover:bg-muted text-muted-foreground" title="Marcar como lida">
                 <Eye className="w-4 h-4" />
               </button>
             ) : onToggleRead ? (
-              <button
-                onClick={() => onToggleRead(notif.id)}
-                className="p-1.5 rounded hover:bg-muted text-muted-foreground flex items-center gap-1 text-xs"
-                title="Marcar como não lida"
-              >
+              <button onClick={() => onToggleRead(notif.id)} className="p-1.5 rounded hover:bg-muted text-muted-foreground" title="Marcar como não lida">
                 <EyeOff className="w-4 h-4" />
               </button>
             ) : null}
@@ -162,9 +123,10 @@ export function NotificationsPanel({ clients, users }: NotificationsPanelProps)
   const [title, setTitle] = useState('')
   const [message, setMessage] = useState('')
   const [targetType, setTargetType] = useState<TargetType>('user')
-  const [selectedUserId, setSelectedUserId] = useState<string>('')
-  const [selectedClientId, setSelectedClientId] = useState<string>('')
+  const [selectedUserId, setSelectedUserId] = useState('')
+  const [selectedClientId, setSelectedClientId] = useState('')
   const [sending, setSending] = useState(false)
+  const [messageTab, setMessageTab] = useState<'edit' | 'preview'>('edit')
 
   const [history, setHistory] = useState<Notification[]>([])
   const [loadingHistory, setLoadingHistory] = useState(true)
@@ -175,8 +137,7 @@ export function NotificationsPanel({ clients, users }: NotificationsPanelProps)
     setLoadingHistory(true)
     setError(null)
     try {
-      const data = await fetchAllNotifications()
-      setHistory(data)
+      setHistory(await fetchAllNotifications())
     } catch (e) {
       setError(e instanceof Error ? e.message : 'Erro ao carregar')
     } finally {
@@ -184,35 +145,30 @@ export function NotificationsPanel({ clients, users }: NotificationsPanelProps)
     }
   }, [])
 
-  useEffect(() => {
-    loadHistory()
-  }, [loadHistory])
+  useEffect(() => { loadHistory() }, [loadHistory])
 
   const grouped = useMemo(() => groupNotifications(history), [history])
 
   const handleSend = async () => {
-    if (!title.trim() || !message.trim()) {
-      toast.error('Preencha o título e a mensagem')
-      return
-    }
-
-    if (!supabaseAdmin) {
-      toast.error('Admin não configurado')
-      return
-    }
+    if (!title.trim() || !message.trim()) { toast.error('Preencha o título e a mensagem'); return }
+    if (!supabaseAdmin) { toast.error('Admin não configurado'); return }
 
     setSending(true)
-
     try {
       if (targetType === 'user' && selectedUserId) {
         await createNotification(title, message, selectedUserId, undefined, 'manual')
       } else if (targetType === 'client' && selectedClientId) {
         await createNotificationForClient(selectedClientId, title, message)
+      } else if (targetType === 'all') {
+        await createNotificationForAll(clients.map((c) => c.id), title, message)
+      } else {
+        toast.error('Selecione um destino'); setSending(false); return
       }
 
       toast.success('Notificação enviada')
       setTitle('')
       setMessage('')
+      setMessageTab('edit')
       await loadHistory()
     } catch {
       toast.error('Erro ao enviar notificação')
@@ -225,142 +181,155 @@ export function NotificationsPanel({ clients, users }: NotificationsPanelProps)
     try {
       await markAsReadApi(id)
       setHistory((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
-    } catch {
-      toast.error('Erro ao marcar como lida')
-    }
+    } catch { toast.error('Erro ao marcar como lida') }
   }
 
   const handleToggleRead = async (id: string) => {
-    const notification = history.find((n) => n.id === id)
-    if (!notification) return
-
     try {
       await markAsReadApi(id)
-      setHistory((prev) =>
-        prev.map((n) => (n.id === id ? { ...n, read: !n.read } : n))
-      )
-    } catch {
-      toast.error('Erro ao atualizar')
-    }
+      setHistory((prev) => prev.map((n) => (n.id === id ? { ...n, read: !n.read } : n)))
+    } catch { toast.error('Erro ao atualizar') }
   }
 
   const activeUsers = users.filter((u) => u.is_active !== false)
 
-  const hasNotifications = history.length > 0
+  const targets: { key: TargetType; label: string; icon: React.ReactNode; description: string }[] = [
+    { key: 'user', label: 'Usuário', icon: <Users className="w-4 h-4" />, description: 'Um membro específico' },
+    { key: 'client', label: 'Cliente', icon: <Building2 className="w-4 h-4" />, description: 'Todos de um cliente' },
+    { key: 'all', label: 'Todos', icon: <Globe className="w-4 h-4" />, description: `${clients.length} clientes` },
+  ]
 
   return (
-    <div className="space-y-8">
-      <div className="space-y-4">
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[calc(90vh-13rem)]">
+      {/* Formulário */}
+      <div className="flex flex-col gap-5 overflow-y-auto pr-1">
         <div className="flex items-center gap-2">
-          <Send className="w-5 h-5" />
-          <h2 className="text-lg font-semibold">Enviar Notificação</h2>
+          <Send className="w-4 h-4" />
+          <h2 className="text-base font-semibold">Enviar Notificação</h2>
         </div>
 
-        <div className="grid gap-4 max-w-lg">
-          <div className="space-y-2">
-            <Label>Tipo de destino</Label>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setTargetType('user')}
-                className={`flex-1 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
-                  targetType === 'user'
-                    ? 'border-primary bg-primary/10 text-primary'
-                    : 'border-border text-muted-foreground hover:text-foreground'
-                }`}
-              >
-                <Users className="w-4 h-4 mx-auto mb-1" />
-                Usuário
-              </button>
+        {/* Destino */}
+        <div className="space-y-2">
+          <Label className="text-xs text-muted-foreground uppercase tracking-wide">Destino</Label>
+          <div className="grid grid-cols-3 gap-2">
+            {targets.map((t) => (
               <button
+                key={t.key}
                 type="button"
-                onClick={() => setTargetType('client')}
-                className={`flex-1 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
-                  targetType === 'client'
-                    ? 'border-primary bg-primary/10 text-primary'
-                    : 'border-border text-muted-foreground hover:text-foreground'
+                onClick={() => setTargetType(t.key)}
+                className={`flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-sm font-medium transition-colors ${
+                  targetType === t.key
+                    ? 'border-primary bg-primary/8 text-primary'
+                    : 'border-border text-muted-foreground hover:text-foreground hover:border-foreground/30'
                 }`}
               >
-                <Building2 className="w-4 h-4 mx-auto mb-1" />
-                Cliente
+                {t.icon}
+                <span>{t.label}</span>
+                <span className="text-[10px] font-normal opacity-70">{t.description}</span>
               </button>
-            </div>
+            ))}
           </div>
+        </div>
 
-          {targetType === 'user' && (
-            <div className="space-y-2">
-              <Label>Usuário ({activeUsers.length} disponíveis)</Label>
-              <select
-                value={selectedUserId}
-                onChange={(e) => setSelectedUserId(e.target.value)}
-                className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground"
-              >
-                <option value="">Selecione um usuário...</option>
-                {activeUsers.map((user) => (
-                  <option key={user.id} value={user.id}>
-                    {user.name || user.email}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          {targetType === 'client' && (
-            <div className="space-y-2">
-              <Label>Cliente</Label>
-              <select
-                value={selectedClientId}
-                onChange={(e) => setSelectedClientId(e.target.value)}
-                className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground"
-              >
-                <option value="">Selecione um cliente...</option>
-                {clients.map((client) => (
-                  <option key={client.id} value={client.id}>
-                    {client.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-
+        {/* Seletor condicional */}
+        {targetType === 'user' && (
           <div className="space-y-2">
-            <Label>Título</Label>
-            <Input
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Ex: Atualização importante"
-            />
+            <Label>Usuário</Label>
+            <select
+              value={selectedUserId}
+              onChange={(e) => setSelectedUserId(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground text-sm"
+            >
+              <option value="">Selecione um usuário...</option>
+              {activeUsers.map((u) => (
+                <option key={u.id} value={u.id}>{u.name || u.email}</option>
+              ))}
+            </select>
           </div>
+        )}
 
+        {targetType === 'client' && (
           <div className="space-y-2">
+            <Label>Cliente</Label>
+            <select
+              value={selectedClientId}
+              onChange={(e) => setSelectedClientId(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground text-sm"
+            >
+              <option value="">Selecione um cliente...</option>
+              {clients.map((c) => (
+                <option key={c.id} value={c.id}>{c.name}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {targetType === 'all' && (
+          <div className="px-3 py-2.5 rounded-lg border border-border bg-muted/40 text-sm text-muted-foreground">
+            Será enviado como broadcast para todos os {clients.length} clientes cadastrados.
+          </div>
+        )}
+
+        {/* Título */}
+        <div className="space-y-2">
+          <Label>Título</Label>
+          <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex: Atualização importante" />
+        </div>
+
+        {/* Mensagem com tabs */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
             <Label>Mensagem</Label>
+            <div className="flex border border-border rounded-md overflow-hidden text-xs">
+              <button
+                type="button"
+                onClick={() => setMessageTab('edit')}
+                className={`px-3 py-1 transition-colors ${messageTab === 'edit' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+              >
+                Editar
+              </button>
+              <button
+                type="button"
+                onClick={() => setMessageTab('preview')}
+                className={`px-3 py-1 transition-colors ${messageTab === 'preview' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+              >
+                Preview
+              </button>
+            </div>
+          </div>
+          {messageTab === 'edit' ? (
             <textarea
               value={message}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
-              placeholder="Digite a mensagem..."
-              rows={3}
-              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground resize-none"
+              placeholder="Suporta markdown: **negrito**, _itálico_, quebras de linha..."
+              rows={5}
+              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground resize-none font-mono text-sm"
             />
-          </div>
-
-          <Button onClick={handleSend} disabled={sending} className="w-full">
-            {sending ? (
-              'Enviando...'
-            ) : (
-              <>
-                <Send className="w-4 h-4 mr-2" />
-                Enviar notificação
-              </>
-            )}
-          </Button>
+          ) : (
+            <div className="w-full min-h-[120px] px-3 py-2 rounded-lg border border-border bg-muted/30 text-sm prose prose-sm dark:prose-invert max-w-none [&_p]:mb-1 [&_p:last-child]:mb-0">
+              {message.trim()
+                ? <ReactMarkdown remarkPlugins={[remarkBreaks]}>{message}</ReactMarkdown>
+                : <span className="text-muted-foreground italic">Nada para visualizar</span>
+              }
+            </div>
+          )}
+          <p className="text-xs text-muted-foreground">Suporta Markdown: **negrito**, _itálico_, quebras de linha</p>
         </div>
+
+        <Button onClick={handleSend} disabled={sending} className="w-full">
+          {sending ? 'Enviando...' : <><Send className="w-4 h-4 mr-2" />Enviar notificação</>}
+        </Button>
       </div>
 
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
+      {/* Histórico */}
+      <div className="flex flex-col gap-4 min-h-0">
+        <div className="flex items-center justify-between flex-shrink-0">
           <div className="flex items-center gap-2">
-            <Clock className="w-5 h-5" />
-            <h2 className="text-lg font-semibold">Histórico de Notificações</h2>
+            <Clock className="w-4 h-4" />
+            <h2 className="text-base font-semibold">Histórico</h2>
+            {history.length > 0 && (
+              <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full text-muted-foreground">{history.length}</span>
+            )}
           </div>
           <Button variant="outline" size="sm" onClick={loadHistory} disabled={loadingHistory}>
             <RefreshCw className={`w-4 h-4 mr-2 ${loadingHistory ? 'animate-spin' : ''}`} />
@@ -368,73 +337,54 @@ export function NotificationsPanel({ clients, users }: NotificationsPanelProps)
           </Button>
         </div>
 
-        {loadingHistory && !error ? (
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <RefreshCw className="w-4 h-4 animate-spin" />
-            Carregando...
-          </div>
-        ) : error ? (
-          <div className="flex flex-col items-center gap-4 py-8 px-4 text-center border border-destructive/20 rounded-lg">
-            <AlertTriangle className="w-8 h-8 text-destructive" />
-            <div>
-              <p className="font-medium">Erro ao carregar notificações</p>
-              <p className="text-sm text-muted-foreground">{error}</p>
+        <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-1">
+          {loadingHistory && !error ? (
+            <div className="flex items-center gap-2 text-muted-foreground text-sm">
+              <RefreshCw className="w-4 h-4 animate-spin" /> Carregando...
             </div>
-            <Button variant="outline" onClick={loadHistory}>
-              <RefreshCw className="w-4 h-4 mr-2" />
-              Tentar novamente
-            </Button>
-          </div>
-        ) : !hasNotifications ? (
-          <div className="text-muted-foreground py-8 text-center">Nenhuma notificação enviada</div>
-        ) : (
-          <div className="space-y-6">
-            {grouped.today.length > 0 && (
-              <div className="space-y-2">
-                <h3 className="text-sm font-medium text-muted-foreground">Hoje ({grouped.today.length})</h3>
-                <NotificationList
-                  notifications={grouped.today}
-                  onMarkAsRead={handleMarkAsRead}
-                  onToggleRead={handleToggleRead}
-                />
-              </div>
-            )}
-
-            {grouped.yesterday.length > 0 && (
-              <div className="space-y-2">
-                <h3 className="text-sm font-medium text-muted-foreground">Ontem ({grouped.yesterday.length})</h3>
-                <NotificationList
-                  notifications={grouped.yesterday}
-                  onMarkAsRead={handleMarkAsRead}
-                  onToggleRead={handleToggleRead}
-                />
-              </div>
-            )}
-
-            {grouped.last7Days.length > 0 && (
-              <div className="space-y-2">
-                <h3 className="text-sm font-medium text-muted-foreground">Últimos 7 dias ({grouped.last7Days.length})</h3>
-                <NotificationList
-                  notifications={grouped.last7Days}
-                  onMarkAsRead={handleMarkAsRead}
-                  onToggleRead={handleToggleRead}
-                />
-              </div>
-            )}
-
-            {grouped.older.length > 0 && (
-              <div className="space-y-2">
-                <h3 className="text-sm font-medium text-muted-foreground">Mais antigos ({grouped.older.length})</h3>
-                <NotificationList
-                  notifications={grouped.older}
-                  onMarkAsRead={handleMarkAsRead}
-                  onToggleRead={handleToggleRead}
-                />
+          ) : error ? (
+            <div className="flex flex-col items-center gap-4 py-8 px-4 text-center border border-destructive/20 rounded-lg">
+              <AlertTriangle className="w-8 h-8 text-destructive" />
+              <div>
+                <p className="font-medium">Erro ao carregar notificações</p>
+                <p className="text-sm text-muted-foreground">{error}</p>
               </div>
-            )}
-          </div>
-        )}
+              <Button variant="outline" onClick={loadHistory}>
+                <RefreshCw className="w-4 h-4 mr-2" /> Tentar novamente
+              </Button>
+            </div>
+          ) : history.length === 0 ? (
+            <div className="text-muted-foreground py-8 text-center text-sm">Nenhuma notificação enviada</div>
+          ) : (
+            <>
+              {grouped.today.length > 0 && (
+                <div className="space-y-2">
+                  <p className="text-xs font-medium text-muted-foreground">Hoje ({grouped.today.length})</p>
+                  <NotificationList notifications={grouped.today} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+                </div>
+              )}
+              {grouped.yesterday.length > 0 && (
+                <div className="space-y-2">
+                  <p className="text-xs font-medium text-muted-foreground">Ontem ({grouped.yesterday.length})</p>
+                  <NotificationList notifications={grouped.yesterday} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+                </div>
+              )}
+              {grouped.last7Days.length > 0 && (
+                <div className="space-y-2">
+                  <p className="text-xs font-medium text-muted-foreground">Últimos 7 dias ({grouped.last7Days.length})</p>
+                  <NotificationList notifications={grouped.last7Days} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+                </div>
+              )}
+              {grouped.older.length > 0 && (
+                <div className="space-y-2">
+                  <p className="text-xs font-medium text-muted-foreground">Mais antigos ({grouped.older.length})</p>
+                  <NotificationList notifications={grouped.older} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+                </div>
+              )}
+            </>
+          )}
+        </div>
       </div>
     </div>
   )
-}
\ No newline at end of file
+}

From dd4e9c5e3926b87201d0608cee74eabfa2d1323b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Fri, 17 Apr 2026 12:02:46 -0300
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20:zap:=20melhorado=20e=20separado?=
 =?UTF-8?q?=20componentes=20de=20notifica=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/views/admin.md                           |  12 +-
 .../admin/components/NotificationsPanel.tsx   | 390 ------------------
 .../NotificationsPanel/NotificationForm.tsx   | 152 +++++++
 .../NotificationHistory.tsx                   |  76 ++++
 .../NotificationsPanel/NotificationList.tsx   |  53 +++
 .../NotificationsPanel/NotificationsPanel.tsx |  29 ++
 .../components/NotificationsPanel/index.ts    |   1 +
 .../useNotificationsPanel.ts                  | 107 +++++
 .../components/NotificationsPanel/utils.ts    |  60 +++
 9 files changed, 488 insertions(+), 392 deletions(-)
 delete mode 100644 src/views/admin/components/NotificationsPanel.tsx
 create mode 100644 src/views/admin/components/NotificationsPanel/NotificationForm.tsx
 create mode 100644 src/views/admin/components/NotificationsPanel/NotificationHistory.tsx
 create mode 100644 src/views/admin/components/NotificationsPanel/NotificationList.tsx
 create mode 100644 src/views/admin/components/NotificationsPanel/NotificationsPanel.tsx
 create mode 100644 src/views/admin/components/NotificationsPanel/index.ts
 create mode 100644 src/views/admin/components/NotificationsPanel/useNotificationsPanel.ts
 create mode 100644 src/views/admin/components/NotificationsPanel/utils.ts

diff --git a/docs/views/admin.md b/docs/views/admin.md
index f8eb682..8de6a1e 100644
--- a/docs/views/admin.md
+++ b/docs/views/admin.md
@@ -15,7 +15,15 @@ src/views/admin/
 └── components/
     ├── ClientsPanel.tsx       # Gestão de clientes
     ├── UsersPanel.tsx         # Gestão de membros e vínculos
-    └── AuditLogsPanel.tsx     # Log de auditoria com filtros
+    ├── AuditLogsPanel.tsx     # Log de auditoria com filtros
+    └── NotificationsPanel/    # Envio e histórico de notificações manuais
+        ├── index.ts
+        ├── NotificationsPanel.tsx      # Orquestrador
+        ├── NotificationForm.tsx        # Formulário de envio (destino, título, mensagem)
+        ├── NotificationHistory.tsx     # Histórico agrupado por período
+        ├── NotificationList.tsx        # Lista de itens individuais
+        ├── useNotificationsPanel.ts    # Estado, handlers e fetch do histórico
+        └── utils.ts                    # formatDate, groupNotifications, getIcon/Label
 
 src/store/
 └── useAdminStore.ts           # Estado e fetches admin (Zustand)
@@ -109,7 +117,7 @@ No tab **Membros**, os filtros disponíveis são: **Todos / Ativos / Sem acesso
 
 ## NotificationsPanel
 
-Aba de envio e histórico de notificações manuais.
+Aba de envio e histórico de notificações manuais. Estrutura modular em `components/NotificationsPanel/` — o componente raiz `NotificationsPanel.tsx` consome `useNotificationsPanel` e renderiza `NotificationForm` + `NotificationHistory`.
 
 ### Destinos
 
diff --git a/src/views/admin/components/NotificationsPanel.tsx b/src/views/admin/components/NotificationsPanel.tsx
deleted file mode 100644
index 2fe6a5d..0000000
--- a/src/views/admin/components/NotificationsPanel.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { useState, useCallback, useEffect, useMemo } from 'react'
-import { Send, Users, Building2, Globe, Clock, AlertTriangle, RefreshCw, Eye, EyeOff, UserCheck, UserX, ShieldCheck, ShieldOff, Megaphone, ClipboardList, MessageSquare } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import remarkBreaks from 'remark-breaks'
-import { Button, Input, Label } from '@/components/ui'
-import { toast } from 'sonner'
-import { supabaseAdmin } from '@/lib/supabase'
-import { createNotification, createNotificationForClient, createNotificationForAll, fetchAllNotifications, markAsRead as markAsReadApi } from '@/lib/notifications'
-import type { Member } from '@/hooks/useSupabase'
-import type { Client } from '@/types/db'
-import type { Notification } from '@/types/notification'
-
-interface NotificationsPanelProps {
-  clients: Client[]
-  users: Member[]
-}
-
-type TargetType = 'user' | 'client' | 'all'
-
-function formatDate(dateString: string): string {
-  try {
-    return new Date(dateString).toLocaleString('pt-BR', {
-      day: '2-digit', month: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit',
-    })
-  } catch { return '' }
-}
-
-function getNotificationTypeIcon(type: string): React.ReactNode {
-  switch (type) {
-    case 'step_assigned': return <UserCheck className="w-4 h-4 text-emerald-500" />
-    case 'step_unassigned': return <UserX className="w-4 h-4 text-orange-500" />
-    case 'role_changed': return <ShieldCheck className="w-4 h-4 text-violet-500" />
-    case 'client_access_granted': return <ShieldCheck className="w-4 h-4 text-blue-500" />
-    case 'client_access_revoked': return <ShieldOff className="w-4 h-4 text-destructive" />
-    case 'admin_broadcast': return <Megaphone className="w-4 h-4 text-primary" />
-    case 'manual': return <MessageSquare className="w-4 h-4 text-muted-foreground" />
-    default: return <ClipboardList className="w-4 h-4 text-muted-foreground" />
-  }
-}
-
-function getNotificationTypeLabel(type: string): string {
-  const labels: Record<string, string> = {
-    step_assigned: 'Etapa atribuída',
-    step_unassigned: 'Etapa removida',
-    role_changed: 'Cargo alterado',
-    client_access_granted: 'Acesso concedido',
-    client_access_revoked: 'Acesso revogado',
-    admin_broadcast: 'Broadcast',
-    manual: 'Manual',
-  }
-  return labels[type] || type
-}
-
-function isToday(d: string) { return new Date(d).toDateString() === new Date().toDateString() }
-function isYesterday(d: string) {
-  const y = new Date(); y.setDate(y.getDate() - 1)
-  return new Date(d).toDateString() === y.toDateString()
-}
-function isLast7Days(d: string) {
-  const diff = Math.floor((Date.now() - new Date(d).getTime()) / 86400000)
-  return diff >= 1 && diff <= 7
-}
-
-function groupNotifications(notifications: Notification[]) {
-  const g = { today: [] as Notification[], yesterday: [] as Notification[], last7Days: [] as Notification[], older: [] as Notification[] }
-  for (const n of notifications) {
-    if (isToday(n.created_at)) g.today.push(n)
-    else if (isYesterday(n.created_at)) g.yesterday.push(n)
-    else if (isLast7Days(n.created_at)) g.last7Days.push(n)
-    else g.older.push(n)
-  }
-  return g
-}
-
-function NotificationList({ notifications, onMarkAsRead, onToggleRead }: {
-  notifications: Notification[]
-  onMarkAsRead: (id: string) => void
-  onToggleRead?: (id: string) => void
-}) {
-  if (notifications.length === 0) return null
-  return (
-    <div className="border rounded-lg divide-y">
-      {notifications.map((notif) => (
-        <div key={notif.id} className={`px-4 py-3 flex items-start gap-3 ${notif.read ? 'opacity-50 bg-muted/20' : 'bg-background'}`}>
-          <div className="flex-shrink-0 mt-0.5">{getNotificationTypeIcon(notif.type)}</div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 flex-wrap">
-              {!notif.read && <span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />}
-              <span className={`font-medium ${notif.read ? 'font-normal' : 'font-semibold'}`}>{notif.title}</span>
-              <span className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
-                {getNotificationTypeLabel(notif.type)}
-              </span>
-              {notif.read && (
-                <span className="text-xs text-muted-foreground flex items-center gap-1">
-                  <EyeOff className="w-3 h-3" /> lida
-                </span>
-              )}
-            </div>
-            <div className="text-sm text-muted-foreground mt-1 prose prose-sm dark:prose-invert max-w-none [&_p]:mb-0 [&_strong]:text-foreground">
-              <ReactMarkdown remarkPlugins={[remarkBreaks]}>{notif.message}</ReactMarkdown>
-            </div>
-            <span className="text-xs text-muted-foreground">{formatDate(notif.created_at)}</span>
-          </div>
-          <div className="flex items-center gap-1">
-            {!notif.read ? (
-              <button onClick={() => onMarkAsRead(notif.id)} className="p-1.5 rounded hover:bg-muted text-muted-foreground" title="Marcar como lida">
-                <Eye className="w-4 h-4" />
-              </button>
-            ) : onToggleRead ? (
-              <button onClick={() => onToggleRead(notif.id)} className="p-1.5 rounded hover:bg-muted text-muted-foreground" title="Marcar como não lida">
-                <EyeOff className="w-4 h-4" />
-              </button>
-            ) : null}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export function NotificationsPanel({ clients, users }: NotificationsPanelProps) {
-  const [title, setTitle] = useState('')
-  const [message, setMessage] = useState('')
-  const [targetType, setTargetType] = useState<TargetType>('user')
-  const [selectedUserId, setSelectedUserId] = useState('')
-  const [selectedClientId, setSelectedClientId] = useState('')
-  const [sending, setSending] = useState(false)
-  const [messageTab, setMessageTab] = useState<'edit' | 'preview'>('edit')
-
-  const [history, setHistory] = useState<Notification[]>([])
-  const [loadingHistory, setLoadingHistory] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  const loadHistory = useCallback(async () => {
-    if (!supabaseAdmin) return
-    setLoadingHistory(true)
-    setError(null)
-    try {
-      setHistory(await fetchAllNotifications())
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Erro ao carregar')
-    } finally {
-      setLoadingHistory(false)
-    }
-  }, [])
-
-  useEffect(() => { loadHistory() }, [loadHistory])
-
-  const grouped = useMemo(() => groupNotifications(history), [history])
-
-  const handleSend = async () => {
-    if (!title.trim() || !message.trim()) { toast.error('Preencha o título e a mensagem'); return }
-    if (!supabaseAdmin) { toast.error('Admin não configurado'); return }
-
-    setSending(true)
-    try {
-      if (targetType === 'user' && selectedUserId) {
-        await createNotification(title, message, selectedUserId, undefined, 'manual')
-      } else if (targetType === 'client' && selectedClientId) {
-        await createNotificationForClient(selectedClientId, title, message)
-      } else if (targetType === 'all') {
-        await createNotificationForAll(clients.map((c) => c.id), title, message)
-      } else {
-        toast.error('Selecione um destino'); setSending(false); return
-      }
-
-      toast.success('Notificação enviada')
-      setTitle('')
-      setMessage('')
-      setMessageTab('edit')
-      await loadHistory()
-    } catch {
-      toast.error('Erro ao enviar notificação')
-    } finally {
-      setSending(false)
-    }
-  }
-
-  const handleMarkAsRead = async (id: string) => {
-    try {
-      await markAsReadApi(id)
-      setHistory((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
-    } catch { toast.error('Erro ao marcar como lida') }
-  }
-
-  const handleToggleRead = async (id: string) => {
-    try {
-      await markAsReadApi(id)
-      setHistory((prev) => prev.map((n) => (n.id === id ? { ...n, read: !n.read } : n)))
-    } catch { toast.error('Erro ao atualizar') }
-  }
-
-  const activeUsers = users.filter((u) => u.is_active !== false)
-
-  const targets: { key: TargetType; label: string; icon: React.ReactNode; description: string }[] = [
-    { key: 'user', label: 'Usuário', icon: <Users className="w-4 h-4" />, description: 'Um membro específico' },
-    { key: 'client', label: 'Cliente', icon: <Building2 className="w-4 h-4" />, description: 'Todos de um cliente' },
-    { key: 'all', label: 'Todos', icon: <Globe className="w-4 h-4" />, description: `${clients.length} clientes` },
-  ]
-
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[calc(90vh-13rem)]">
-      {/* Formulário */}
-      <div className="flex flex-col gap-5 overflow-y-auto pr-1">
-        <div className="flex items-center gap-2">
-          <Send className="w-4 h-4" />
-          <h2 className="text-base font-semibold">Enviar Notificação</h2>
-        </div>
-
-        {/* Destino */}
-        <div className="space-y-2">
-          <Label className="text-xs text-muted-foreground uppercase tracking-wide">Destino</Label>
-          <div className="grid grid-cols-3 gap-2">
-            {targets.map((t) => (
-              <button
-                key={t.key}
-                type="button"
-                onClick={() => setTargetType(t.key)}
-                className={`flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-sm font-medium transition-colors ${
-                  targetType === t.key
-                    ? 'border-primary bg-primary/8 text-primary'
-                    : 'border-border text-muted-foreground hover:text-foreground hover:border-foreground/30'
-                }`}
-              >
-                {t.icon}
-                <span>{t.label}</span>
-                <span className="text-[10px] font-normal opacity-70">{t.description}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Seletor condicional */}
-        {targetType === 'user' && (
-          <div className="space-y-2">
-            <Label>Usuário</Label>
-            <select
-              value={selectedUserId}
-              onChange={(e) => setSelectedUserId(e.target.value)}
-              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground text-sm"
-            >
-              <option value="">Selecione um usuário...</option>
-              {activeUsers.map((u) => (
-                <option key={u.id} value={u.id}>{u.name || u.email}</option>
-              ))}
-            </select>
-          </div>
-        )}
-
-        {targetType === 'client' && (
-          <div className="space-y-2">
-            <Label>Cliente</Label>
-            <select
-              value={selectedClientId}
-              onChange={(e) => setSelectedClientId(e.target.value)}
-              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground text-sm"
-            >
-              <option value="">Selecione um cliente...</option>
-              {clients.map((c) => (
-                <option key={c.id} value={c.id}>{c.name}</option>
-              ))}
-            </select>
-          </div>
-        )}
-
-        {targetType === 'all' && (
-          <div className="px-3 py-2.5 rounded-lg border border-border bg-muted/40 text-sm text-muted-foreground">
-            Será enviado como broadcast para todos os {clients.length} clientes cadastrados.
-          </div>
-        )}
-
-        {/* Título */}
-        <div className="space-y-2">
-          <Label>Título</Label>
-          <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex: Atualização importante" />
-        </div>
-
-        {/* Mensagem com tabs */}
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <Label>Mensagem</Label>
-            <div className="flex border border-border rounded-md overflow-hidden text-xs">
-              <button
-                type="button"
-                onClick={() => setMessageTab('edit')}
-                className={`px-3 py-1 transition-colors ${messageTab === 'edit' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
-              >
-                Editar
-              </button>
-              <button
-                type="button"
-                onClick={() => setMessageTab('preview')}
-                className={`px-3 py-1 transition-colors ${messageTab === 'preview' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
-              >
-                Preview
-              </button>
-            </div>
-          </div>
-          {messageTab === 'edit' ? (
-            <textarea
-              value={message}
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
-              placeholder="Suporta markdown: **negrito**, _itálico_, quebras de linha..."
-              rows={5}
-              className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground resize-none font-mono text-sm"
-            />
-          ) : (
-            <div className="w-full min-h-[120px] px-3 py-2 rounded-lg border border-border bg-muted/30 text-sm prose prose-sm dark:prose-invert max-w-none [&_p]:mb-1 [&_p:last-child]:mb-0">
-              {message.trim()
-                ? <ReactMarkdown remarkPlugins={[remarkBreaks]}>{message}</ReactMarkdown>
-                : <span className="text-muted-foreground italic">Nada para visualizar</span>
-              }
-            </div>
-          )}
-          <p className="text-xs text-muted-foreground">Suporta Markdown: **negrito**, _itálico_, quebras de linha</p>
-        </div>
-
-        <Button onClick={handleSend} disabled={sending} className="w-full">
-          {sending ? 'Enviando...' : <><Send className="w-4 h-4 mr-2" />Enviar notificação</>}
-        </Button>
-      </div>
-
-      {/* Histórico */}
-      <div className="flex flex-col gap-4 min-h-0">
-        <div className="flex items-center justify-between flex-shrink-0">
-          <div className="flex items-center gap-2">
-            <Clock className="w-4 h-4" />
-            <h2 className="text-base font-semibold">Histórico</h2>
-            {history.length > 0 && (
-              <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full text-muted-foreground">{history.length}</span>
-            )}
-          </div>
-          <Button variant="outline" size="sm" onClick={loadHistory} disabled={loadingHistory}>
-            <RefreshCw className={`w-4 h-4 mr-2 ${loadingHistory ? 'animate-spin' : ''}`} />
-            Atualizar
-          </Button>
-        </div>
-
-        <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-1">
-          {loadingHistory && !error ? (
-            <div className="flex items-center gap-2 text-muted-foreground text-sm">
-              <RefreshCw className="w-4 h-4 animate-spin" /> Carregando...
-            </div>
-          ) : error ? (
-            <div className="flex flex-col items-center gap-4 py-8 px-4 text-center border border-destructive/20 rounded-lg">
-              <AlertTriangle className="w-8 h-8 text-destructive" />
-              <div>
-                <p className="font-medium">Erro ao carregar notificações</p>
-                <p className="text-sm text-muted-foreground">{error}</p>
-              </div>
-              <Button variant="outline" onClick={loadHistory}>
-                <RefreshCw className="w-4 h-4 mr-2" /> Tentar novamente
-              </Button>
-            </div>
-          ) : history.length === 0 ? (
-            <div className="text-muted-foreground py-8 text-center text-sm">Nenhuma notificação enviada</div>
-          ) : (
-            <>
-              {grouped.today.length > 0 && (
-                <div className="space-y-2">
-                  <p className="text-xs font-medium text-muted-foreground">Hoje ({grouped.today.length})</p>
-                  <NotificationList notifications={grouped.today} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
-                </div>
-              )}
-              {grouped.yesterday.length > 0 && (
-                <div className="space-y-2">
-                  <p className="text-xs font-medium text-muted-foreground">Ontem ({grouped.yesterday.length})</p>
-                  <NotificationList notifications={grouped.yesterday} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
-                </div>
-              )}
-              {grouped.last7Days.length > 0 && (
-                <div className="space-y-2">
-                  <p className="text-xs font-medium text-muted-foreground">Últimos 7 dias ({grouped.last7Days.length})</p>
-                  <NotificationList notifications={grouped.last7Days} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
-                </div>
-              )}
-              {grouped.older.length > 0 && (
-                <div className="space-y-2">
-                  <p className="text-xs font-medium text-muted-foreground">Mais antigos ({grouped.older.length})</p>
-                  <NotificationList notifications={grouped.older} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/views/admin/components/NotificationsPanel/NotificationForm.tsx b/src/views/admin/components/NotificationsPanel/NotificationForm.tsx
new file mode 100644
index 0000000..6a6924d
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/NotificationForm.tsx
@@ -0,0 +1,152 @@
+import { Send, Users, Building2, Globe } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkBreaks from 'remark-breaks'
+import { Button, Input, Label } from '@/components/ui'
+import type { Member } from '@/hooks/useSupabase'
+import type { Client } from '@/types/db'
+import type { TargetType, UseNotificationsPanelReturn } from './useNotificationsPanel'
+
+type Props = Pick<UseNotificationsPanelReturn,
+  | 'title' | 'setTitle'
+  | 'message' | 'setMessage'
+  | 'targetType' | 'setTargetType'
+  | 'selectedUserId' | 'setSelectedUserId'
+  | 'selectedClientId' | 'setSelectedClientId'
+  | 'sending'
+  | 'messageTab' | 'setMessageTab'
+  | 'handleSend'
+> & { clients: Client[]; users: Member[] }
+
+const TARGET_META: { key: TargetType; label: string; icon: React.ReactNode; descFn: (c: Client[], u: Member[]) => string }[] = [
+  { key: 'user', label: 'Usuário', icon: <Users className="w-4 h-4" />, descFn: () => 'Um membro específico' },
+  { key: 'client', label: 'Cliente', icon: <Building2 className="w-4 h-4" />, descFn: () => 'Todos de um cliente' },
+  { key: 'all', label: 'Todos', icon: <Globe className="w-4 h-4" />, descFn: (c) => `${c.length} clientes` },
+]
+
+export function NotificationForm({
+  title, setTitle, message, setMessage,
+  targetType, setTargetType,
+  selectedUserId, setSelectedUserId,
+  selectedClientId, setSelectedClientId,
+  sending, messageTab, setMessageTab,
+  handleSend, clients, users,
+}: Props) {
+  const activeUsers = users.filter((u) => u.is_active !== false)
+
+  return (
+    <div className="flex flex-col gap-5 overflow-y-auto pr-1">
+      <div className="flex items-center gap-2">
+        <Send className="w-4 h-4" />
+        <h2 className="text-base font-semibold">Enviar Notificação</h2>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs text-muted-foreground uppercase tracking-wide">Destino</Label>
+        <div className="grid grid-cols-3 gap-2">
+          {TARGET_META.map((t) => (
+            <button
+              key={t.key}
+              type="button"
+              onClick={() => setTargetType(t.key)}
+              className={`flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-sm font-medium transition-colors ${
+                targetType === t.key
+                  ? 'border-primary bg-primary/8 text-primary'
+                  : 'border-border text-muted-foreground hover:text-foreground hover:border-foreground/30'
+              }`}
+            >
+              {t.icon}
+              <span>{t.label}</span>
+              <span className="text-[10px] font-normal opacity-70">{t.descFn(clients, users)}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {targetType === 'user' && (
+        <div className="space-y-2">
+          <Label>Usuário</Label>
+          <select
+            value={selectedUserId}
+            onChange={(e) => setSelectedUserId(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground text-sm"
+          >
+            <option value="">Selecione um usuário...</option>
+            {activeUsers.map((u) => (
+              <option key={u.id} value={u.id}>{u.name || u.email}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {targetType === 'client' && (
+        <div className="space-y-2">
+          <Label>Cliente</Label>
+          <select
+            value={selectedClientId}
+            onChange={(e) => setSelectedClientId(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground text-sm"
+          >
+            <option value="">Selecione um cliente...</option>
+            {clients.map((c) => (
+              <option key={c.id} value={c.id}>{c.name}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {targetType === 'all' && (
+        <div className="px-3 py-2.5 rounded-lg border border-border bg-muted/40 text-sm text-muted-foreground">
+          Será enviado como broadcast para todos os {clients.length} clientes cadastrados.
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <Label>Título</Label>
+        <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex: Atualização importante" />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label>Mensagem</Label>
+          <div className="flex border border-border rounded-md overflow-hidden text-xs">
+            <button
+              type="button"
+              onClick={() => setMessageTab('edit')}
+              className={`px-3 py-1 transition-colors ${messageTab === 'edit' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+            >
+              Editar
+            </button>
+            <button
+              type="button"
+              onClick={() => setMessageTab('preview')}
+              className={`px-3 py-1 transition-colors ${messageTab === 'preview' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+            >
+              Preview
+            </button>
+          </div>
+        </div>
+        {messageTab === 'edit' ? (
+          <textarea
+            value={message}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
+            placeholder="Suporta markdown: **negrito**, _itálico_, quebras de linha..."
+            rows={5}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground resize-none font-mono text-sm"
+          />
+        ) : (
+          <div className="w-full min-h-[120px] px-3 py-2 rounded-lg border border-border bg-muted/30 text-sm prose prose-sm dark:prose-invert max-w-none [&_p]:mb-1 [&_p:last-child]:mb-0">
+            {message.trim()
+              ? <ReactMarkdown remarkPlugins={[remarkBreaks]}>{message}</ReactMarkdown>
+              : <span className="text-muted-foreground italic">Nada para visualizar</span>
+            }
+          </div>
+        )}
+        <p className="text-xs text-muted-foreground">Suporta Markdown: **negrito**, _itálico_, quebras de linha</p>
+      </div>
+
+      <Button onClick={handleSend} disabled={sending} className="w-full">
+        {sending ? 'Enviando...' : <><Send className="w-4 h-4 mr-2" />Enviar notificação</>}
+      </Button>
+    </div>
+  )
+}
diff --git a/src/views/admin/components/NotificationsPanel/NotificationHistory.tsx b/src/views/admin/components/NotificationsPanel/NotificationHistory.tsx
new file mode 100644
index 0000000..b2c7a66
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/NotificationHistory.tsx
@@ -0,0 +1,76 @@
+import { Clock, RefreshCw, AlertTriangle } from 'lucide-react'
+import { Button } from '@/components/ui'
+import { NotificationList } from './NotificationList'
+import type { UseNotificationsPanelReturn } from './useNotificationsPanel'
+
+type Props = Pick<UseNotificationsPanelReturn,
+  'history' | 'loadingHistory' | 'error' | 'grouped' | 'loadHistory' | 'handleMarkAsRead' | 'handleToggleRead'
+>
+
+export function NotificationHistory({ history, loadingHistory, error, grouped, loadHistory, handleMarkAsRead, handleToggleRead }: Props) {
+  return (
+    <div className="flex flex-col gap-4 min-h-0">
+      <div className="flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <Clock className="w-4 h-4" />
+          <h2 className="text-base font-semibold">Histórico</h2>
+          {history.length > 0 && (
+            <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full text-muted-foreground">{history.length}</span>
+          )}
+        </div>
+        <Button variant="outline" size="sm" onClick={loadHistory} disabled={loadingHistory}>
+          <RefreshCw className={`w-4 h-4 mr-2 ${loadingHistory ? 'animate-spin' : ''}`} />
+          Atualizar
+        </Button>
+      </div>
+
+      <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-1">
+        {loadingHistory && !error ? (
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
+            <RefreshCw className="w-4 h-4 animate-spin" /> Carregando...
+          </div>
+        ) : error ? (
+          <div className="flex flex-col items-center gap-4 py-8 px-4 text-center border border-destructive/20 rounded-lg">
+            <AlertTriangle className="w-8 h-8 text-destructive" />
+            <div>
+              <p className="font-medium">Erro ao carregar notificações</p>
+              <p className="text-sm text-muted-foreground">{error}</p>
+            </div>
+            <Button variant="outline" onClick={loadHistory}>
+              <RefreshCw className="w-4 h-4 mr-2" /> Tentar novamente
+            </Button>
+          </div>
+        ) : history.length === 0 ? (
+          <div className="text-muted-foreground py-8 text-center text-sm">Nenhuma notificação enviada</div>
+        ) : (
+          <>
+            {grouped.today.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-muted-foreground">Hoje ({grouped.today.length})</p>
+                <NotificationList notifications={grouped.today} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+              </div>
+            )}
+            {grouped.yesterday.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-muted-foreground">Ontem ({grouped.yesterday.length})</p>
+                <NotificationList notifications={grouped.yesterday} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+              </div>
+            )}
+            {grouped.last7Days.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-muted-foreground">Últimos 7 dias ({grouped.last7Days.length})</p>
+                <NotificationList notifications={grouped.last7Days} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+              </div>
+            )}
+            {grouped.older.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-muted-foreground">Mais antigos ({grouped.older.length})</p>
+                <NotificationList notifications={grouped.older} onMarkAsRead={handleMarkAsRead} onToggleRead={handleToggleRead} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/views/admin/components/NotificationsPanel/NotificationList.tsx b/src/views/admin/components/NotificationsPanel/NotificationList.tsx
new file mode 100644
index 0000000..d5a1814
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/NotificationList.tsx
@@ -0,0 +1,53 @@
+import { Eye, EyeOff } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkBreaks from 'remark-breaks'
+import type { Notification } from '@/types/notification'
+import { formatDate, getNotificationTypeIcon, getNotificationTypeLabel } from './utils'
+
+interface NotificationListProps {
+  notifications: Notification[]
+  onMarkAsRead: (id: string) => void
+  onToggleRead?: (id: string) => void
+}
+
+export function NotificationList({ notifications, onMarkAsRead, onToggleRead }: NotificationListProps) {
+  if (notifications.length === 0) return null
+  return (
+    <div className="border rounded-lg divide-y">
+      {notifications.map((notif) => (
+        <div key={notif.id} className={`px-4 py-3 flex items-start gap-3 ${notif.read ? 'opacity-50 bg-muted/20' : 'bg-background'}`}>
+          <div className="flex-shrink-0 mt-0.5">{getNotificationTypeIcon(notif.type)}</div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              {!notif.read && <span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />}
+              <span className={`font-medium ${notif.read ? 'font-normal' : 'font-semibold'}`}>{notif.title}</span>
+              <span className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
+                {getNotificationTypeLabel(notif.type)}
+              </span>
+              {notif.read && (
+                <span className="text-xs text-muted-foreground flex items-center gap-1">
+                  <EyeOff className="w-3 h-3" /> lida
+                </span>
+              )}
+            </div>
+            <div className="text-sm text-muted-foreground mt-1 prose prose-sm dark:prose-invert max-w-none [&_p]:mb-0 [&_strong]:text-foreground">
+              <ReactMarkdown remarkPlugins={[remarkBreaks]}>{notif.message}</ReactMarkdown>
+            </div>
+            <span className="text-xs text-muted-foreground">{formatDate(notif.created_at)}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            {!notif.read ? (
+              <button onClick={() => onMarkAsRead(notif.id)} className="p-1.5 rounded hover:bg-muted text-muted-foreground" title="Marcar como lida">
+                <Eye className="w-4 h-4" />
+              </button>
+            ) : onToggleRead ? (
+              <button onClick={() => onToggleRead(notif.id)} className="p-1.5 rounded hover:bg-muted text-muted-foreground" title="Marcar como não lida">
+                <EyeOff className="w-4 h-4" />
+              </button>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/views/admin/components/NotificationsPanel/NotificationsPanel.tsx b/src/views/admin/components/NotificationsPanel/NotificationsPanel.tsx
new file mode 100644
index 0000000..ec0c2bb
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/NotificationsPanel.tsx
@@ -0,0 +1,29 @@
+import type { Member } from '@/hooks/useSupabase'
+import type { Client } from '@/types/db'
+import { useNotificationsPanel } from './useNotificationsPanel'
+import { NotificationForm } from './NotificationForm'
+import { NotificationHistory } from './NotificationHistory'
+
+interface NotificationsPanelProps {
+  clients: Client[]
+  users: Member[]
+}
+
+export function NotificationsPanel({ clients, users }: NotificationsPanelProps) {
+  const panel = useNotificationsPanel(clients)
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[calc(90vh-13rem)]">
+      <NotificationForm {...panel} clients={clients} users={users} />
+      <NotificationHistory
+        history={panel.history}
+        loadingHistory={panel.loadingHistory}
+        error={panel.error}
+        grouped={panel.grouped}
+        loadHistory={panel.loadHistory}
+        handleMarkAsRead={panel.handleMarkAsRead}
+        handleToggleRead={panel.handleToggleRead}
+      />
+    </div>
+  )
+}
diff --git a/src/views/admin/components/NotificationsPanel/index.ts b/src/views/admin/components/NotificationsPanel/index.ts
new file mode 100644
index 0000000..5d13456
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/index.ts
@@ -0,0 +1 @@
+export { NotificationsPanel } from './NotificationsPanel'
diff --git a/src/views/admin/components/NotificationsPanel/useNotificationsPanel.ts b/src/views/admin/components/NotificationsPanel/useNotificationsPanel.ts
new file mode 100644
index 0000000..4c14260
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/useNotificationsPanel.ts
@@ -0,0 +1,107 @@
+import { useState, useCallback, useEffect, useMemo } from 'react'
+import { toast } from 'sonner'
+import { supabaseAdmin } from '@/lib/supabase'
+import {
+  createNotification,
+  createNotificationForClient,
+  createNotificationForAll,
+  fetchAllNotifications,
+  markAsRead as markAsReadApi,
+} from '@/lib/notifications'
+import type { Client } from '@/types/db'
+import type { Notification } from '@/types/notification'
+import { groupNotifications } from './utils'
+
+export type TargetType = 'user' | 'client' | 'all'
+
+export function useNotificationsPanel(clients: Client[]) {
+  const [title, setTitle] = useState('')
+  const [message, setMessage] = useState('')
+  const [targetType, setTargetType] = useState<TargetType>('user')
+  const [selectedUserId, setSelectedUserId] = useState('')
+  const [selectedClientId, setSelectedClientId] = useState('')
+  const [sending, setSending] = useState(false)
+  const [messageTab, setMessageTab] = useState<'edit' | 'preview'>('edit')
+
+  const [history, setHistory] = useState<Notification[]>([])
+  const [loadingHistory, setLoadingHistory] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const loadHistory = useCallback(async () => {
+    if (!supabaseAdmin) return
+    setLoadingHistory(true)
+    setError(null)
+    try {
+      setHistory(await fetchAllNotifications())
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Erro ao carregar')
+    } finally {
+      setLoadingHistory(false)
+    }
+  }, [])
+
+  useEffect(() => { loadHistory() }, [loadHistory])
+
+  const grouped = useMemo(() => groupNotifications(history), [history])
+
+  const handleSend = async () => {
+    if (!title.trim() || !message.trim()) { toast.error('Preencha o título e a mensagem'); return }
+    if (!supabaseAdmin) { toast.error('Admin não configurado'); return }
+
+    setSending(true)
+    try {
+      if (targetType === 'user' && selectedUserId) {
+        await createNotification(title, message, selectedUserId, undefined, 'manual')
+      } else if (targetType === 'client' && selectedClientId) {
+        await createNotificationForClient(selectedClientId, title, message)
+      } else if (targetType === 'all') {
+        await createNotificationForAll(clients.map((c) => c.id), title, message)
+      } else {
+        toast.error('Selecione um destino'); setSending(false); return
+      }
+      toast.success('Notificação enviada')
+      setTitle('')
+      setMessage('')
+      setMessageTab('edit')
+      await loadHistory()
+    } catch {
+      toast.error('Erro ao enviar notificação')
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleMarkAsRead = async (id: string) => {
+    try {
+      await markAsReadApi(id)
+      setHistory((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
+    } catch { toast.error('Erro ao marcar como lida') }
+  }
+
+  const handleToggleRead = async (id: string) => {
+    try {
+      await markAsReadApi(id)
+      setHistory((prev) => prev.map((n) => (n.id === id ? { ...n, read: !n.read } : n)))
+    } catch { toast.error('Erro ao atualizar') }
+  }
+
+  return {
+    title, setTitle,
+    message, setMessage,
+    targetType, setTargetType,
+    selectedUserId, setSelectedUserId,
+    selectedClientId, setSelectedClientId,
+    sending,
+    messageTab, setMessageTab,
+    history,
+    loadingHistory,
+    error,
+    grouped,
+    loadHistory,
+    handleSend,
+    handleMarkAsRead,
+    handleToggleRead,
+  }
+}
+
+export type UseNotificationsPanelReturn = ReturnType<typeof useNotificationsPanel>
diff --git a/src/views/admin/components/NotificationsPanel/utils.ts b/src/views/admin/components/NotificationsPanel/utils.ts
new file mode 100644
index 0000000..17d760c
--- /dev/null
+++ b/src/views/admin/components/NotificationsPanel/utils.ts
@@ -0,0 +1,60 @@
+import { UserCheck, UserX, ShieldCheck, ShieldOff, Megaphone, ClipboardList, MessageSquare } from 'lucide-react'
+import React from 'react'
+import type { Notification } from '@/types/notification'
+
+export function formatDate(dateString: string): string {
+  try {
+    return new Date(dateString).toLocaleString('pt-BR', {
+      day: '2-digit', month: '2-digit', year: 'numeric',
+      hour: '2-digit', minute: '2-digit',
+    })
+  } catch { return '' }
+}
+
+export function getNotificationTypeIcon(type: string): React.ReactNode {
+  switch (type) {
+    case 'step_assigned': return React.createElement(UserCheck, { className: 'w-4 h-4 text-emerald-500' })
+    case 'step_unassigned': return React.createElement(UserX, { className: 'w-4 h-4 text-orange-500' })
+    case 'role_changed': return React.createElement(ShieldCheck, { className: 'w-4 h-4 text-violet-500' })
+    case 'client_access_granted': return React.createElement(ShieldCheck, { className: 'w-4 h-4 text-blue-500' })
+    case 'client_access_revoked': return React.createElement(ShieldOff, { className: 'w-4 h-4 text-destructive' })
+    case 'admin_broadcast': return React.createElement(Megaphone, { className: 'w-4 h-4 text-primary' })
+    case 'manual': return React.createElement(MessageSquare, { className: 'w-4 h-4 text-muted-foreground' })
+    default: return React.createElement(ClipboardList, { className: 'w-4 h-4 text-muted-foreground' })
+  }
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  step_assigned: 'Etapa atribuída',
+  step_unassigned: 'Etapa removida',
+  role_changed: 'Cargo alterado',
+  client_access_granted: 'Acesso concedido',
+  client_access_revoked: 'Acesso revogado',
+  admin_broadcast: 'Broadcast',
+  manual: 'Manual',
+}
+
+export function getNotificationTypeLabel(type: string): string {
+  return TYPE_LABELS[type] ?? type
+}
+
+function isToday(d: string) { return new Date(d).toDateString() === new Date().toDateString() }
+function isYesterday(d: string) {
+  const y = new Date(); y.setDate(y.getDate() - 1)
+  return new Date(d).toDateString() === y.toDateString()
+}
+function isLast7Days(d: string) {
+  const diff = Math.floor((Date.now() - new Date(d).getTime()) / 86400000)
+  return diff >= 1 && diff <= 7
+}
+
+export function groupNotifications(notifications: Notification[]) {
+  const g = { today: [] as Notification[], yesterday: [] as Notification[], last7Days: [] as Notification[], older: [] as Notification[] }
+  for (const n of notifications) {
+    if (isToday(n.created_at)) g.today.push(n)
+    else if (isYesterday(n.created_at)) g.yesterday.push(n)
+    else if (isLast7Days(n.created_at)) g.last7Days.push(n)
+    else g.older.push(n)
+  }
+  return g
+}

From 7081a31d990ffc1dcf82bd2b479561a129cbe336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Fri, 17 Apr 2026 12:17:43 -0300
Subject: [PATCH 06/13] =?UTF-8?q?feat:=20:art:=20atualizado=20estilos=20da?=
 =?UTF-8?q?s=20notifica=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NotificationBell.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index 7f1dd15..8a6a1a0 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -117,9 +117,11 @@ function NotificationItem({
         e.preventDefault()
         handleClick()
       }}
-      className={`group flex items-start gap-3 px-3 py-3 cursor-pointer rounded-md mx-1 transition-colors ${
-        notification.read ? 'hover:bg-muted/40' : 'bg-primary/5 hover:bg-primary/10'
-      }`}
+     className={`group flex items-start gap-3 px-3 py-3 cursor-pointer rounded-md mx-1 border border-black/5 dark:border-white/10 transition-colors ${
+  notification.read
+    ? 'bg-background hover:bg-muted/40'
+    : 'bg-muted/30 hover:bg-muted/50'
+}`}
     >
       <div className="mt-0.5 flex-shrink-0 p-1.5 rounded-full bg-muted">
         {getNotificationTypeIcon(notification.type)}
@@ -238,7 +240,7 @@ export function NotificationBell({
         </button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="end" className="w-80 p-0 overflow-hidden flex flex-col">
+      <DropdownMenuContent align="end" className="w-[95vw] max-w-[420px] sm:max-w-[480px] p-0 overflow-hidden flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3">
           <div className="flex items-center gap-2">

From 9fd3e7eb80418d74d1694ba8ea7c1bfd7d42d339 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 17:19:31 -0300
Subject: [PATCH 07/13] fix: :bug: ajustado bug de carregamento refetch das
 stores

---
 docs/architecture.md          | 59 +++++++++++++++++++----------------
 src/App.tsx                   |  8 +++--
 src/components/AppSidebar.tsx |  1 -
 src/store/useMemberStore.ts   |  2 +-
 src/store/useTaskStore.ts     |  2 +-
 5 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/docs/architecture.md b/docs/architecture.md
index e45e027..b5662e3 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -27,8 +27,8 @@ src/
 ├── store/
 │   ├── useUIStore.ts          # Estado de UI: view ativa, modal aberto/fechado
 │   ├── useClientStore.ts      # Cliente selecionado (persist localStorage)
-│   ├── useDataStore.ts        # Cache de tasks/members, fetchData, invalidate
-│   └── appStore.ts            # Re-export de compatibilidade: useAppStore = useDataStore
+│   ├── useTaskStore.ts        # Cache de tasks, fetchTasks, invalidate
+│   └── useMemberStore.ts      # Cache de members por cliente, fetchMembers, invalidate
 ├── hooks/
 │   ├── useSupabase.ts         # Mutations CRUD (createTask, updateTask, deleteTask)
 │   ├── useHolidays.ts         # Feriados
@@ -51,12 +51,12 @@ src/
 ```
 AuthContext (AuthProvider)
     ↓ session, member, clients (filtrado por access_role), isAdmin, refreshProfile
-App.tsx (inicialização, roteamento, clientMembers)
+App.tsx (inicialização, roteamento)
     ├── useClientStore  → selectedClientId (persist)
-    ├── useDataStore    → tasks, members, fetchData, invalidate
+    ├── useTaskStore    → tasks, loading (lido pelas views diretamente)
+    ├── useMemberStore  → members, loading (lido pelas views diretamente)
     ├── useUIStore      → view, isTaskModalOpen
     ├── useSupabase({ memberId, clientId, isAdmin }) → mutations CRUD
-    ├── clientMembers (useMemo) → membros filtrados pelo cliente ativo
     ├── view="home"                    → HomeView
     ├── view="clients"                 → UserClientsView
     ├── view="overview"                → DashboardView (subview="overview") — métricas e resumo
@@ -97,19 +97,29 @@ setClient(id)
 | `null` | Admin vê todos os clientes (sem filtro no fetch) |
 | `string` | Cliente específico selecionado |
 
-### `useDataStore`
-Cache de dados. Guard: `fetchData` retorna imediatamente se `clientId === undefined`.
+### `useTaskStore`
+Cache de tasks. Fetch lazy — nenhum dado é buscado no boot. Guard: retorna imediatamente se `clientId === undefined` ou se já há dados para o mesmo `cacheKey`.
 ```ts
 tasks: Task[]
-members: Member[]
 loading: boolean
 error: string | null
-fetchData(clientId, isAdmin)    // guard: não fetcha se clientId === undefined
-invalidate()                    // limpa cache (tasks, members, cachedClientId)
+cacheKey: string | undefined       // `${clientId ?? 'all'}:${isAdmin}`
+fetchTasks(clientId, isAdmin)      // idempotente; guard se loading=true ou cacheKey inalterado
+invalidate()                       // reseta tasks, cacheKey, error e loading=false
 ```
 
-### `appStore.ts`
-Re-export de compatibilidade: `useAppStore = useDataStore`. Consumers existentes (views, `useSupabase`) não precisam de alteração.
+> **Importante:** `invalidate()` reseta `loading: false`. Sem isso, um fetch em andamento no momento da troca de cliente deixaria `loading` preso em `true`, bloqueando todos os fetches seguintes via o guard `if (state.loading) return`.
+
+### `useMemberStore`
+Cache de members filtrados por cliente. Fetch lazy por view.
+```ts
+members: Member[]
+loading: boolean
+error: string | null
+cachedClientId: string | null | undefined
+fetchMembers(clientId)             // idempotente; guard se loading=true ou clientId inalterado
+invalidate()                       // reseta members, cachedClientId, error e loading=false
+```
 
 ## Fluxo de Autenticação — Retornos Condicionais em App.tsx
 
@@ -147,9 +157,8 @@ Relê o perfil do usuário atual (member + clients) sem reiniciar o ciclo de aut
 2. App.tsx useEffect: selectedClientId===undefined && hasClients
    → setClient(clients[0].id)  ← só corre depois de auth estar pronto
 3. useClientStore persiste clientId no localStorage
-4. useEffect separado: effectiveClientId !== undefined
-   → fetchData(clientId, isAdmin)  ← nunca dispara com clientId=undefined
-5. useDataStore popula tasks/members → views renderizam
+4. Cada view ao montar chama fetchTasks/fetchMembers com o effectiveClientId
+   ← fetch lazy: nenhum dado é buscado antes da view abrir
 ```
 
 **Chave:** `App.tsx` usa `AuthContext.clients` diretamente (não `useUserClients`). `useUserClients` existe apenas em `UserClientsView` para `linkToClient`/`unlinkFromClient`.
@@ -160,15 +169,18 @@ A troca de cliente exibe um overlay de transição animado antes de efetivar a m
 
 ```
 handleSelectClient(newId)
-  → setClient(newId)                    ← persiste no localStorage (imediato)
-  → setView("home")                     ← imediato
   → setTransitionClient({ id, name })   ← exibe ClientTransitionOverlay (~3.2s)
-  → useEffect dispara fetchData(newId)  ← inicia em background durante o overlay
+  → após 650ms: setClient(newId)        ← persiste no localStorage
+               invalidateTasks()        ← reseta tasks + loading=false
+               invalidateMembers()      ← reseta members + loading=false
+               setView("home")
       ↓ onComplete (após fade-out do overlay)
   → toast cinza "Trocado para <Cliente>" (sonner, 3s)
   → setTransitionClient(null)
 ```
 
+> `invalidate` dos dois stores é chamado com `loading: false` para evitar o bug de loading eterno: se um fetch estava em andamento no momento da troca, o guard `if (state.loading) return` bloquearia todos os fetches seguintes sem o reset.
+
 > A store e o fetch são disparados **imediatamente** ao clicar, antes do overlay fechar. Quando a animação termina, os dados já chegaram ou estão a caminho — sem espera visível após a transição.
 
 ### `ClientTransitionOverlay` (`src/components/ClientTransitionOverlay.tsx`)
@@ -207,16 +219,9 @@ interface ClientOption {
 - **admin** → todos os clientes
 - **user** → apenas os associados via `user_clients`
 
-## Membros filtrados por cliente (`clientMembers` em `App.tsx`)
-
-`clientMembers` é derivado via `useMemo` a partir de `tasks` e `members`:
-- Filtra `members` para mostrar apenas quem tem steps atribuídos nas tarefas do cliente ativo.
-- Quando `effectiveClientId === null` (admin vê todos), retorna `members` completo.
-- Passado para `MembersView` e `ReportsView`. O `TaskModal` recebe `members` completo.
-
 ## Views lendo da store
 
-`DashboardView`, `MembersView` e `ReportsView` leem `tasks` e `members` diretamente de `useAppStore()` (alias de `useDataStore`). Não recebem essas props via `App.tsx`.
+`DashboardView`, `MembersView`, `ReportsView` e `TasksView` leem `tasks` e `members` diretamente de `useTaskStore()` e `useMemberStore()`. Não recebem essas props via `App.tsx`. Cada view dispara `fetchTasks`/`fetchMembers` no mount com o `effectiveClientId` atual.
 
 ## Papéis de Acesso
 
@@ -251,5 +256,5 @@ A segunda policy é necessária para que `fetchMembersFromDb` consiga buscar tod
 ## Decisões
 
 - Sem router — navegação via `useUIStore.view` (poucas views)
-- State manager: Zustand (3 stores separadas por responsabilidade)
+- State manager: Zustand (4 stores separadas por responsabilidade: UI, Client, Tasks, Members)
 - `any` intencional em dados do DB sem schema fixo em runtime
diff --git a/src/App.tsx b/src/App.tsx
index fc4dfeb..a99d895 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 import { useClientStore } from "@/store/useClientStore";
 import { useUIStore } from "@/store/useUIStore";
 import { useMemberStore } from "@/store/useMemberStore";
+import { useTaskStore } from "@/store/useTaskStore";
 import TaskModal from "./components/TaskModal";
 import { AppHeader } from "./components/AppHeader";
 import { AppSidebar } from "./components/AppSidebar";
@@ -39,7 +40,8 @@ export default function App() {
   const hasClients = clients.length > 0;
 
   const { selectedClientId, setClient } = useClientStore();
-  const { members } = useMemberStore();
+  const { members, invalidate: invalidateMembers } = useMemberStore();
+  const { invalidate: invalidateTasks } = useTaskStore();
 
   const effectiveClientId = selectedClientId === undefined
     ? (hasClients ? clients[0].id : null)
@@ -138,9 +140,11 @@ export default function App() {
     setTransitionClient({ id: clientId, name: targetClient.name })
     setTimeout(() => {
       setClient(clientId)
+      invalidateTasks()
+      invalidateMembers()
       setView("home")
     }, 650)
-  }, [clients, effectiveClientId, setClient, setView])
+  }, [clients, effectiveClientId, setClient, setView, invalidateTasks, invalidateMembers])
 
   const handleTransitionComplete = useCallback(() => {
     if (!transitionClient) return
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index d668194..4b8a453 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react"
 import {
-  CalendarDays,
   Users,
   BarChart2,
   ChevronLeft,
diff --git a/src/store/useMemberStore.ts b/src/store/useMemberStore.ts
index 785df40..e933694 100644
--- a/src/store/useMemberStore.ts
+++ b/src/store/useMemberStore.ts
@@ -84,7 +84,7 @@ export const useMemberStore = create<MemberStore>()(
       },
 
       invalidate: () => {
-        set({ members: [], cachedClientId: undefined, error: null })
+        set({ members: [], cachedClientId: undefined, error: null, loading: false })
       },
     }),
     { name: 'app/members', enabled: true }
diff --git a/src/store/useTaskStore.ts b/src/store/useTaskStore.ts
index dbaf5b5..f1fecab 100644
--- a/src/store/useTaskStore.ts
+++ b/src/store/useTaskStore.ts
@@ -113,7 +113,7 @@ export const useTaskStore = create<TaskStore>()(
       },
 
       invalidate: () => {
-        set({ tasks: [], cacheKey: undefined, error: null })
+        set({ tasks: [], cacheKey: undefined, error: null, loading: false })
       },
     }),
     { name: 'app/tasks', enabled: true }

From 70b3136d293554d727cbe9b5df4126b01a3a8859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 17:37:50 -0300
Subject: [PATCH 08/13] feat: :sparkles: nova view de perfil

---
 CLAUDE.md                                     |   3 +
 docs/architecture.md                          |  18 +-
 docs/views/profile.md                         | 115 +++++++++++++
 src/App.tsx                                   |   5 +-
 src/components/AppSidebar.tsx                 |  11 ++
 src/lib/accessControl.ts                      |   4 +
 src/store/useUIStore.ts                       |   1 +
 src/views/profile/ProfileView.tsx             |  57 +++++++
 .../profile/__tests__/AccountSection.test.tsx | 117 +++++++++++++
 .../profile/__tests__/useProfile.test.ts      | 149 +++++++++++++++++
 .../profile/components/AccountSection.tsx     | 154 ++++++++++++++++++
 .../profile/components/PreferencesSection.tsx |  83 ++++++++++
 src/views/profile/hooks/useProfile.ts         | 135 +++++++++++++++
 src/views/profile/index.ts                    |   1 +
 14 files changed, 851 insertions(+), 2 deletions(-)
 create mode 100644 docs/views/profile.md
 create mode 100644 src/views/profile/ProfileView.tsx
 create mode 100644 src/views/profile/__tests__/AccountSection.test.tsx
 create mode 100644 src/views/profile/__tests__/useProfile.test.ts
 create mode 100644 src/views/profile/components/AccountSection.tsx
 create mode 100644 src/views/profile/components/PreferencesSection.tsx
 create mode 100644 src/views/profile/hooks/useProfile.ts
 create mode 100644 src/views/profile/index.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index c5dec3e..317cd5f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,6 +18,8 @@ npm run lint      # ESLint
 
 **Member:** `id, name, role ('Designer'|'Developer'), avatar (iniciais), avatar_url?, email?, auth_user_id?, access_role ('admin'|'user'), is_active?, created_at?, deactivated_at?`
 
+**UserPreferences:** `id, user_id (fk → members.id), theme ('light'|'dark'|'system'), language ('pt-BR'|'en'), notifications_enabled, created_at, updated_at` — tabela a criar via migration (ver [docs/views/profile.md](docs/views/profile.md))
+
 **Fases:** Design (5d, violeta) → Approval (3d, laranja) → Dev (7d, azul) → QA (3d, esmeralda). Cascata automática.
 
 ## Branding
@@ -63,6 +65,7 @@ npm run lint      # ESLint
 | TasksView, filtros, badge de prazo, ActionMenu | [docs/views/tasks.md](docs/views/tasks.md) |
 | MembersView, capacidade | [docs/views/members.md](docs/views/members.md) |
 | AdminView, UsersPanel, useAdminData, useAdminStore | [docs/views/admin.md](docs/views/admin.md) |
+| ProfileView, useProfile, user_preferences | [docs/views/profile.md](docs/views/profile.md) |
 | TaskModal, cascata de fases | [docs/components/task-modal.md](docs/components/task-modal.md) |
 | Design system (Button, Input, Label, Badge) | [docs/components/ui.md](docs/components/ui.md) |
 | useSupabase, CRUD, steps | [docs/hooks/supabase.md](docs/hooks/supabase.md) |
diff --git a/docs/architecture.md b/docs/architecture.md
index b5662e3..85ac04c 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -23,7 +23,8 @@ src/
 │   ├── admin/                 # AdminView (apenas admins)
 │   ├── login/                 # LoginView
 │   ├── onboarding/            # OnboardingView — usuário autenticado sem cliente associado
-│   └── user/                  # UserClientsView + useUserClients
+│   ├── user/                  # UserClientsView + useUserClients
+│   └── profile/               # ProfileView — perfil do usuário + preferências
 ├── store/
 │   ├── useUIStore.ts          # Estado de UI: view ativa, modal aberto/fechado
 │   ├── useClientStore.ts      # Cliente selecionado (persist localStorage)
@@ -68,6 +69,7 @@ App.tsx (inicialização, roteamento)
     ├── view="tools"                   → ToolsView (grid de ferramentas)
     ├── view="tools-briefing-analyzer" → ToolsView com subview (BriefingAnalyzerView)
     ├── view="tools-import/export/integrations" → ToolsView com subview (em breve)
+    ├── view="profile"                 → ProfileView — perfil + preferências
     └── TaskModal → criar/editar (useFormState → cascata de fases)
 ```
 
@@ -80,6 +82,7 @@ view: ViewType
 // 'home' | 'overview' | 'calendar' | 'timeline' | 'list'
 // | 'members' | 'reports' | 'admin' | 'clients'
 // | 'tools' | 'tools-briefing-analyzer' | 'tools-import' | 'tools-export' | 'tools-integrations'
+// | 'profile'
 setView(view)
 isTaskModalOpen: boolean
 openTaskModal() / closeTaskModal()
@@ -228,6 +231,19 @@ interface ClientOption {
 - **admin** (`access_role = 'admin'`): vê todos os clientes; pode selecionar cliente específico ou `null` (todos)
 - **user**: vê apenas os clientes associados via `user_clients`
 
+### Permissões disponíveis (`AppPermission` em `src/lib/accessControl.ts`)
+
+| Permissão | admin | user |
+|---|---|---|
+| `view:home` | ✓ | ✓ |
+| `view:clients` | ✓ | ✓ |
+| `view:dashboard` | ✓ | ✓ |
+| `view:members` | ✓ | ✓ |
+| `view:reports` | ✓ | ✓ |
+| `view:tools` | ✓ | ✓ |
+| `view:profile` | ✓ | ✓ |
+| `view:admin` | ✓ | — |
+
 ### RLS — Visibilidade de Members
 
 A policy de `members` é `members_authenticated_read` (`USING (true)` para autenticados) — qualquer usuário autenticado vê todos os members.
diff --git a/docs/views/profile.md b/docs/views/profile.md
new file mode 100644
index 0000000..aef9b39
--- /dev/null
+++ b/docs/views/profile.md
@@ -0,0 +1,115 @@
+# ProfileView
+
+**Localização:** `src/views/profile/`
+
+View de perfil do usuário autenticado. Acessível a todos os papéis (`admin` e `user`). Não requer cliente selecionado.
+
+## Acesso
+
+- Sidebar → dropdown do usuário (rodapé) → "Meu Perfil"
+- Notificação com rota `/profile` navega para esta view automaticamente
+
+## Estrutura
+
+```
+src/views/profile/
+├── ProfileView.tsx               # View principal
+├── index.ts
+├── components/
+│   ├── AccountSection.tsx        # Dados da conta (nome, avatar, campos somente leitura)
+│   └── PreferencesSection.tsx    # Preferências (tema, idioma, notificações)
+└── hooks/
+    └── useProfile.ts             # Fetch/upsert de preferências, update de perfil
+```
+
+## Componentes
+
+### `AccountSection`
+
+Exibe e edita os dados do membro autenticado.
+
+**Campos editáveis:** `name`, `avatar_url`
+
+**Campos somente leitura:** `email`, `role`, `access_role`, `created_at`
+
+**Validação:**
+- Nome: obrigatório, mínimo 2 caracteres
+- Avatar URL: deve ser URL válida se preenchida
+
+O botão "Salvar alterações" fica desabilitado enquanto não há alterações (`dirty = false`). O componente usa `key={member.id}` no pai para recriar o estado local quando o membro muda — sem `useEffect` para reset de form.
+
+### `PreferencesSection`
+
+Exibe e edita as preferências do usuário. Persistência automática (sem botão salvar).
+
+**Campos:** `theme` (`light | dark | system`), `language` (`pt-BR | en`), `notifications_enabled`
+
+## Hook `useProfile`
+
+```ts
+useProfile(): {
+  member: Member | null
+  preferences: UserPreferences | null
+  loading: boolean
+  saving: boolean
+  savingPrefs: boolean
+  error: string | null
+  successMessage: string | null
+  updateProfile(data: ProfileFormData): Promise<boolean>
+  updatePreferences(prefs: Partial<UserPreferences>): Promise<boolean>
+}
+```
+
+### Fluxo de carregamento
+
+1. Busca `user_preferences` onde `user_id = member.id` via `.maybeSingle()`
+2. Se não encontrar → cria registro com defaults (`theme: 'system'`, `language: 'pt-BR'`, `notifications_enabled: true`)
+3. Seta `loading = false` ao final
+
+### `updateProfile`
+
+- Atualiza `name` e opcionalmente `avatar_url` na tabela `members`
+- Chama `refreshProfile()` do `AuthContext` para recarregar o estado global
+- Exibe `successMessage` por 3 segundos
+
+### `updatePreferences`
+
+- Faz update na tabela `user_preferences` com `updated_at` atual
+- Atualiza estado local imediatamente após sucesso
+
+## Modelo de Dados — `user_preferences`
+
+Tabela a criar no Supabase (migration necessária):
+
+```sql
+create table user_preferences (
+  id                   uuid primary key default gen_random_uuid(),
+  user_id              uuid not null references members(id) on delete cascade,
+  theme                text not null default 'system' check (theme in ('light', 'dark', 'system')),
+  language             text not null default 'pt-BR' check (language in ('pt-BR', 'en')),
+  notifications_enabled boolean not null default true,
+  created_at           timestamptz not null default now(),
+  updated_at           timestamptz not null default now(),
+  unique (user_id)
+);
+
+-- RLS: usuário lê e escreve apenas seus próprios registros
+alter table user_preferences enable row level security;
+
+create policy "user_preferences_self"
+  on user_preferences
+  using (user_id = (select id from members where auth_user_id = auth.uid()))
+  with check (user_id = (select id from members where auth_user_id = auth.uid()));
+```
+
+## Restrições de Acesso
+
+- Usuário só pode editar seus próprios dados (`members.id` derivado do `auth.uid()` via AuthContext)
+- `access_role` e `is_active` nunca são editáveis pela view
+- A permissão `view:profile` está disponível para `admin` e `user` em `src/lib/accessControl.ts`
+
+## Testes
+
+`src/views/profile/__tests__/useProfile.test.ts` — 5 testes do hook (carregamento, upsert de prefs, update de perfil, erro)
+
+`src/views/profile/__tests__/AccountSection.test.tsx` — 6 testes de componente (render, validação, disabled state, mensagens)
diff --git a/src/App.tsx b/src/App.tsx
index a99d895..4fcd657 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import { NoClientView } from "./components/NoClientView";
 import { HomeView } from "./views/home";
 import { ToolsView } from "./views/tools";
 import TasksView from "./views/tasks";
+import { ProfileView } from "./views/profile";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { useSupabase } from "./hooks/useSupabase";
 import { useHolidays } from "./hooks/useHolidays";
@@ -93,7 +94,7 @@ export default function App() {
     if (route.startsWith('/dashboard')) {
       setView('calendar')
     } else if (route === '/profile') {
-      // TODO: open profile
+      setView('profile')
     } else if (route === '/clients') {
       setView('clients')
     }
@@ -303,6 +304,8 @@ export default function App() {
               onEdit={(task: Task) => { setEditingTask(task); openTaskModal(); }}
               onOpenNew={() => { setEditingTask(null); openTaskModal(); }}
             />
+          ) : view === "profile" ? (
+            <ProfileView />
           ) : view === "members" ? (
             <MembersView />
           ) : view === "tools" || view === "tools-briefing-analyzer" || view === "tools-import" || view === "tools-export" || view === "tools-integrations" ? (
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 4b8a453..cd3c1aa 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -13,6 +13,7 @@ import {
   LogOut,
   Wrench,
   ListChecks,
+  UserCircle,
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -352,6 +353,11 @@ export function AppSidebar({
             <DropdownMenuContent side="right" align="end">
               <DropdownMenuLabel className="truncate max-w-48">{userEmail}</DropdownMenuLabel>
               <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => onViewChange("profile")}>
+                <UserCircle className="w-4 h-4 mr-2" />
+                Meu Perfil
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem onClick={onSignOut}>
                 <LogOut className="w-4 h-4 mr-2" />
                 Sair
@@ -385,6 +391,11 @@ export function AppSidebar({
             <DropdownMenuContent side="right" align="end">
               <DropdownMenuLabel className="truncate max-w-48">{userEmail}</DropdownMenuLabel>
               <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => onViewChange("profile")}>
+                <UserCircle className="w-4 h-4 mr-2" />
+                Meu Perfil
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem onClick={onSignOut}>
                 <LogOut className="w-4 h-4 mr-2" />
                 Sair
diff --git a/src/lib/accessControl.ts b/src/lib/accessControl.ts
index f1dd284..3888736 100644
--- a/src/lib/accessControl.ts
+++ b/src/lib/accessControl.ts
@@ -11,6 +11,7 @@ export type AppPermission =
   | 'view:reports'
   | 'view:admin'
   | 'view:tools'
+  | 'view:profile'
 
 interface ViewRule {
   requiresClient: boolean
@@ -27,6 +28,7 @@ const ROLE_PERMISSIONS: Record<AccessRole, ReadonlySet<AppPermission>> = {
     'view:reports',
     'view:admin',
     'view:tools',
+    'view:profile',
   ]),
   user: new Set([
     'view:home',
@@ -35,6 +37,7 @@ const ROLE_PERMISSIONS: Record<AccessRole, ReadonlySet<AppPermission>> = {
     'view:members',
     'view:reports',
     'view:tools',
+    'view:profile',
   ]),
 }
 
@@ -57,6 +60,7 @@ const VIEW_RULES: Record<ViewType, ViewRule> = {
   'tools-import': { requiresClient: false, roles: ['admin', 'user'], permission: 'view:tools' },
   'tools-export': { requiresClient: false, roles: ['admin', 'user'], permission: 'view:tools' },
   'tools-integrations': { requiresClient: false, roles: ['admin', 'user'], permission: 'view:tools' },
+  profile: { requiresClient: false, roles: ['admin', 'user'], permission: 'view:profile' },
 }
 
 export function resolveAccessRole(member: Member | null): AccessRole | null {
diff --git a/src/store/useUIStore.ts b/src/store/useUIStore.ts
index cd9b2ec..1996f94 100644
--- a/src/store/useUIStore.ts
+++ b/src/store/useUIStore.ts
@@ -20,6 +20,7 @@ export type ViewType =
   | 'tools-export'
   | 'tools-integrations'
   | 'demandas'
+  | 'profile'
 export type DashboardMode = 'calendar' | 'timeline'
 
 interface DashboardRedirect {
diff --git a/src/views/profile/ProfileView.tsx b/src/views/profile/ProfileView.tsx
new file mode 100644
index 0000000..e9073d1
--- /dev/null
+++ b/src/views/profile/ProfileView.tsx
@@ -0,0 +1,57 @@
+import { AccountSection } from './components/AccountSection'
+import { PreferencesSection } from './components/PreferencesSection'
+import { useProfile } from './hooks/useProfile'
+
+export function ProfileView() {
+  const {
+    member,
+    preferences,
+    loading,
+    saving,
+    savingPrefs,
+    error,
+    successMessage,
+    updateProfile,
+    updatePreferences,
+  } = useProfile()
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (!member) return null
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-10">
+      <div>
+        <h1 className="text-2xl font-bold">Meu Perfil</h1>
+        <p className="text-muted-foreground mt-1">Visualize e edite suas informações pessoais.</p>
+      </div>
+
+      <div className="border rounded-xl p-6">
+        <AccountSection
+          key={member.id}
+          member={member}
+          saving={saving}
+          error={error}
+          successMessage={successMessage}
+          onSave={updateProfile}
+        />
+      </div>
+
+      {preferences && (
+        <div className="border rounded-xl p-6">
+          <PreferencesSection
+            preferences={preferences}
+            savingPrefs={savingPrefs}
+            onUpdate={updatePreferences}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/views/profile/__tests__/AccountSection.test.tsx b/src/views/profile/__tests__/AccountSection.test.tsx
new file mode 100644
index 0000000..edb151d
--- /dev/null
+++ b/src/views/profile/__tests__/AccountSection.test.tsx
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AccountSection } from '../components/AccountSection'
+
+const member = {
+  id: 'member-1',
+  name: 'Maria Santos',
+  email: 'maria@example.com',
+  role: 'Designer',
+  access_role: 'user' as const,
+  avatar: 'MS',
+  avatar_url: null,
+  auth_user_id: 'auth-1',
+  created_at: '2024-03-15T00:00:00Z',
+}
+
+describe('AccountSection', () => {
+  it('exibe campos do membro', () => {
+    render(
+      <AccountSection
+        member={member}
+        saving={false}
+        error={null}
+        successMessage={null}
+        onSave={vi.fn()}
+      />
+    )
+    expect(screen.getByDisplayValue('Maria Santos')).toBeDefined()
+    expect(screen.getByText('maria@example.com')).toBeDefined()
+    expect(screen.getByText('Designer')).toBeDefined()
+    expect(screen.getByText('Usuário')).toBeDefined()
+  })
+
+  it('chama onSave com dados válidos', async () => {
+    const onSave = vi.fn().mockResolvedValue(true)
+    render(
+      <AccountSection
+        member={member}
+        saving={false}
+        error={null}
+        successMessage={null}
+        onSave={onSave}
+      />
+    )
+
+    const nameInput = screen.getByDisplayValue('Maria Santos')
+    await userEvent.clear(nameInput)
+    await userEvent.type(nameInput, 'Maria Editada')
+
+    await userEvent.click(screen.getByRole('button', { name: /salvar/i }))
+
+    expect(onSave).toHaveBeenCalledWith({ name: 'Maria Editada', avatar_url: '' })
+  })
+
+  it('bloqueia save com nome muito curto', async () => {
+    const onSave = vi.fn()
+    render(
+      <AccountSection
+        member={member}
+        saving={false}
+        error={null}
+        successMessage={null}
+        onSave={onSave}
+      />
+    )
+
+    const nameInput = screen.getByDisplayValue('Maria Santos')
+    await userEvent.clear(nameInput)
+    await userEvent.type(nameInput, 'X')
+
+    await userEvent.click(screen.getByRole('button', { name: /salvar/i }))
+
+    expect(onSave).not.toHaveBeenCalled()
+    expect(screen.getByText(/pelo menos 2 caracteres/i)).toBeDefined()
+  })
+
+  it('exibe mensagem de sucesso', () => {
+    render(
+      <AccountSection
+        member={member}
+        saving={false}
+        error={null}
+        successMessage="Perfil atualizado com sucesso!"
+        onSave={vi.fn()}
+      />
+    )
+    expect(screen.getByText('Perfil atualizado com sucesso!')).toBeDefined()
+  })
+
+  it('exibe mensagem de erro', () => {
+    render(
+      <AccountSection
+        member={member}
+        saving={false}
+        error="Erro ao salvar perfil."
+        successMessage={null}
+        onSave={vi.fn()}
+      />
+    )
+    expect(screen.getByText('Erro ao salvar perfil.')).toBeDefined()
+  })
+
+  it('botão salvar desabilitado quando não há alterações', () => {
+    render(
+      <AccountSection
+        member={member}
+        saving={false}
+        error={null}
+        successMessage={null}
+        onSave={vi.fn()}
+      />
+    )
+    const btn = screen.getByRole('button', { name: /salvar/i })
+    expect((btn as HTMLButtonElement).disabled).toBe(true)
+  })
+})
diff --git a/src/views/profile/__tests__/useProfile.test.ts b/src/views/profile/__tests__/useProfile.test.ts
new file mode 100644
index 0000000..39c42ba
--- /dev/null
+++ b/src/views/profile/__tests__/useProfile.test.ts
@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderHook, act, waitFor } from '@testing-library/react'
+import { useProfile } from '../hooks/useProfile'
+
+const mockMember = {
+  id: 'member-1',
+  name: 'João Silva',
+  email: 'joao@example.com',
+  role: 'Developer',
+  access_role: 'user' as const,
+  avatar: 'JS',
+  avatar_url: null,
+  auth_user_id: 'auth-1',
+  created_at: '2024-01-01T00:00:00Z',
+}
+
+const mockRefreshProfile = vi.fn().mockResolvedValue(undefined)
+
+vi.mock('@/contexts/AuthContext', () => ({
+  useAuthContext: () => ({ member: mockMember, refreshProfile: mockRefreshProfile }),
+}))
+
+const mockPrefsData = {
+  id: 'pref-1',
+  user_id: 'member-1',
+  theme: 'system' as const,
+  language: 'pt-BR' as const,
+  notifications_enabled: true,
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z',
+}
+
+// Build a fluent Supabase query mock that resolves at terminal methods
+function buildQuery(terminal: Record<string, unknown>) {
+  const q: Record<string, unknown> = {}
+  const chain = () => q
+  q['select'] = vi.fn(chain)
+  q['eq'] = vi.fn(chain)
+  q['update'] = vi.fn(chain)
+  q['insert'] = vi.fn(chain)
+  Object.entries(terminal).forEach(([k, v]) => {
+    q[k] = vi.fn(() => Promise.resolve(v))
+  })
+  return q
+}
+
+const mockSupabaseFrom = vi.fn()
+
+vi.mock('@/lib/supabase', () => ({
+  supabase: { from: (...args: unknown[]) => mockSupabaseFrom(...args) },
+}))
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('useProfile', () => {
+  it('carrega preferências existentes', async () => {
+    mockSupabaseFrom.mockReturnValue(
+      buildQuery({ maybeSingle: { data: mockPrefsData, error: null } })
+    )
+
+    const { result } = renderHook(() => useProfile())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(result.current.member?.id).toBe('member-1')
+    expect(result.current.preferences?.theme).toBe('system')
+  })
+
+  it('cria preferências quando não existem', async () => {
+    const insertQuery = buildQuery({ single: { data: mockPrefsData, error: null } })
+    const selectQuery = buildQuery({ maybeSingle: { data: null, error: null } })
+    // After maybeSingle returns null, insert is called on a new from('user_preferences')
+    let call = 0
+    mockSupabaseFrom.mockImplementation(() => {
+      call++
+      return call === 1 ? selectQuery : insertQuery
+    })
+
+    const { result } = renderHook(() => useProfile())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(insertQuery['insert']).toHaveBeenCalled()
+    expect(result.current.preferences?.id).toBe('pref-1')
+  })
+
+  it('updateProfile chama supabase update e refreshProfile', async () => {
+    const selectQuery = buildQuery({ maybeSingle: { data: mockPrefsData, error: null } })
+    const updateQuery = buildQuery({ eq: { error: null } })
+    let call = 0
+    mockSupabaseFrom.mockImplementation(() => {
+      call++
+      return call === 1 ? selectQuery : updateQuery
+    })
+
+    const { result } = renderHook(() => useProfile())
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    let ok: boolean | undefined
+    await act(async () => {
+      ok = await result.current.updateProfile({ name: 'Novo Nome', avatar_url: '' })
+    })
+
+    expect(ok).toBe(true)
+    expect(mockRefreshProfile).toHaveBeenCalled()
+  })
+
+  it('updateProfile retorna false em erro', async () => {
+    const selectQuery = buildQuery({ maybeSingle: { data: mockPrefsData, error: null } })
+    const updateQuery = buildQuery({ eq: { error: { message: 'fail' } } })
+    let call = 0
+    mockSupabaseFrom.mockImplementation(() => {
+      call++
+      return call === 1 ? selectQuery : updateQuery
+    })
+
+    const { result } = renderHook(() => useProfile())
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    let ok: boolean | undefined
+    await act(async () => {
+      ok = await result.current.updateProfile({ name: 'X', avatar_url: '' })
+    })
+
+    expect(ok).toBe(false)
+    expect(result.current.error).toBeTruthy()
+  })
+
+  it('updatePreferences atualiza estado local', async () => {
+    const selectQuery = buildQuery({ maybeSingle: { data: mockPrefsData, error: null } })
+    const updateQuery = buildQuery({ eq: { error: null } })
+    let call = 0
+    mockSupabaseFrom.mockImplementation(() => {
+      call++
+      return call === 1 ? selectQuery : updateQuery
+    })
+
+    const { result } = renderHook(() => useProfile())
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    await act(async () => {
+      await result.current.updatePreferences({ theme: 'dark' })
+    })
+
+    expect(result.current.preferences?.theme).toBe('dark')
+  })
+})
diff --git a/src/views/profile/components/AccountSection.tsx b/src/views/profile/components/AccountSection.tsx
new file mode 100644
index 0000000..9c938d0
--- /dev/null
+++ b/src/views/profile/components/AccountSection.tsx
@@ -0,0 +1,154 @@
+import { useState } from 'react'
+import { User, Mail, Shield, Calendar } from 'lucide-react'
+import { Button, Input, Label, Badge } from '@/components/ui'
+import type { Member } from '@/hooks/useSupabase'
+import type { ProfileFormData } from '../hooks/useProfile'
+
+interface AccountSectionProps {
+  member: Member
+  saving: boolean
+  error: string | null
+  successMessage: string | null
+  onSave: (data: ProfileFormData) => Promise<boolean>
+}
+
+function formatDate(dateStr: string | undefined | null): string {
+  if (!dateStr) return '—'
+  const d = new Date(dateStr)
+  return d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })
+}
+
+function isValidUrl(url: string): boolean {
+  if (!url.trim()) return true
+  try {
+    new URL(url)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function AccountSection({ member, saving, error, successMessage, onSave }: AccountSectionProps) {
+  const [name, setName] = useState(member.name ?? '')
+  const [avatarUrl, setAvatarUrl] = useState(member.avatar_url ?? '')
+  const [nameError, setNameError] = useState<string | null>(null)
+  const [avatarError, setAvatarError] = useState<string | null>(null)
+  const [dirty, setDirty] = useState(false)
+
+  const validate = (): boolean => {
+    let valid = true
+    if (!name.trim() || name.trim().length < 2) {
+      setNameError('Nome deve ter pelo menos 2 caracteres.')
+      valid = false
+    } else {
+      setNameError(null)
+    }
+    if (!isValidUrl(avatarUrl)) {
+      setAvatarError('URL do avatar inválida.')
+      valid = false
+    } else {
+      setAvatarError(null)
+    }
+    return valid
+  }
+
+  const handleSave = async () => {
+    if (!validate()) return
+    await onSave({ name: name.trim(), avatar_url: avatarUrl.trim() })
+    setDirty(false)
+  }
+
+  const accessRoleLabel = member.access_role === 'admin' ? 'Admin' : 'Usuário'
+  const accessRoleVariant = member.access_role === 'admin' ? 'default' : 'secondary'
+
+  const displayAvatar = avatarUrl || member.avatar_url
+  const initials = (member.avatar ?? member.name?.slice(0, 2) ?? '?').toUpperCase()
+
+  return (
+    <section className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Informações da Conta</h2>
+        <p className="text-sm text-muted-foreground mt-1">Gerencie seus dados pessoais.</p>
+      </div>
+
+      {/* Avatar */}
+      <div className="flex items-center gap-4">
+        <div className="w-16 h-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xl font-semibold shrink-0 overflow-hidden">
+          {displayAvatar ? (
+            <img src={displayAvatar} alt="Avatar" className="w-full h-full object-cover" />
+          ) : (
+            initials
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <Label htmlFor="avatar_url">URL do Avatar</Label>
+          <Input
+            id="avatar_url"
+            value={avatarUrl}
+            onChange={(e) => { setAvatarUrl(e.target.value); setDirty(true) }}
+            placeholder="https://exemplo.com/foto.jpg"
+            className="mt-1"
+          />
+          {avatarError && <p className="text-xs text-destructive mt-1">{avatarError}</p>}
+        </div>
+      </div>
+
+      {/* Nome */}
+      <div>
+        <Label htmlFor="name">Nome</Label>
+        <Input
+          id="name"
+          value={name}
+          onChange={(e) => { setName(e.target.value); setDirty(true) }}
+          placeholder="Seu nome"
+          className="mt-1"
+        />
+        {nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
+      </div>
+
+      {/* Campos somente leitura */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="space-y-1">
+          <Label className="flex items-center gap-1.5 text-muted-foreground">
+            <Mail className="w-3.5 h-3.5" />
+            E-mail
+          </Label>
+          <p className="text-sm py-2 px-3 bg-muted rounded-md border border-transparent">{member.email ?? '—'}</p>
+        </div>
+
+        <div className="space-y-1">
+          <Label className="flex items-center gap-1.5 text-muted-foreground">
+            <User className="w-3.5 h-3.5" />
+            Função
+          </Label>
+          <p className="text-sm py-2 px-3 bg-muted rounded-md border border-transparent">{member.role ?? '—'}</p>
+        </div>
+
+        <div className="space-y-1">
+          <Label className="flex items-center gap-1.5 text-muted-foreground">
+            <Shield className="w-3.5 h-3.5" />
+            Tipo de acesso
+          </Label>
+          <div className="py-1.5">
+            <Badge variant={accessRoleVariant}>{accessRoleLabel}</Badge>
+          </div>
+        </div>
+
+        <div className="space-y-1">
+          <Label className="flex items-center gap-1.5 text-muted-foreground">
+            <Calendar className="w-3.5 h-3.5" />
+            Membro desde
+          </Label>
+          <p className="text-sm py-2 px-3 bg-muted rounded-md border border-transparent">{formatDate(member.created_at)}</p>
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      {successMessage && <p className="text-sm text-green-600 dark:text-green-400">{successMessage}</p>}
+
+      <Button onClick={handleSave} disabled={saving || !dirty}>
+        {saving ? 'Salvando…' : 'Salvar alterações'}
+      </Button>
+    </section>
+  )
+}
diff --git a/src/views/profile/components/PreferencesSection.tsx b/src/views/profile/components/PreferencesSection.tsx
new file mode 100644
index 0000000..07e4b10
--- /dev/null
+++ b/src/views/profile/components/PreferencesSection.tsx
@@ -0,0 +1,83 @@
+import { Bell, Globe, Palette } from 'lucide-react'
+import { Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Checkbox } from '@/components/ui'
+import type { UserPreferences } from '../hooks/useProfile'
+
+interface PreferencesSectionProps {
+  preferences: UserPreferences
+  savingPrefs: boolean
+  onUpdate: (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled'>>) => Promise<boolean>
+}
+
+export function PreferencesSection({ preferences, savingPrefs, onUpdate }: PreferencesSectionProps) {
+  return (
+    <section className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Preferências</h2>
+        <p className="text-sm text-muted-foreground mt-1">Configure sua experiência na plataforma.</p>
+      </div>
+
+      {/* Tema */}
+      <div className="space-y-1.5">
+        <Label className="flex items-center gap-1.5">
+          <Palette className="w-3.5 h-3.5" />
+          Tema
+        </Label>
+        <Select
+          value={preferences.theme}
+          onValueChange={(v) => onUpdate({ theme: v as UserPreferences['theme'] })}
+          disabled={savingPrefs}
+        >
+          <SelectTrigger className="w-full sm:w-60">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="system">Sistema (automático)</SelectItem>
+            <SelectItem value="light">Claro</SelectItem>
+            <SelectItem value="dark">Escuro</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Idioma */}
+      <div className="space-y-1.5">
+        <Label className="flex items-center gap-1.5">
+          <Globe className="w-3.5 h-3.5" />
+          Idioma
+        </Label>
+        <Select
+          value={preferences.language}
+          onValueChange={(v) => onUpdate({ language: v as UserPreferences['language'] })}
+          disabled={savingPrefs}
+        >
+          <SelectTrigger className="w-full sm:w-60">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="pt-BR">Português (Brasil)</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Notificações */}
+      <div className="flex items-start gap-3">
+        <Checkbox
+          id="notifications_enabled"
+          checked={preferences.notifications_enabled}
+          onCheckedChange={(checked) => onUpdate({ notifications_enabled: Boolean(checked) })}
+          disabled={savingPrefs}
+          className="mt-0.5"
+        />
+        <div>
+          <Label htmlFor="notifications_enabled" className="flex items-center gap-1.5 cursor-pointer">
+            <Bell className="w-3.5 h-3.5" />
+            Notificações ativas
+          </Label>
+          <p className="text-xs text-muted-foreground mt-0.5">Receber notificações sobre demandas e atualizações.</p>
+        </div>
+      </div>
+
+      {savingPrefs && <p className="text-xs text-muted-foreground">Salvando…</p>}
+    </section>
+  )
+}
diff --git a/src/views/profile/hooks/useProfile.ts b/src/views/profile/hooks/useProfile.ts
new file mode 100644
index 0000000..ef5efa0
--- /dev/null
+++ b/src/views/profile/hooks/useProfile.ts
@@ -0,0 +1,135 @@
+import { useState, useEffect, useCallback } from 'react'
+import { supabase } from '@/lib/supabase'
+import { useAuthContext } from '@/contexts/AuthContext'
+
+export interface UserPreferences {
+  id: string
+  user_id: string
+  theme: 'light' | 'dark' | 'system'
+  language: 'pt-BR' | 'en'
+  notifications_enabled: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface ProfileFormData {
+  name: string
+  avatar_url: string
+}
+
+export function useProfile() {
+  const { member, refreshProfile } = useAuthContext()
+
+  const [preferences, setPreferences] = useState<UserPreferences | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [savingPrefs, setSavingPrefs] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const fetchPreferences = useCallback(async () => {
+    if (!member) {
+      setLoading(false)
+      return
+    }
+
+    const { data, error: fetchError } = await supabase
+      .from('user_preferences')
+      .select('*')
+      .eq('user_id', member.id)
+      .maybeSingle()
+
+    if (fetchError) {
+      console.warn('[useProfile] Erro ao buscar preferências:', fetchError)
+      setLoading(false)
+      return
+    }
+
+    if (!data) {
+      const defaultPrefs = {
+        user_id: member.id,
+        theme: 'system' as const,
+        language: 'pt-BR' as const,
+        notifications_enabled: true,
+      }
+      const { data: created, error: createError } = await supabase
+        .from('user_preferences')
+        .insert(defaultPrefs)
+        .select()
+        .single()
+
+      if (!createError && created) {
+        setPreferences(created as UserPreferences)
+      }
+    } else {
+      setPreferences(data as UserPreferences)
+    }
+    setLoading(false)
+  }, [member])
+
+  useEffect(() => {
+    fetchPreferences() // eslint-disable-line react-hooks/set-state-in-effect
+  }, [member, fetchPreferences])
+
+  const updateProfile = useCallback(async (formData: ProfileFormData) => {
+    if (!member) return false
+
+    setSaving(true)
+    setError(null)
+
+    const updates: Record<string, string> = { name: formData.name }
+    if (formData.avatar_url.trim()) {
+      updates.avatar_url = formData.avatar_url.trim()
+    }
+
+    const { error: updateError } = await supabase
+      .from('members')
+      .update(updates)
+      .eq('id', member.id)
+
+    setSaving(false)
+
+    if (updateError) {
+      setError('Erro ao salvar perfil. Tente novamente.')
+      return false
+    }
+
+    await refreshProfile()
+    setSuccessMessage('Perfil atualizado com sucesso!')
+    setTimeout(() => setSuccessMessage(null), 3000)
+    return true
+  }, [member, refreshProfile])
+
+  const updatePreferences = useCallback(async (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled'>>) => {
+    if (!member || !preferences) return false
+
+    setSavingPrefs(true)
+
+    const { error: updateError } = await supabase
+      .from('user_preferences')
+      .update({ ...prefs, updated_at: new Date().toISOString() })
+      .eq('user_id', member.id)
+
+    setSavingPrefs(false)
+
+    if (updateError) {
+      console.warn('[useProfile] Erro ao salvar preferências:', updateError)
+      return false
+    }
+
+    setPreferences((prev) => prev ? { ...prev, ...prefs } : prev)
+    return true
+  }, [member, preferences])
+
+  return {
+    member,
+    preferences,
+    loading,
+    saving,
+    savingPrefs,
+    error,
+    successMessage,
+    updateProfile,
+    updatePreferences,
+  }
+}
diff --git a/src/views/profile/index.ts b/src/views/profile/index.ts
new file mode 100644
index 0000000..1392697
--- /dev/null
+++ b/src/views/profile/index.ts
@@ -0,0 +1 @@
+export { ProfileView } from './ProfileView'

From c550d6b00c01f1d4635b490d62884b1a6e9089d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 17:48:30 -0300
Subject: [PATCH 09/13] =?UTF-8?q?feat:=20:sparkles:=20nova=20tela=20de=20p?=
 =?UTF-8?q?refer=C3=AAncias?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md                                     |   3 +-
 docs/views/profile.md                         |  49 ++--
 src/views/profile/ProfileView.tsx             |  82 +++++--
 .../profile/components/PreferencesSection.tsx | 226 +++++++++++++-----
 src/views/profile/hooks/useProfile.ts         |   6 +-
 .../20260420000000_user_preferences.sql       |  38 +++
 6 files changed, 298 insertions(+), 106 deletions(-)
 create mode 100644 supabase/migrations/20260420000000_user_preferences.sql

diff --git a/CLAUDE.md b/CLAUDE.md
index 317cd5f..2bf79dc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,7 +18,7 @@ npm run lint      # ESLint
 
 **Member:** `id, name, role ('Designer'|'Developer'), avatar (iniciais), avatar_url?, email?, auth_user_id?, access_role ('admin'|'user'), is_active?, created_at?, deactivated_at?`
 
-**UserPreferences:** `id, user_id (fk → members.id), theme ('light'|'dark'|'system'), language ('pt-BR'|'en'), notifications_enabled, created_at, updated_at` — tabela a criar via migration (ver [docs/views/profile.md](docs/views/profile.md))
+**UserPreferences:** `id, user_id (fk → members.id), theme ('light'|'dark'|'system'), language ('pt-BR'|'en'), notifications_enabled, default_view ('home'|'calendar'|'timeline'|'list'), client_order (text[]), created_at, updated_at`
 
 **Fases:** Design (5d, violeta) → Approval (3d, laranja) → Dev (7d, azul) → QA (3d, esmeralda). Cascata automática.
 
@@ -44,6 +44,7 @@ npm run lint      # ESLint
 - **Co-location:** componentes e hooks **privados** de uma view ficam dentro dela (`views/<nome>/components/`, `views/<nome>/hooks/`). Só sobem para `src/components/` ou `src/hooks/` quando usados por 2+ views
 - `.env` nunca commitado
 - **Testes:** toda nova feature ou bugfix deve ter testes unitários com Vitest. Rodar com `npm run test:run`. Arquivos de teste ficam em `src/**/__tests__/` co-localizados com o módulo testado
+- **Migrations:** toda alteração de schema no Supabase requer um arquivo SQL em `supabase/migrations/`. Nomenclatura: `YYYYMMDD<seq>_<descricao>.sql` — seq começa em `000000`; se houver mais de uma migration no mesmo dia, incrementar a seq (`000001`, `000002`, …). Nunca alterar migrations já aplicadas.
 
 ## CI/CD (.github/workflows/)
 
diff --git a/docs/views/profile.md b/docs/views/profile.md
index aef9b39..3fac73a 100644
--- a/docs/views/profile.md
+++ b/docs/views/profile.md
@@ -13,15 +13,19 @@ View de perfil do usuário autenticado. Acessível a todos os papéis (`admin` e
 
 ```
 src/views/profile/
-├── ProfileView.tsx               # View principal
+├── ProfileView.tsx               # View principal com sidebar interna
 ├── index.ts
 ├── components/
 │   ├── AccountSection.tsx        # Dados da conta (nome, avatar, campos somente leitura)
-│   └── PreferencesSection.tsx    # Preferências (tema, idioma, notificações)
+│   └── PreferencesSection.tsx    # Preferências (tema, idioma, notificações, ordem de clientes, view inicial)
 └── hooks/
     └── useProfile.ts             # Fetch/upsert de preferências, update de perfil
 ```
 
+## Layout
+
+A view usa um layout de dois painéis: sidebar de navegação à esquerda (abas Conta / Preferências) e conteúdo à direita dentro de um card com borda. Largura máxima `max-w-4xl`.
+
 ## Componentes
 
 ### `AccountSection`
@@ -40,9 +44,11 @@ O botão "Salvar alterações" fica desabilitado enquanto não há alterações
 
 ### `PreferencesSection`
 
-Exibe e edita as preferências do usuário. Persistência automática (sem botão salvar).
+Exibe e edita as preferências do usuário. Persistência automática (sem botão salvar). Recebe `clients: Client[]` do store de admin para montar a lista de ordem de clientes.
 
-**Campos:** `theme` (`light | dark | system`), `language` (`pt-BR | en`), `notifications_enabled`
+**Campos:** `theme` (`light | dark | system`), `language` (`pt-BR | en`), `default_view` (`home | calendar | timeline | list`), `client_order` (array de IDs arrastável), `notifications_enabled`
+
+**Ordem de clientes:** Drag-and-drop nativo (HTML5). Os IDs são salvos em `user_preferences.client_order`. Clientes não presentes no array aparecem no final na ordem de cadastro.
 
 ## Hook `useProfile`
 
@@ -79,28 +85,19 @@ useProfile(): {
 
 ## Modelo de Dados — `user_preferences`
 
-Tabela a criar no Supabase (migration necessária):
-
-```sql
-create table user_preferences (
-  id                   uuid primary key default gen_random_uuid(),
-  user_id              uuid not null references members(id) on delete cascade,
-  theme                text not null default 'system' check (theme in ('light', 'dark', 'system')),
-  language             text not null default 'pt-BR' check (language in ('pt-BR', 'en')),
-  notifications_enabled boolean not null default true,
-  created_at           timestamptz not null default now(),
-  updated_at           timestamptz not null default now(),
-  unique (user_id)
-);
-
--- RLS: usuário lê e escreve apenas seus próprios registros
-alter table user_preferences enable row level security;
-
-create policy "user_preferences_self"
-  on user_preferences
-  using (user_id = (select id from members where auth_user_id = auth.uid()))
-  with check (user_id = (select id from members where auth_user_id = auth.uid()));
-```
+Migration: `supabase/migrations/20260420000000_user_preferences.sql`
+
+| Coluna | Tipo | Default | Descrição |
+|---|---|---|---|
+| `id` | uuid PK | gen_random_uuid() | |
+| `user_id` | uuid FK → members | — | unique, cascade delete |
+| `theme` | text | `'system'` | `light \| dark \| system` |
+| `language` | text | `'pt-BR'` | `pt-BR \| en` |
+| `notifications_enabled` | boolean | `true` | |
+| `default_view` | text | `'home'` | `home \| calendar \| timeline \| list` |
+| `client_order` | text[] | `{}` | IDs ordenados dos clientes |
+| `created_at` | timestamptz | now() | |
+| `updated_at` | timestamptz | now() | |
 
 ## Restrições de Acesso
 
diff --git a/src/views/profile/ProfileView.tsx b/src/views/profile/ProfileView.tsx
index e9073d1..5a07f10 100644
--- a/src/views/profile/ProfileView.tsx
+++ b/src/views/profile/ProfileView.tsx
@@ -1,8 +1,19 @@
+import { useState, type ComponentType } from 'react'
+import { User, Settings } from 'lucide-react'
 import { AccountSection } from './components/AccountSection'
 import { PreferencesSection } from './components/PreferencesSection'
 import { useProfile } from './hooks/useProfile'
+import { useAdminStore } from '@/store/useAdminStore'
+
+type ProfileTab = 'account' | 'preferences'
+
+const TABS: { key: ProfileTab; label: string; icon: ComponentType<{ className?: string }> }[] = [
+  { key: 'account', label: 'Conta', icon: User },
+  { key: 'preferences', label: 'Preferências', icon: Settings },
+]
 
 export function ProfileView() {
+  const [tab, setTab] = useState<ProfileTab>('account')
   const {
     member,
     preferences,
@@ -15,6 +26,8 @@ export function ProfileView() {
     updatePreferences,
   } = useProfile()
 
+  const clients = useAdminStore((s) => s.clients)
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-24">
@@ -26,32 +39,59 @@ export function ProfileView() {
   if (!member) return null
 
   return (
-    <div className="max-w-2xl mx-auto space-y-10">
-      <div>
+    <div className="max-w-4xl mx-auto">
+      <div className="mb-8">
         <h1 className="text-2xl font-bold">Meu Perfil</h1>
-        <p className="text-muted-foreground mt-1">Visualize e edite suas informações pessoais.</p>
+        <p className="text-muted-foreground mt-1">Gerencie suas informações e preferências.</p>
       </div>
 
-      <div className="border rounded-xl p-6">
-        <AccountSection
-          key={member.id}
-          member={member}
-          saving={saving}
-          error={error}
-          successMessage={successMessage}
-          onSave={updateProfile}
-        />
-      </div>
+      <div className="flex gap-8">
+        {/* Sidebar */}
+        <nav className="w-48 shrink-0">
+          <ul className="space-y-1">
+            {TABS.map(({ key, label, icon: Icon }) => (
+              <li key={key}>
+                <button
+                  onClick={() => setTab(key)}
+                  className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left ${
+                    tab === key
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                  }`}
+                >
+                  <Icon className="w-4 h-4 shrink-0" />
+                  {label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="border rounded-xl p-6">
+            {tab === 'account' && (
+              <AccountSection
+                key={member.id}
+                member={member}
+                saving={saving}
+                error={error}
+                successMessage={successMessage}
+                onSave={updateProfile}
+              />
+            )}
 
-      {preferences && (
-        <div className="border rounded-xl p-6">
-          <PreferencesSection
-            preferences={preferences}
-            savingPrefs={savingPrefs}
-            onUpdate={updatePreferences}
-          />
+            {tab === 'preferences' && preferences && (
+              <PreferencesSection
+                preferences={preferences}
+                savingPrefs={savingPrefs}
+                clients={clients}
+                onUpdate={updatePreferences}
+              />
+            )}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   )
 }
diff --git a/src/views/profile/components/PreferencesSection.tsx b/src/views/profile/components/PreferencesSection.tsx
index 07e4b10..56d1610 100644
--- a/src/views/profile/components/PreferencesSection.tsx
+++ b/src/views/profile/components/PreferencesSection.tsx
@@ -1,79 +1,191 @@
-import { Bell, Globe, Palette } from 'lucide-react'
+import { Bell, Globe, Palette, LayoutDashboard, GripVertical } from 'lucide-react'
+import { useState } from 'react'
 import { Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Checkbox } from '@/components/ui'
 import type { UserPreferences } from '../hooks/useProfile'
+import type { Client } from '@/types/db'
 
 interface PreferencesSectionProps {
   preferences: UserPreferences
   savingPrefs: boolean
-  onUpdate: (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled'>>) => Promise<boolean>
+  clients: Client[]
+  onUpdate: (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled' | 'default_view' | 'client_order'>>) => Promise<boolean>
 }
 
-export function PreferencesSection({ preferences, savingPrefs, onUpdate }: PreferencesSectionProps) {
+export function PreferencesSection({ preferences, savingPrefs, clients, onUpdate }: PreferencesSectionProps) {
+  // Build ordered client list: first clients in client_order, then the rest
+  const orderedClientIds: string[] = (() => {
+    const known = new Set(clients.map((c) => c.id))
+    const saved = (preferences.client_order ?? []).filter((id) => known.has(id))
+    const rest = clients.map((c) => c.id).filter((id) => !saved.includes(id))
+    return [...saved, ...rest]
+  })()
+
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [overIndex, setOverIndex] = useState<number | null>(null)
+
+  const clientById = Object.fromEntries(clients.map((c) => [c.id, c]))
+
+  const handleDragStart = (index: number) => setDragIndex(index)
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+    setOverIndex(index)
+  }
+  const handleDrop = () => {
+    if (dragIndex === null || overIndex === null || dragIndex === overIndex) {
+      setDragIndex(null)
+      setOverIndex(null)
+      return
+    }
+    const reordered = [...orderedClientIds]
+    const [moved] = reordered.splice(dragIndex, 1)
+    reordered.splice(overIndex, 0, moved)
+    setDragIndex(null)
+    setOverIndex(null)
+    onUpdate({ client_order: reordered })
+  }
+
   return (
-    <section className="space-y-6">
+    <section className="space-y-8">
       <div>
         <h2 className="text-lg font-semibold">Preferências</h2>
         <p className="text-sm text-muted-foreground mt-1">Configure sua experiência na plataforma.</p>
       </div>
 
-      {/* Tema */}
-      <div className="space-y-1.5">
-        <Label className="flex items-center gap-1.5">
-          <Palette className="w-3.5 h-3.5" />
-          Tema
-        </Label>
-        <Select
-          value={preferences.theme}
-          onValueChange={(v) => onUpdate({ theme: v as UserPreferences['theme'] })}
-          disabled={savingPrefs}
-        >
-          <SelectTrigger className="w-full sm:w-60">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="system">Sistema (automático)</SelectItem>
-            <SelectItem value="light">Claro</SelectItem>
-            <SelectItem value="dark">Escuro</SelectItem>
-          </SelectContent>
-        </Select>
+      {/* Aparência */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Aparência</h3>
+
+        <div className="space-y-1.5">
+          <Label className="flex items-center gap-1.5">
+            <Palette className="w-3.5 h-3.5" />
+            Tema
+          </Label>
+          <Select
+            value={preferences.theme}
+            onValueChange={(v) => onUpdate({ theme: v as UserPreferences['theme'] })}
+            disabled={savingPrefs}
+          >
+            <SelectTrigger className="w-full sm:w-60">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">Sistema (automático)</SelectItem>
+              <SelectItem value="light">Claro</SelectItem>
+              <SelectItem value="dark">Escuro</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Regional */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Regional</h3>
+
+        <div className="space-y-1.5">
+          <Label className="flex items-center gap-1.5">
+            <Globe className="w-3.5 h-3.5" />
+            Idioma
+          </Label>
+          <Select
+            value={preferences.language}
+            onValueChange={(v) => onUpdate({ language: v as UserPreferences['language'] })}
+            disabled={savingPrefs}
+          >
+            <SelectTrigger className="w-full sm:w-60">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="pt-BR">Português (Brasil)</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
 
-      {/* Idioma */}
-      <div className="space-y-1.5">
-        <Label className="flex items-center gap-1.5">
-          <Globe className="w-3.5 h-3.5" />
-          Idioma
-        </Label>
-        <Select
-          value={preferences.language}
-          onValueChange={(v) => onUpdate({ language: v as UserPreferences['language'] })}
-          disabled={savingPrefs}
-        >
-          <SelectTrigger className="w-full sm:w-60">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="pt-BR">Português (Brasil)</SelectItem>
-            <SelectItem value="en">English</SelectItem>
-          </SelectContent>
-        </Select>
+      {/* Navegação */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Navegação</h3>
+
+        <div className="space-y-1.5">
+          <Label className="flex items-center gap-1.5">
+            <LayoutDashboard className="w-3.5 h-3.5" />
+            View inicial ao entrar
+          </Label>
+          <Select
+            value={preferences.default_view}
+            onValueChange={(v) => onUpdate({ default_view: v as UserPreferences['default_view'] })}
+            disabled={savingPrefs}
+          >
+            <SelectTrigger className="w-full sm:w-60">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="home">Início</SelectItem>
+              <SelectItem value="calendar">Calendário</SelectItem>
+              <SelectItem value="timeline">Timeline</SelectItem>
+              <SelectItem value="list">Lista de demandas</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
 
+      {/* Ordem de clientes */}
+      {clients.length > 0 && (
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Clientes</h3>
+
+          <div>
+            <p className="text-sm text-muted-foreground mb-3">
+              Arraste para reordenar a exibição dos clientes na barra lateral.
+            </p>
+            <ul className="space-y-1.5">
+              {orderedClientIds.map((clientId, index) => {
+                const client = clientById[clientId]
+                if (!client) return null
+                return (
+                  <li
+                    key={clientId}
+                    draggable
+                    onDragStart={() => handleDragStart(index)}
+                    onDragOver={(e) => handleDragOver(e, index)}
+                    onDrop={handleDrop}
+                    onDragEnd={() => { setDragIndex(null); setOverIndex(null) }}
+                    className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border bg-card cursor-grab active:cursor-grabbing select-none transition-colors ${
+                      overIndex === index && dragIndex !== index
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border'
+                    }`}
+                  >
+                    <GripVertical className="w-4 h-4 text-muted-foreground shrink-0" />
+                    <span className="text-sm font-medium">{client.name}</span>
+                    <span className="text-xs text-muted-foreground ml-auto">{client.slug}</span>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        </div>
+      )}
+
       {/* Notificações */}
-      <div className="flex items-start gap-3">
-        <Checkbox
-          id="notifications_enabled"
-          checked={preferences.notifications_enabled}
-          onCheckedChange={(checked) => onUpdate({ notifications_enabled: Boolean(checked) })}
-          disabled={savingPrefs}
-          className="mt-0.5"
-        />
-        <div>
-          <Label htmlFor="notifications_enabled" className="flex items-center gap-1.5 cursor-pointer">
-            <Bell className="w-3.5 h-3.5" />
-            Notificações ativas
-          </Label>
-          <p className="text-xs text-muted-foreground mt-0.5">Receber notificações sobre demandas e atualizações.</p>
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Notificações</h3>
+
+        <div className="flex items-start gap-3">
+          <Checkbox
+            id="notifications_enabled"
+            checked={preferences.notifications_enabled}
+            onCheckedChange={(checked) => onUpdate({ notifications_enabled: Boolean(checked) })}
+            disabled={savingPrefs}
+            className="mt-0.5"
+          />
+          <div>
+            <Label htmlFor="notifications_enabled" className="flex items-center gap-1.5 cursor-pointer">
+              <Bell className="w-3.5 h-3.5" />
+              Notificações ativas
+            </Label>
+            <p className="text-xs text-muted-foreground mt-0.5">Receber notificações sobre demandas e atualizações.</p>
+          </div>
         </div>
       </div>
 
diff --git a/src/views/profile/hooks/useProfile.ts b/src/views/profile/hooks/useProfile.ts
index ef5efa0..4cab023 100644
--- a/src/views/profile/hooks/useProfile.ts
+++ b/src/views/profile/hooks/useProfile.ts
@@ -8,6 +8,8 @@ export interface UserPreferences {
   theme: 'light' | 'dark' | 'system'
   language: 'pt-BR' | 'en'
   notifications_enabled: boolean
+  default_view: 'home' | 'calendar' | 'timeline' | 'list'
+  client_order: string[] // ordered array of client IDs
   created_at: string
   updated_at: string
 }
@@ -51,6 +53,8 @@ export function useProfile() {
         theme: 'system' as const,
         language: 'pt-BR' as const,
         notifications_enabled: true,
+        default_view: 'home' as const,
+        client_order: [] as string[],
       }
       const { data: created, error: createError } = await supabase
         .from('user_preferences')
@@ -100,7 +104,7 @@ export function useProfile() {
     return true
   }, [member, refreshProfile])
 
-  const updatePreferences = useCallback(async (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled'>>) => {
+  const updatePreferences = useCallback(async (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled' | 'default_view' | 'client_order'>>) => {
     if (!member || !preferences) return false
 
     setSavingPrefs(true)
diff --git a/supabase/migrations/20260420000000_user_preferences.sql b/supabase/migrations/20260420000000_user_preferences.sql
new file mode 100644
index 0000000..e64aeaf
--- /dev/null
+++ b/supabase/migrations/20260420000000_user_preferences.sql
@@ -0,0 +1,38 @@
+-- Tabela criada manualmente antes desta migration.
+-- Registrada aqui para rastreabilidade; o create é idempotente.
+create table if not exists user_preferences (
+  id                    uuid primary key default gen_random_uuid(),
+  user_id               uuid not null references members(id) on delete cascade,
+  theme                 text not null default 'system'
+                          check (theme in ('light', 'dark', 'system')),
+  language              text not null default 'pt-BR'
+                          check (language in ('pt-BR', 'en')),
+  notifications_enabled boolean not null default true,
+  created_at            timestamptz not null default now(),
+  updated_at            timestamptz not null default now(),
+  unique (user_id)
+);
+
+alter table user_preferences enable row level security;
+
+do $$
+begin
+  if not exists (
+    select 1 from pg_policies
+    where tablename = 'user_preferences' and policyname = 'user_preferences_self'
+  ) then
+    execute $p$
+      create policy "user_preferences_self"
+        on user_preferences
+        using      (user_id = (select id from members where auth_user_id = auth.uid()))
+        with check (user_id = (select id from members where auth_user_id = auth.uid()))
+    $p$;
+  end if;
+end;
+$$;
+
+-- Novas colunas adicionadas em 2026-04-20
+alter table user_preferences
+  add column if not exists default_view text not null default 'home'
+    check (default_view in ('home', 'calendar', 'timeline', 'list')),
+  add column if not exists client_order text[] not null default '{}';

From f34c95cbaab8198ba3f34be6858f5b841da00c5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 18:10:37 -0300
Subject: [PATCH 10/13] =?UTF-8?q?feat:=20:sparkles:=20nova=20view=20de=20n?=
 =?UTF-8?q?otifica=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md                                     |   2 +-
 docs/hooks/notifications.md                   |  24 ++
 docs/views/profile.md                         |   9 +-
 src/views/profile/ProfileView.tsx             |  15 +-
 .../components/NotificationsSection.tsx       | 166 ++++++++++++++
 .../profile/components/PreferencesSection.tsx |   2 +-
 src/views/profile/hooks/useProfile.ts         |   9 +-
 ...0260420000001_notification_preferences.sql |  12 +
 .../20260420000002_notification_triggers.sql  | 205 ++++++++++++++++++
 9 files changed, 436 insertions(+), 8 deletions(-)
 create mode 100644 src/views/profile/components/NotificationsSection.tsx
 create mode 100644 supabase/migrations/20260420000001_notification_preferences.sql
 create mode 100644 supabase/migrations/20260420000002_notification_triggers.sql

diff --git a/CLAUDE.md b/CLAUDE.md
index 2bf79dc..dbca1ba 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,7 +18,7 @@ npm run lint      # ESLint
 
 **Member:** `id, name, role ('Designer'|'Developer'), avatar (iniciais), avatar_url?, email?, auth_user_id?, access_role ('admin'|'user'), is_active?, created_at?, deactivated_at?`
 
-**UserPreferences:** `id, user_id (fk → members.id), theme ('light'|'dark'|'system'), language ('pt-BR'|'en'), notifications_enabled, default_view ('home'|'calendar'|'timeline'|'list'), client_order (text[]), created_at, updated_at`
+**UserPreferences:** `id, user_id (fk → members.id), theme ('light'|'dark'|'system'), language ('pt-BR'|'en'), notifications_enabled, default_view ('home'|'calendar'|'timeline'|'list'), client_order (text[]), notification_step_overdue (bool, def true), notification_task_stalled (bool, def true), notification_member_overloaded (bool, def true), stalled_days_threshold (int 1–30, def 5), overload_threshold (int 1–20, def 3), created_at, updated_at`
 
 **Fases:** Design (5d, violeta) → Approval (3d, laranja) → Dev (7d, azul) → QA (3d, esmeralda). Cascata automática.
 
diff --git a/docs/hooks/notifications.md b/docs/hooks/notifications.md
index 6bea740..3f2f7eb 100644
--- a/docs/hooks/notifications.md
+++ b/docs/hooks/notifications.md
@@ -125,3 +125,27 @@ Cada item exibe ícone e label indicando o destinatário:
 ## Comportamento de clique
 
 `onNotificationClick` deve navegar dentro do **cliente atual** sem trocar de cliente. A rota é resolvida por `resolveNotificationRoute` em `src/lib/notifications.ts`.
+
+---
+
+# Triggers automáticos (pg_cron)
+
+Migration: `supabase/migrations/20260420000002_notification_triggers.sql`
+
+Jobs agendados às **9h, 12h e 15h UTC**. Só executam se houve mudança de `status` em `audit_logs` nas últimas 3 horas (`has_recent_audit_activity`).
+
+## Tipos gerados automaticamente
+
+| `type` | Destinatário | Condição |
+|---|---|---|
+| `step_overdue` | assignee do step | `task_steps.end_date < hoje` e step não concluído |
+| `task_stalled` | assignee da task | sem entrada em `audit_logs` há mais de `stalled_days_threshold` dias |
+| `member_overloaded` | admins do cliente | membro com tasks `em andamento` ≥ `overload_threshold` |
+
+## Deduplicação
+
+Cada função verifica `NOT EXISTS` antes de inserir — nunca gera a mesma notificação duas vezes no mesmo dia para o mesmo par `(user_id, entity_id)`.
+
+## Preferências respeitadas
+
+As funções consultam `user_preferences` antes de inserir. Se o switch correspondente for `false`, o usuário não recebe aquele tipo.
diff --git a/docs/views/profile.md b/docs/views/profile.md
index 3fac73a..0fea369 100644
--- a/docs/views/profile.md
+++ b/docs/views/profile.md
@@ -85,7 +85,7 @@ useProfile(): {
 
 ## Modelo de Dados — `user_preferences`
 
-Migration: `supabase/migrations/20260420000000_user_preferences.sql`
+Migrations: `20260420000000_user_preferences.sql`, `20260420000001_notification_preferences.sql`
 
 | Coluna | Tipo | Default | Descrição |
 |---|---|---|---|
@@ -93,9 +93,14 @@ Migration: `supabase/migrations/20260420000000_user_preferences.sql`
 | `user_id` | uuid FK → members | — | unique, cascade delete |
 | `theme` | text | `'system'` | `light \| dark \| system` |
 | `language` | text | `'pt-BR'` | `pt-BR \| en` |
-| `notifications_enabled` | boolean | `true` | |
+| `notifications_enabled` | boolean | `true` | Liga/desliga todas as notificações |
 | `default_view` | text | `'home'` | `home \| calendar \| timeline \| list` |
 | `client_order` | text[] | `{}` | IDs ordenados dos clientes |
+| `notification_step_overdue` | boolean | `true` | Receber alerta de etapa em atraso |
+| `notification_task_stalled` | boolean | `true` | Receber alerta de demanda parada |
+| `notification_member_overloaded` | boolean | `true` | Receber alerta de membro sobrecarregado (relevante para admins) |
+| `stalled_days_threshold` | integer 1–30 | `5` | Dias sem atividade para considerar demanda parada (configurável pelo manager) |
+| `overload_threshold` | integer 1–20 | `3` | Nº de tasks simultâneas para disparar alerta de sobrecarga (configurável pelo manager) |
 | `created_at` | timestamptz | now() | |
 | `updated_at` | timestamptz | now() | |
 
diff --git a/src/views/profile/ProfileView.tsx b/src/views/profile/ProfileView.tsx
index 5a07f10..ef4de97 100644
--- a/src/views/profile/ProfileView.tsx
+++ b/src/views/profile/ProfileView.tsx
@@ -1,15 +1,17 @@
 import { useState, type ComponentType } from 'react'
-import { User, Settings } from 'lucide-react'
+import { User, Settings, Bell } from 'lucide-react'
 import { AccountSection } from './components/AccountSection'
 import { PreferencesSection } from './components/PreferencesSection'
+import { NotificationsSection } from './components/NotificationsSection'
 import { useProfile } from './hooks/useProfile'
 import { useAdminStore } from '@/store/useAdminStore'
 
-type ProfileTab = 'account' | 'preferences'
+type ProfileTab = 'account' | 'preferences' | 'notifications'
 
 const TABS: { key: ProfileTab; label: string; icon: ComponentType<{ className?: string }> }[] = [
   { key: 'account', label: 'Conta', icon: User },
   { key: 'preferences', label: 'Preferências', icon: Settings },
+  { key: 'notifications', label: 'Notificações', icon: Bell },
 ]
 
 export function ProfileView() {
@@ -89,6 +91,15 @@ export function ProfileView() {
                 onUpdate={updatePreferences}
               />
             )}
+
+            {tab === 'notifications' && preferences && (
+              <NotificationsSection
+                preferences={preferences}
+                isAdmin={member.access_role === 'admin'}
+                savingPrefs={savingPrefs}
+                onUpdate={updatePreferences}
+              />
+            )}
           </div>
         </div>
       </div>
diff --git a/src/views/profile/components/NotificationsSection.tsx b/src/views/profile/components/NotificationsSection.tsx
new file mode 100644
index 0000000..e24dfa3
--- /dev/null
+++ b/src/views/profile/components/NotificationsSection.tsx
@@ -0,0 +1,166 @@
+import { Clock, AlertTriangle, Users } from 'lucide-react'
+import { Input } from '@/components/ui'
+import type { UserPreferences } from '../hooks/useProfile'
+
+interface NotificationsSectionProps {
+  preferences: UserPreferences
+  isAdmin: boolean
+  savingPrefs: boolean
+  onUpdate: (prefs: Partial<Pick<UserPreferences, 'notification_step_overdue' | 'notification_task_stalled' | 'notification_member_overloaded' | 'stalled_days_threshold' | 'overload_threshold'>>) => Promise<boolean>
+}
+
+interface SwitchRowProps {
+  id: string
+  label: string
+  description: string
+  icon: React.ReactNode
+  checked: boolean
+  disabled: boolean
+  onChange: (checked: boolean) => void
+}
+
+function SwitchRow({ id, label, description, icon, checked, disabled, onChange }: SwitchRowProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-3">
+      <div className="flex items-start gap-3 min-w-0">
+        <div className="mt-0.5 text-muted-foreground shrink-0">{icon}</div>
+        <div className="min-w-0">
+          <label htmlFor={id} className="text-sm font-medium cursor-pointer select-none">
+            {label}
+          </label>
+          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+        </div>
+      </div>
+      <button
+        id={id}
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${
+          checked ? 'bg-primary' : 'bg-input'
+        }`}
+      >
+        <span
+          className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform ${
+            checked ? 'translate-x-4' : 'translate-x-0'
+          }`}
+        />
+      </button>
+    </div>
+  )
+}
+
+export function NotificationsSection({ preferences, isAdmin, savingPrefs, onUpdate }: NotificationsSectionProps) {
+  const handleStalledDays = (value: string) => {
+    const n = parseInt(value, 10)
+    if (!isNaN(n) && n >= 1 && n <= 30) {
+      onUpdate({ stalled_days_threshold: n })
+    }
+  }
+
+  const handleOverloadThreshold = (value: string) => {
+    const n = parseInt(value, 10)
+    if (!isNaN(n) && n >= 1 && n <= 20) {
+      onUpdate({ overload_threshold: n })
+    }
+  }
+
+  return (
+    <section className="space-y-8">
+      <div>
+        <h2 className="text-lg font-semibold">Notificações</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Escolha quais alertas automáticos você deseja receber.
+        </p>
+      </div>
+
+      {/* Alertas */}
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-3">Alertas</h3>
+
+        <div className="divide-y divide-border">
+          <SwitchRow
+            id="notification_step_overdue"
+            label="Etapa em atraso"
+            description="Notifica quando uma etapa atribuída a você passou da data de entrega."
+            icon={<Clock className="w-4 h-4" />}
+            checked={preferences.notification_step_overdue}
+            disabled={savingPrefs}
+            onChange={(checked) => onUpdate({ notification_step_overdue: checked })}
+          />
+          <SwitchRow
+            id="notification_task_stalled"
+            label="Demanda parada"
+            description={`Notifica quando uma demanda não tem atualizações por mais de ${preferences.stalled_days_threshold} dias.`}
+            icon={<AlertTriangle className="w-4 h-4" />}
+            checked={preferences.notification_task_stalled}
+            disabled={savingPrefs}
+            onChange={(checked) => onUpdate({ notification_task_stalled: checked })}
+          />
+          {isAdmin && (
+            <SwitchRow
+              id="notification_member_overloaded"
+              label="Membro sobrecarregado"
+              description={`Notifica quando um membro ultrapassa ${preferences.overload_threshold} demandas em andamento simultaneamente.`}
+              icon={<Users className="w-4 h-4" />}
+              checked={preferences.notification_member_overloaded}
+              disabled={savingPrefs}
+              onChange={(checked) => onUpdate({ notification_member_overloaded: checked })}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Thresholds — só admins */}
+      {isAdmin && (
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Limites</h3>
+          <p className="text-xs text-muted-foreground -mt-2">
+            Estes valores se aplicam a todos os membros dos seus clientes.
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <label htmlFor="stalled_days_threshold" className="text-sm font-medium flex items-center gap-1.5">
+                <AlertTriangle className="w-3.5 h-3.5 text-muted-foreground" />
+                Dias sem atividade
+              </label>
+              <p className="text-xs text-muted-foreground">Para considerar uma demanda parada (1–30 dias).</p>
+              <Input
+                id="stalled_days_threshold"
+                type="number"
+                min={1}
+                max={30}
+                defaultValue={preferences.stalled_days_threshold}
+                disabled={savingPrefs}
+                className="w-24"
+                onBlur={(e) => handleStalledDays(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label htmlFor="overload_threshold" className="text-sm font-medium flex items-center gap-1.5">
+                <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                Limite de sobrecarga
+              </label>
+              <p className="text-xs text-muted-foreground">Nº de demandas simultâneas para alertar (1–20).</p>
+              <Input
+                id="overload_threshold"
+                type="number"
+                min={1}
+                max={20}
+                defaultValue={preferences.overload_threshold}
+                disabled={savingPrefs}
+                className="w-24"
+                onBlur={(e) => handleOverloadThreshold(e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {savingPrefs && <p className="text-xs text-muted-foreground">Salvando…</p>}
+    </section>
+  )
+}
diff --git a/src/views/profile/components/PreferencesSection.tsx b/src/views/profile/components/PreferencesSection.tsx
index 56d1610..79d734d 100644
--- a/src/views/profile/components/PreferencesSection.tsx
+++ b/src/views/profile/components/PreferencesSection.tsx
@@ -8,7 +8,7 @@ interface PreferencesSectionProps {
   preferences: UserPreferences
   savingPrefs: boolean
   clients: Client[]
-  onUpdate: (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled' | 'default_view' | 'client_order'>>) => Promise<boolean>
+  onUpdate: (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled' | 'default_view' | 'client_order' | 'notification_step_overdue' | 'notification_task_stalled' | 'notification_member_overloaded' | 'stalled_days_threshold' | 'overload_threshold'>>) => Promise<boolean>
 }
 
 export function PreferencesSection({ preferences, savingPrefs, clients, onUpdate }: PreferencesSectionProps) {
diff --git a/src/views/profile/hooks/useProfile.ts b/src/views/profile/hooks/useProfile.ts
index 4cab023..437e057 100644
--- a/src/views/profile/hooks/useProfile.ts
+++ b/src/views/profile/hooks/useProfile.ts
@@ -9,7 +9,12 @@ export interface UserPreferences {
   language: 'pt-BR' | 'en'
   notifications_enabled: boolean
   default_view: 'home' | 'calendar' | 'timeline' | 'list'
-  client_order: string[] // ordered array of client IDs
+  client_order: string[]
+  notification_step_overdue: boolean
+  notification_task_stalled: boolean
+  notification_member_overloaded: boolean
+  stalled_days_threshold: number
+  overload_threshold: number
   created_at: string
   updated_at: string
 }
@@ -104,7 +109,7 @@ export function useProfile() {
     return true
   }, [member, refreshProfile])
 
-  const updatePreferences = useCallback(async (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled' | 'default_view' | 'client_order'>>) => {
+  const updatePreferences = useCallback(async (prefs: Partial<Pick<UserPreferences, 'theme' | 'language' | 'notifications_enabled' | 'default_view' | 'client_order' | 'notification_step_overdue' | 'notification_task_stalled' | 'notification_member_overloaded' | 'stalled_days_threshold' | 'overload_threshold'>>) => {
     if (!member || !preferences) return false
 
     setSavingPrefs(true)
diff --git a/supabase/migrations/20260420000001_notification_preferences.sql b/supabase/migrations/20260420000001_notification_preferences.sql
new file mode 100644
index 0000000..5eac9fb
--- /dev/null
+++ b/supabase/migrations/20260420000001_notification_preferences.sql
@@ -0,0 +1,12 @@
+-- Colunas de preferências de notificação por tipo em user_preferences
+-- Cada switch corresponde a uma aba na ProfileView > Notificações
+-- stalled_days_threshold e overload_threshold são configuráveis pelo manager
+
+ALTER TABLE user_preferences
+  ADD COLUMN IF NOT EXISTS notification_step_overdue      BOOLEAN NOT NULL DEFAULT true,
+  ADD COLUMN IF NOT EXISTS notification_task_stalled      BOOLEAN NOT NULL DEFAULT true,
+  ADD COLUMN IF NOT EXISTS notification_member_overloaded BOOLEAN NOT NULL DEFAULT true,
+  ADD COLUMN IF NOT EXISTS stalled_days_threshold         INTEGER NOT NULL DEFAULT 5
+    CHECK (stalled_days_threshold BETWEEN 1 AND 30),
+  ADD COLUMN IF NOT EXISTS overload_threshold             INTEGER NOT NULL DEFAULT 3
+    CHECK (overload_threshold BETWEEN 1 AND 20);
diff --git a/supabase/migrations/20260420000002_notification_triggers.sql b/supabase/migrations/20260420000002_notification_triggers.sql
new file mode 100644
index 0000000..d215d2d
--- /dev/null
+++ b/supabase/migrations/20260420000002_notification_triggers.sql
@@ -0,0 +1,205 @@
+-- Funções e jobs pg_cron para triggers inteligentes de notificação
+-- Dispara às 9h, 12h e 15h UTC apenas se houve mudança em audit_logs no período
+
+CREATE EXTENSION IF NOT EXISTS pg_cron;
+
+-- ─── Helpers ─────────────────────────────────────────────────────────────────
+
+-- Verifica se houve alguma mudança de status de task/step desde N horas atrás
+CREATE OR REPLACE FUNCTION has_recent_audit_activity(since_hours INTEGER DEFAULT 3)
+RETURNS BOOLEAN AS $$
+BEGIN
+  RETURN EXISTS (
+    SELECT 1 FROM audit_logs
+    WHERE created_at >= NOW() - (since_hours || ' hours')::INTERVAL
+      AND entity IN ('task', 'step')
+      AND field = 'status'
+  );
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- ─── 1. Steps com atraso ─────────────────────────────────────────────────────
+
+CREATE OR REPLACE FUNCTION notify_overdue_steps()
+RETURNS VOID AS $$
+DECLARE
+  r RECORD;
+BEGIN
+  -- Só executa se houve atividade recente nas últimas 3h
+  IF NOT has_recent_audit_activity(3) THEN
+    RETURN;
+  END IF;
+
+  FOR r IN
+    SELECT
+      sa.member_id,
+      t.id         AS task_id,
+      t.title      AS task_title,
+      t.client_id,
+      s.id         AS step_id,
+      s.type       AS step_type,
+      s.end_date
+    FROM task_steps s
+    JOIN tasks t ON t.id = s.task_id
+    JOIN step_assignees sa ON sa.step_id = s.id
+    JOIN members m ON m.id = sa.member_id
+    LEFT JOIN user_preferences up ON up.user_id = sa.member_id
+    WHERE s.end_date < CURRENT_DATE
+      AND s.status NOT IN ('concluído', 'concluido')
+      AND COALESCE(up.notification_step_overdue, true) = true
+      -- Evita duplicar: não notifica se já foi notificado hoje
+      AND NOT EXISTS (
+        SELECT 1 FROM notifications n
+        WHERE n.user_id = sa.member_id
+          AND n.type = 'step_overdue'
+          AND n.entity_id = s.id
+          AND n.created_at::date = CURRENT_DATE
+      )
+  LOOP
+    INSERT INTO notifications (user_id, client_id, type, title, message, entity, entity_id, metadata)
+    VALUES (
+      r.member_id,
+      r.client_id,
+      'step_overdue',
+      'Etapa em atraso',
+      'A etapa "' || r.step_type || '" da demanda "' || r.task_title || '" está atrasada desde ' || TO_CHAR(r.end_date, 'DD/MM/YYYY'),
+      'step',
+      r.step_id,
+      jsonb_build_object('task_id', r.task_id, 'task_title', r.task_title, 'step_type', r.step_type, 'end_date', r.end_date)
+    );
+  END LOOP;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- ─── 2. Tasks paradas ────────────────────────────────────────────────────────
+
+CREATE OR REPLACE FUNCTION notify_stalled_tasks()
+RETURNS VOID AS $$
+DECLARE
+  r RECORD;
+BEGIN
+  IF NOT has_recent_audit_activity(3) THEN
+    RETURN;
+  END IF;
+
+  FOR r IN
+    SELECT
+      t.id         AS task_id,
+      t.title      AS task_title,
+      t.client_id,
+      t.assignee   AS assignee_name,
+      m.id         AS member_id,
+      COALESCE(up.stalled_days_threshold, 5) AS threshold
+    FROM tasks t
+    JOIN members m ON m.name = t.assignee
+    LEFT JOIN user_preferences up ON up.user_id = m.id
+    WHERE t.status NOT IN ('concluído', 'concluido')
+      AND COALESCE(up.notification_task_stalled, true) = true
+      -- Última alteração foi há mais de threshold dias
+      AND NOT EXISTS (
+        SELECT 1 FROM audit_logs al
+        WHERE al.entity = 'task'
+          AND al.entity_id = t.id
+          AND al.created_at >= NOW() - (COALESCE(up.stalled_days_threshold, 5) || ' days')::INTERVAL
+      )
+      AND NOT EXISTS (
+        SELECT 1 FROM notifications n
+        WHERE n.user_id = m.id
+          AND n.type = 'task_stalled'
+          AND n.entity_id = t.id
+          AND n.created_at::date = CURRENT_DATE
+      )
+  LOOP
+    INSERT INTO notifications (user_id, client_id, type, title, message, entity, entity_id, metadata)
+    VALUES (
+      r.member_id,
+      r.client_id,
+      'task_stalled',
+      'Demanda parada',
+      'A demanda "' || r.task_title || '" não teve atualizações há ' || r.threshold || ' dias.',
+      'task',
+      r.task_id,
+      jsonb_build_object('task_id', r.task_id, 'task_title', r.task_title, 'stalled_days', r.threshold)
+    );
+  END LOOP;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- ─── 3. Membros sobrecarregados (só managers) ────────────────────────────────
+
+CREATE OR REPLACE FUNCTION notify_overloaded_members()
+RETURNS VOID AS $$
+DECLARE
+  r RECORD;
+  manager RECORD;
+BEGIN
+  IF NOT has_recent_audit_activity(3) THEN
+    RETURN;
+  END IF;
+
+  -- Para cada membro com tasks acima do threshold do manager
+  FOR r IN
+    SELECT
+      m.id         AS member_id,
+      m.name       AS member_name,
+      t.client_id,
+      COUNT(*)     AS active_tasks
+    FROM members m
+    JOIN tasks t ON t.assignee = m.name
+    WHERE t.status = 'em andamento'
+    GROUP BY m.id, m.name, t.client_id
+  LOOP
+    -- Notifica cada manager do mesmo cliente que tiver a preferência ligada
+    FOR manager IN
+      SELECT m2.id AS manager_id, COALESCE(up.overload_threshold, 3) AS threshold
+      FROM members m2
+      JOIN user_clients uc ON uc.user_id = m2.id AND uc.client_id = r.client_id
+      LEFT JOIN user_preferences up ON up.user_id = m2.id
+      WHERE m2.access_role = 'admin'
+        AND COALESCE(up.notification_member_overloaded, true) = true
+        AND NOT EXISTS (
+          SELECT 1 FROM notifications n
+          WHERE n.user_id = m2.id
+            AND n.type = 'member_overloaded'
+            AND n.metadata->>'member_id' = r.member_id::text
+            AND n.created_at::date = CURRENT_DATE
+        )
+    LOOP
+      IF r.active_tasks >= manager.threshold THEN
+        INSERT INTO notifications (user_id, client_id, type, title, message, entity, entity_id, metadata)
+        VALUES (
+          manager.manager_id,
+          r.client_id,
+          'member_overloaded',
+          'Membro sobrecarregado',
+          r.member_name || ' está com ' || r.active_tasks || ' demandas em andamento simultaneamente.',
+          'member',
+          r.member_id,
+          jsonb_build_object('member_id', r.member_id, 'member_name', r.member_name, 'active_tasks', r.active_tasks, 'threshold', manager.threshold)
+        );
+      END IF;
+    END LOOP;
+  END LOOP;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- ─── Função orquestradora ─────────────────────────────────────────────────────
+
+CREATE OR REPLACE FUNCTION run_notification_checks()
+RETURNS VOID AS $$
+BEGIN
+  PERFORM notify_overdue_steps();
+  PERFORM notify_stalled_tasks();
+  PERFORM notify_overloaded_members();
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- ─── pg_cron jobs: 9h, 12h e 15h UTC ────────────────────────────────────────
+
+SELECT cron.unschedule('notification-check-9h')  WHERE EXISTS (SELECT 1 FROM cron.job WHERE jobname = 'notification-check-9h');
+SELECT cron.unschedule('notification-check-12h') WHERE EXISTS (SELECT 1 FROM cron.job WHERE jobname = 'notification-check-12h');
+SELECT cron.unschedule('notification-check-15h') WHERE EXISTS (SELECT 1 FROM cron.job WHERE jobname = 'notification-check-15h');
+
+SELECT cron.schedule('notification-check-9h',  '0 9  * * *', 'SELECT run_notification_checks()');
+SELECT cron.schedule('notification-check-12h', '0 12 * * *', 'SELECT run_notification_checks()');
+SELECT cron.schedule('notification-check-15h', '0 15 * * *', 'SELECT run_notification_checks()');

From 23192c4143532e734c3d225c09e0c3116df152bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 18:18:22 -0300
Subject: [PATCH 11/13] =?UTF-8?q?perf:=20:zap:=20aprimoramento=20do=20app.?=
 =?UTF-8?q?tsx=20e=20otimiza=C3=A7=C3=A3o=20dos=20hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/architecture.md             |  17 +-
 src/App.tsx                      | 394 +++++++++++--------------------
 src/components/AppRouter.tsx     | 138 +++++++++++
 src/hooks/useAppSidebar.ts       |  32 +++
 src/hooks/useAppTheme.ts         |  25 ++
 src/hooks/useClientTransition.ts |  58 +++++
 src/hooks/useTaskActions.ts      | 102 ++++++++
 7 files changed, 505 insertions(+), 261 deletions(-)
 create mode 100644 src/components/AppRouter.tsx
 create mode 100644 src/hooks/useAppSidebar.ts
 create mode 100644 src/hooks/useAppTheme.ts
 create mode 100644 src/hooks/useClientTransition.ts
 create mode 100644 src/hooks/useTaskActions.ts

diff --git a/docs/architecture.md b/docs/architecture.md
index 85ac04c..55a1f84 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -4,9 +4,10 @@
 
 ```
 src/
-├── App.tsx                    # Root: providers, roteamento, inicialização do cliente
+├── App.tsx                    # Root: montagem do layout, orquestração de hooks — ~200 linhas
 ├── main.tsx                   # Entry point
 ├── components/
+│   ├── AppRouter.tsx                  # Mapeia view → componente; guards de cliente
 │   ├── TaskModal.tsx                  # Modal criar/editar demanda
 │   ├── AppHeader.tsx                  # Header: logo, hamburger mobile, NotificationBell, theme toggle (desktop)
 │   ├── AppSidebar.tsx                 # Sidebar de navegação; theme toggle no footer mobile
@@ -33,7 +34,11 @@ src/
 ├── hooks/
 │   ├── useSupabase.ts         # Mutations CRUD (createTask, updateTask, deleteTask)
 │   ├── useHolidays.ts         # Feriados
-│   └── useFormState.ts        # Estado do formulário TaskModal
+│   ├── useFormState.ts        # Estado do formulário TaskModal
+│   ├── useAppTheme.ts         # Dark mode: estado + sync com localStorage e <html>
+│   ├── useAppSidebar.ts       # Sidebar desktop (persist) e mobile open/close
+│   ├── useTaskActions.ts      # Estado e handlers de create/update/delete de tasks
+│   └── useClientTransition.ts # Fluxo animado de troca de cliente (overlay + stores)
 ├── contexts/
 │   └── AuthContext.tsx        # Sessão, member, clients, isAdmin, refreshProfile
 ├── lib/
@@ -158,10 +163,10 @@ Relê o perfil do usuário atual (member + clients) sem reiniciar o ciclo de aut
 ```
 1. AuthContext resolve → loading=false, clients=[...] (já filtrado por access_role)
 2. App.tsx useEffect: selectedClientId===undefined && hasClients
-   → setClient(clients[0].id)  ← só corre depois de auth estar pronto
+   → setClient(clients[0].id) + fetchTasks/fetchMembers disparados imediatamente
+   ← fetch eager: dados começam a carregar antes da view montar
 3. useClientStore persiste clientId no localStorage
-4. Cada view ao montar chama fetchTasks/fetchMembers com o effectiveClientId
-   ← fetch lazy: nenhum dado é buscado antes da view abrir
+4. Cada view ao montar lê tasks/members dos stores (já em loading ou com cache)
 ```
 
 **Chave:** `App.tsx` usa `AuthContext.clients` diretamente (não `useUserClients`). `useUserClients` existe apenas em `UserClientsView` para `linkToClient`/`unlinkFromClient`.
@@ -224,7 +229,7 @@ interface ClientOption {
 
 ## Views lendo da store
 
-`DashboardView`, `MembersView`, `ReportsView` e `TasksView` leem `tasks` e `members` diretamente de `useTaskStore()` e `useMemberStore()`. Não recebem essas props via `App.tsx`. Cada view dispara `fetchTasks`/`fetchMembers` no mount com o `effectiveClientId` atual.
+`DashboardView`, `MembersView`, `ReportsView` e `TasksView` leem `tasks` e `members` diretamente de `useTaskStore()` e `useMemberStore()`. Não recebem essas props via `App.tsx`. As views ainda chamam `fetchTasks`/`fetchMembers` no mount, mas o `App.tsx` já dispara esses fetchs ao resolver o `effectiveClientId` — reduzindo o delay de loading nas views.
 
 ## Papéis de Acesso
 
diff --git a/src/App.tsx b/src/App.tsx
index 4fcd657..c8e61b8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,69 +1,84 @@
-import { useState, useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
 import { useClientStore } from "@/store/useClientStore";
 import { useUIStore } from "@/store/useUIStore";
 import { useMemberStore } from "@/store/useMemberStore";
 import { useTaskStore } from "@/store/useTaskStore";
-import TaskModal from "./components/TaskModal";
-import { AppHeader } from "./components/AppHeader";
-import { AppSidebar } from "./components/AppSidebar";
-import { DashboardView } from "./views/dashboard";
-import MembersView from "./views/MembersView";
-import ReportsView from "./views/reports";
-import { AdminView } from "./views/admin";
-import { RequireAdmin } from "./components/RequireAdmin";
-import { LoginView } from "./views/login";
-import { OnboardingView } from "./views/onboarding";
-import { UserClientsView } from "./views/user/UserClientsView";
-import { NoClientView } from "./components/NoClientView";
-import { HomeView } from "./views/home";
-import { ToolsView } from "./views/tools";
-import TasksView from "./views/tasks";
-import { ProfileView } from "./views/profile";
 import { useAuthContext } from "@/contexts/AuthContext";
-import { useSupabase } from "./hooks/useSupabase";
-import { useHolidays } from "./hooks/useHolidays";
-import { useNotifications } from "./hooks/useNotifications";
-import { resolveNotificationRoute } from "./lib/notifications";
-import { Toaster, toast } from "sonner";
-import type { Task } from "./lib/steps";
-import type { Notification } from "./types/notification";
-import type { ViewType } from "@/store/useUIStore";
+import { useSupabase } from "@/hooks/useSupabase";
+import { useHolidays } from "@/hooks/useHolidays";
+import { useNotifications } from "@/hooks/useNotifications";
+import { useAppTheme } from "@/hooks/useAppTheme";
+import { useAppSidebar } from "@/hooks/useAppSidebar";
+import { useTaskActions } from "@/hooks/useTaskActions";
+import { useClientTransition } from "@/hooks/useClientTransition";
+import { resolveNotificationRoute } from "@/lib/notifications";
 import { canAccessView, resolveAccessRole } from "@/lib/accessControl";
-import { ConfirmModal, TooltipProvider } from "@/components/ui";
+import { Toaster, toast } from "sonner";
+import { AppHeader } from "@/components/AppHeader";
+import { AppSidebar } from "@/components/AppSidebar";
+import { AppRouter } from "@/components/AppRouter";
 import { ClientTransitionOverlay } from "@/components/ClientTransitionOverlay";
+import { ConfirmModal, TooltipProvider } from "@/components/ui";
+import TaskModal from "@/components/TaskModal";
+import { LoginView } from "@/views/login";
+import { OnboardingView } from "@/views/onboarding";
+import type { Notification } from "@/types/notification";
+import type { ViewType } from "@/store/useUIStore";
 
 export default function App() {
-  const { session, user, signIn, signOut, authError, loading: authLoading, isAdmin, member, clients, refreshProfile } = useAuthContext();
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-  const accessRole = resolveAccessRole(member);
+  const {
+    session,
+    user,
+    signIn,
+    signOut,
+    authError,
+    loading: authLoading,
+    isAdmin,
+    member,
+    clients,
+    refreshProfile,
+  } = useAuthContext();
 
+  const { darkMode, toggleDark } = useAppTheme();
+  const { sidebarOpen, mobileSidebarOpen, toggleSidebar, openMobileSidebar, closeMobileSidebar } = useAppSidebar();
+
+  const accessRole = resolveAccessRole(member);
   const hasClients = clients.length > 0;
 
   const { selectedClientId, setClient } = useClientStore();
-  const { members, invalidate: invalidateMembers } = useMemberStore();
-  const { invalidate: invalidateTasks } = useTaskStore();
-
-  const effectiveClientId = selectedClientId === undefined
-    ? (hasClients ? clients[0].id : null)
-    : (isAdmin ? selectedClientId : (selectedClientId ?? (hasClients ? clients[0].id : null)));
+  const { members, fetchMembers } = useMemberStore();
+  const { fetchTasks } = useTaskStore();
 
-  const handleSignOut = () => {
-    setIsLoggingOut(true);
-    signOut();
-  };
+  const effectiveClientId =
+    selectedClientId === undefined
+      ? hasClients ? clients[0].id : null
+      : isAdmin
+        ? selectedClientId
+        : selectedClientId ?? (hasClients ? clients[0].id : null);
 
+  // Resolve the active client on auth load and keep it in sync with available clients
   useEffect(() => {
     if (authLoading || !session) return;
 
+    let resolvedClientId: string | null | undefined = selectedClientId;
+
     if (selectedClientId === undefined && hasClients) {
       setClient(clients[0].id);
+      resolvedClientId = clients[0].id;
     } else if (!hasClients) {
       setClient(undefined);
-    } else if (typeof selectedClientId === 'string' && !clients.find(c => c.id === selectedClientId)) {
+      resolvedClientId = null;
+    } else if (typeof selectedClientId === "string" && !clients.find((c) => c.id === selectedClientId)) {
       setClient(clients[0]?.id ?? undefined);
+      resolvedClientId = clients[0]?.id ?? null;
+    }
+
+    if (resolvedClientId !== undefined) {
+      fetchTasks(resolvedClientId, isAdmin);
+      fetchMembers(resolvedClientId);
     }
-  }, [authLoading, session, hasClients, clients, selectedClientId, setClient]);
+  }, [authLoading, session, hasClients, clients, selectedClientId, setClient, fetchTasks, fetchMembers, isAdmin]);
 
   const { createTask, updateTask, deleteTask } = useSupabase({
     memberId: member?.id,
@@ -73,115 +88,64 @@ export default function App() {
 
   const { holidays } = useHolidays();
 
-  const allClientIds = clients.map((c) => c.id)
-
+  const allClientIds = clients.map((c) => c.id);
   const {
     notifications,
     unreadCount,
     markAsRead: markNotificationAsRead,
     markAllAsRead: markAllNotificationsAsRead,
     reload: reloadNotifications,
-  } = useNotifications(member?.id, allClientIds)
+  } = useNotifications(member?.id, allClientIds);
 
-  const view = useUIStore((s) => s.view)
-  const setView = useUIStore((s) => s.setView)
+  const view = useUIStore((s) => s.view);
+  const setView = useUIStore((s) => s.setView);
+  const isModalOpen = useUIStore((s) => s.isTaskModalOpen);
+  const closeTaskModal = useUIStore((s) => s.closeTaskModal);
 
-  const handleNotificationClick = useCallback((notification: Notification) => {
-    // Navega dentro do cliente atual — não troca de cliente
-    const route = resolveNotificationRoute(notification)
-    if (!route) return
-
-    if (route.startsWith('/dashboard')) {
-      setView('calendar')
-    } else if (route === '/profile') {
-      setView('profile')
-    } else if (route === '/clients') {
-      setView('clients')
-    }
-  }, [setView])
+  const { transitionTarget, selectClient, onTransitionComplete } = useClientTransition(
+    clients,
+    effectiveClientId
+  );
 
-  const [darkMode, setDarkMode] = useState(() => {
-    return (
-      localStorage.getItem("theme") === "dark" ||
-      (!localStorage.getItem("theme") &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-    )
-  })
+  const { editingTask, pendingDeleteTaskId, openNewTask, openEditTask, requestDeleteTask, cancelDeleteTask, confirmDeleteTask, saveTask } =
+    useTaskActions({ createTask, updateTask, deleteTask, effectiveClientId });
 
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", darkMode)
-    localStorage.setItem("theme", darkMode ? "dark" : "light")
-  }, [darkMode])
-
-  const [sidebarOpen, setSidebarOpen] = useState(() => {
-    return localStorage.getItem("sidebarOpen") !== "false"
-  })
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
-
-  const handleToggleSidebar = () => {
-    setSidebarOpen((prev) => {
-      localStorage.setItem("sidebarOpen", String(!prev))
-      return !prev
-    })
-  }
+  const handleNotificationClick = useCallback((notification: Notification) => {
+    const route = resolveNotificationRoute(notification);
+    if (!route) return;
 
-  const isModalOpen = useUIStore((s) => s.isTaskModalOpen)
-  const openTaskModal = useUIStore((s) => s.openTaskModal)
-  const closeTaskModal = useUIStore((s) => s.closeTaskModal)
-  const [editingTask, setEditingTask] = useState<Task | null>(null)
-  const [pendingDeleteTaskId, setPendingDeleteTaskId] = useState<string | null>(null)
-  const [closeTaskModalOnDelete, setCloseTaskModalOnDelete] = useState(false)
-
-  const [transitionClient, setTransitionClient] = useState<{ id: string | null | undefined; name: string } | null>(null)
-
-  const handleSelectClient = useCallback((clientId: string | null | undefined) => {
-    const targetClient = clients.find((c) => c.id === clientId)
-    if (!targetClient || clientId === effectiveClientId) return
-    // Exibe o overlay primeiro; após o fade-in (~650ms) dispara a troca para o fetch ocorrer em background
-    setTransitionClient({ id: clientId, name: targetClient.name })
-    setTimeout(() => {
-      setClient(clientId)
-      invalidateTasks()
-      invalidateMembers()
-      setView("home")
-    }, 650)
-  }, [clients, effectiveClientId, setClient, setView, invalidateTasks, invalidateMembers])
-
-  const handleTransitionComplete = useCallback(() => {
-    if (!transitionClient) return
-    toast('Visualização alterada', {
-      description: `Trocado para ${transitionClient.name}`,
-      style: { background: 'var(--muted)', color: 'var(--foreground)', border: '1px solid var(--border)' },
-      duration: 3000,
-    })
-    setTransitionClient(null)
-  }, [transitionClient])
+    if (route.startsWith("/dashboard")) setView("calendar");
+    else if (route === "/profile") setView("profile");
+    else if (route === "/clients") setView("clients");
+  }, [setView]);
 
   const handleViewChange = useCallback((newView: ViewType) => {
-    setMobileSidebarOpen(false);
+    closeMobileSidebar();
     const hasClientSelected = effectiveClientId !== null;
     const canAccess = canAccessView(newView, accessRole, hasClientSelected);
 
     if (!canAccess) {
-      if (newView !== "clients") {
-        toast.error("Selecione um cliente para acessar esta funcionalidade.");
-      }
+      if (newView !== "clients") toast.error("Selecione um cliente para acessar esta funcionalidade.");
       setView("clients");
     } else {
       setView(newView);
     }
-  }, [effectiveClientId, accessRole, setView]);
+  }, [effectiveClientId, accessRole, setView, closeMobileSidebar]);
 
+  // Redirect to clients if current view becomes inaccessible (e.g. client deselected)
   useEffect(() => {
     if (!authLoading && session) {
-      const hasClientSelected = effectiveClientId !== null;
-      const canAccess = canAccessView(view, accessRole, hasClientSelected);
-      if (!canAccess) {
-        setView("clients");
-      }
+      const canAccess = canAccessView(view, accessRole, effectiveClientId !== null);
+      if (!canAccess) setView("clients");
     }
   }, [authLoading, session, effectiveClientId, accessRole, view, setView]);
 
+  const selectedClient = effectiveClientId
+    ? clients.find((c) => c.id === effectiveClientId) ?? null
+    : null;
+
+  // --- Early returns (auth gates) ---
+
   if (authLoading) {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
@@ -198,46 +162,20 @@ export default function App() {
     return (
       <OnboardingView
         userName={member?.name ?? user?.email}
-        onSignOut={handleSignOut}
+        onSignOut={signOut}
         onClientsFound={refreshProfile}
       />
-    )
+    );
   }
 
-  const requestDeleteTask = (id: string, closeModalAfterDelete = false) => {
-    setPendingDeleteTaskId(id);
-    setCloseTaskModalOnDelete(closeModalAfterDelete);
-  };
-
-  const handleConfirmDeleteTask = async () => {
-    if (!pendingDeleteTaskId) return;
-
-    const taskId = pendingDeleteTaskId;
-    const shouldCloseModal = closeTaskModalOnDelete;
-
-    setPendingDeleteTaskId(null);
-    setCloseTaskModalOnDelete(false);
-
-    const ok = await deleteTask(taskId);
-    if (!ok) {
-      toast.error("Erro ao eliminar tarefa");
-      return;
-    }
-
-    if (shouldCloseModal) {
-      closeTaskModal();
-    }
-  };
-
-  const showNoClientView = !hasClients && view !== "clients";
-  const showSelectClient = hasClients && !effectiveClientId && view !== "clients";
-  const selectedClient = effectiveClientId ? clients.find(c => c.id === effectiveClientId) : null;
+  // --- Main layout ---
 
   return (
     <div className="flex flex-col h-screen bg-background text-foreground font-sans">
       <Toaster richColors position="bottom-right" />
+
       <AppHeader
-        onToggleMobileSidebar={() => setMobileSidebarOpen(true)}
+        onToggleMobileSidebar={openMobileSidebar}
         notifications={notifications}
         unreadCount={unreadCount}
         onMarkNotificationAsRead={markNotificationAsRead}
@@ -246,82 +184,52 @@ export default function App() {
         reloadNotifications={reloadNotifications}
         selectedClientId={effectiveClientId ?? null}
         darkMode={darkMode}
-        onToggleDark={() => setDarkMode((d) => !d)}
+        onToggleDark={toggleDark}
       />
 
-      <div className={`flex flex-row flex-1 overflow-hidden transition-opacity duration-300 ${isLoggingOut ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}>
-          <AppSidebar
-            open={sidebarOpen}
-            onToggle={handleToggleSidebar}
-            mobileOpen={mobileSidebarOpen}
-            onCloseMobile={() => setMobileSidebarOpen(false)}
-            view={view}
-            onViewChange={handleViewChange}
-            hasClient={hasClients}
-            role={accessRole}
-            darkMode={darkMode}
-            onToggleDark={() => setDarkMode((d) => !d)}
-            userEmail={user?.email}
-            userAvatarUrl={member?.avatar_url}
-            onSignOut={handleSignOut}
-            selectedClient={selectedClient ?? null}
-            availableClients={clients}
-            onSelectClient={handleSelectClient}
-            isAdmin={isAdmin}
-          />
-
-        <main key={view} className={cn("flex-1 overflow-auto animate-blur-fade-in", view === "home" ? "p-0" : "px-4 sm:px-6 lg:px-8 py-8")}>
+      <div className="flex flex-row flex-1 overflow-hidden">
+        <AppSidebar
+          open={sidebarOpen}
+          onToggle={toggleSidebar}
+          mobileOpen={mobileSidebarOpen}
+          onCloseMobile={closeMobileSidebar}
+          view={view}
+          onViewChange={handleViewChange}
+          hasClient={hasClients}
+          role={accessRole}
+          darkMode={darkMode}
+          onToggleDark={toggleDark}
+          userEmail={user?.email}
+          userAvatarUrl={member?.avatar_url}
+          onSignOut={signOut}
+          selectedClient={selectedClient ?? null}
+          availableClients={clients}
+          onSelectClient={selectClient}
+          isAdmin={isAdmin}
+        />
+
+        <main
+          key={view}
+          className={cn(
+            "flex-1 overflow-auto animate-blur-fade-in",
+            view === "home" ? "p-0" : "px-4 sm:px-6 lg:px-8 py-8"
+          )}
+        >
           <TooltipProvider>
-            {showNoClientView ? (
-            <NoClientView hasClients={false} onGoToClients={() => setView("clients")} />
-          ) : showSelectClient ? (
-            <NoClientView hasClients={true} onGoToClients={() => setView("clients")} />
-          ) : view === "home" ? (
-            <HomeView
-              userName={member?.name ?? user?.email ?? ""}
-              clientName={selectedClient?.name}
-              hasClient={!!effectiveClientId}
-              onViewChange={handleViewChange}
-            />
-          ) : view === "admin" ? (
-            <RequireAdmin>
-              <AdminView />
-            </RequireAdmin>
-          ) : view === "clients" ? (
-            <UserClientsView client={selectedClient ?? null} />
-          ) : view === "calendar" || view === "timeline" || view === "list" ? (
-            <DashboardView
-              subview={view}
-              onEdit={(task: Task) => { setEditingTask(task); openTaskModal(); }}
-              onDelete={(id: string) => requestDeleteTask(id)}
-              onUpdateTask={updateTask}
-              onOpenNew={() => { setEditingTask(null); openTaskModal(); }}
-              onExport={() => window.print()}
+            <AppRouter
+              view={view}
+              hasClients={hasClients}
+              effectiveClientId={effectiveClientId}
+              selectedClient={selectedClient}
+              userName={member?.name ?? ""}
+              userEmail={user?.email}
               holidays={holidays}
-            />
-          ) : view === "demandas" ? (
-            <TasksView
-              onEdit={(task: Task) => { setEditingTask(task); openTaskModal(); }}
-              onOpenNew={() => { setEditingTask(null); openTaskModal(); }}
-            />
-          ) : view === "profile" ? (
-            <ProfileView />
-          ) : view === "members" ? (
-            <MembersView />
-          ) : view === "tools" || view === "tools-briefing-analyzer" || view === "tools-import" || view === "tools-export" || view === "tools-integrations" ? (
-            <ToolsView subview={view === "tools" ? undefined : view} />
-          ) : view === "reports" || view === "reports-fluxo" || view === "reports-timeline" || view === "reports-membros" || view === "reports-alertas" ? (
-            <ReportsView 
-              subview={view === "reports" ? "geral" : view === "reports-fluxo" ? "fluxo" : view === "reports-timeline" ? "timeline" : view === "reports-membros" ? "membros" : "alertas"} 
-            />
-          ) : (
-            <HomeView
-              userName={member?.name ?? user?.email ?? ""}
-              clientName={selectedClient?.name}
-              hasClient={!!effectiveClientId}
               onViewChange={handleViewChange}
+              onEditTask={openEditTask}
+              onOpenNewTask={openNewTask}
+              onDeleteTask={requestDeleteTask}
+              onUpdateTask={updateTask}
             />
-          )}
           </TooltipProvider>
         </main>
       </div>
@@ -331,37 +239,16 @@ export default function App() {
           task={editingTask}
           members={members}
           onClose={closeTaskModal}
-          onDelete={async (id: string) => {
-            requestDeleteTask(id, true);
-          }}
-          onSave={async (taskData) => {
-            let ok: boolean;
-            if (editingTask) {
-              ok = await updateTask({
-                ...editingTask,
-                ...taskData,
-                clientId: effectiveClientId ?? editingTask.clientId,
-              });
-            } else {
-              ok = await createTask({
-                title: taskData.title,
-                clickupLink: taskData.clickupLink,
-                clientId: effectiveClientId ?? undefined,
-                status: taskData.status,
-                steps: taskData.steps,
-              });
-            }
-            if (!ok) { toast.error("Erro ao guardar tarefa"); return; }
-            closeTaskModal();
-          }}
+          onDelete={(id) => requestDeleteTask(id, true)}
+          onSave={saveTask}
           holidays={holidays}
         />
       )}
 
-      {transitionClient && (
+      {transitionTarget && (
         <ClientTransitionOverlay
-          clientName={transitionClient.name}
-          onComplete={handleTransitionComplete}
+          clientName={transitionTarget.name}
+          onComplete={onTransitionComplete}
         />
       )}
 
@@ -371,11 +258,8 @@ export default function App() {
           message="Tem a certeza que deseja eliminar esta demanda?"
           confirmLabel="Eliminar demanda"
           cancelLabel="Cancelar"
-          onConfirm={handleConfirmDeleteTask}
-          onCancel={() => {
-            setPendingDeleteTaskId(null);
-            setCloseTaskModalOnDelete(false);
-          }}
+          onConfirm={confirmDeleteTask}
+          onCancel={cancelDeleteTask}
         />
       )}
     </div>
diff --git a/src/components/AppRouter.tsx b/src/components/AppRouter.tsx
new file mode 100644
index 0000000..6f91d24
--- /dev/null
+++ b/src/components/AppRouter.tsx
@@ -0,0 +1,138 @@
+import { DashboardView } from "@/views/dashboard";
+import MembersView from "@/views/MembersView";
+import ReportsView from "@/views/reports";
+import { AdminView } from "@/views/admin";
+import { RequireAdmin } from "@/components/RequireAdmin";
+import { UserClientsView } from "@/views/user/UserClientsView";
+import { NoClientView } from "@/components/NoClientView";
+import { HomeView } from "@/views/home";
+import { ToolsView } from "@/views/tools";
+import TasksView from "@/views/tasks";
+import { ProfileView } from "@/views/profile";
+import type { ViewType } from "@/store/useUIStore";
+import type { Task } from "@/lib/steps";
+import type { Holiday } from "@/utils/holidayUtils";
+import type { ClientOption } from "@/contexts/AuthContext";
+import type { ReportsSubview } from "@/views/reports/ReportsView";
+
+type DashboardSubview = "calendar" | "timeline" | "list";
+type ToolsSubview = Extract<ViewType, "tools-briefing-analyzer" | "tools-import" | "tools-export" | "tools-integrations">;
+
+const DASHBOARD_VIEWS = new Set<ViewType>(["calendar", "timeline", "list"]);
+const TOOLS_VIEWS = new Set<ViewType>(["tools", "tools-briefing-analyzer", "tools-import", "tools-export", "tools-integrations"]);
+const REPORTS_VIEWS = new Set<ViewType>(["reports", "reports-fluxo", "reports-timeline", "reports-membros", "reports-alertas"]);
+
+const REPORTS_SUBVIEW_MAP: Partial<Record<ViewType, ReportsSubview>> = {
+  "reports": "geral",
+  "reports-fluxo": "fluxo",
+  "reports-timeline": "timeline",
+  "reports-membros": "membros",
+  "reports-alertas": "alertas",
+};
+
+interface AppRouterProps {
+  view: ViewType;
+  hasClients: boolean;
+  effectiveClientId: string | null | undefined;
+  selectedClient: ClientOption | null;
+  userName: string;
+  userEmail: string | undefined;
+  holidays: Holiday[];
+  onViewChange: (view: ViewType) => void;
+  onEditTask: (task: Task) => void;
+  onOpenNewTask: () => void;
+  onDeleteTask: (id: string) => void;
+  onUpdateTask: (task: Task) => Promise<boolean>;
+}
+
+/**
+ * Maps the active `view` to the corresponding view component.
+ * Handles guard conditions (no client selected) before delegating to the view.
+ */
+export function AppRouter({
+  view,
+  hasClients,
+  effectiveClientId,
+  selectedClient,
+  userName,
+  userEmail,
+  holidays,
+  onViewChange,
+  onEditTask,
+  onOpenNewTask,
+  onDeleteTask,
+  onUpdateTask,
+}: AppRouterProps) {
+  const goToClients = () => onViewChange("clients");
+  const displayName = userName || userEmail || "";
+
+  if (!hasClients && view !== "clients") {
+    return <NoClientView hasClients={false} onGoToClients={goToClients} />;
+  }
+
+  if (hasClients && !effectiveClientId && view !== "clients") {
+    return <NoClientView hasClients={true} onGoToClients={goToClients} />;
+  }
+
+  if (view === "home") {
+    return (
+      <HomeView
+        userName={displayName}
+        clientName={selectedClient?.name}
+        hasClient={!!effectiveClientId}
+        onViewChange={onViewChange}
+      />
+    );
+  }
+
+  if (view === "admin") {
+    return <RequireAdmin><AdminView /></RequireAdmin>;
+  }
+
+  if (view === "clients") {
+    return <UserClientsView client={selectedClient ?? null} />;
+  }
+
+  if (DASHBOARD_VIEWS.has(view)) {
+    return (
+      <DashboardView
+        subview={view as DashboardSubview}
+        onEdit={onEditTask}
+        onDelete={onDeleteTask}
+        onUpdateTask={onUpdateTask}
+        onOpenNew={onOpenNewTask}
+        onExport={() => window.print()}
+        holidays={holidays}
+      />
+    );
+  }
+
+  if (view === "demandas") {
+    return <TasksView onEdit={onEditTask} onOpenNew={onOpenNewTask} />;
+  }
+
+  if (view === "profile") {
+    return <ProfileView />;
+  }
+
+  if (view === "members") {
+    return <MembersView />;
+  }
+
+  if (TOOLS_VIEWS.has(view)) {
+    return <ToolsView subview={view === "tools" ? undefined : view as ToolsSubview} />;
+  }
+
+  if (REPORTS_VIEWS.has(view)) {
+    return <ReportsView subview={REPORTS_SUBVIEW_MAP[view]} />;
+  }
+
+  return (
+    <HomeView
+      userName={displayName}
+      clientName={selectedClient?.name}
+      hasClient={!!effectiveClientId}
+      onViewChange={onViewChange}
+    />
+  );
+}
diff --git a/src/hooks/useAppSidebar.ts b/src/hooks/useAppSidebar.ts
new file mode 100644
index 0000000..55e6259
--- /dev/null
+++ b/src/hooks/useAppSidebar.ts
@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+function resolveInitialOpen(): boolean {
+  return localStorage.getItem("sidebarOpen") !== "false";
+}
+
+/**
+ * Manages desktop and mobile sidebar visibility.
+ * Desktop open state is persisted in `localStorage`.
+ */
+export function useAppSidebar() {
+  const [sidebarOpen, setSidebarOpen] = useState(resolveInitialOpen);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setSidebarOpen((prev) => {
+      localStorage.setItem("sidebarOpen", String(!prev));
+      return !prev;
+    });
+  };
+
+  const openMobileSidebar = () => setMobileSidebarOpen(true);
+  const closeMobileSidebar = () => setMobileSidebarOpen(false);
+
+  return {
+    sidebarOpen,
+    mobileSidebarOpen,
+    toggleSidebar,
+    openMobileSidebar,
+    closeMobileSidebar,
+  };
+}
diff --git a/src/hooks/useAppTheme.ts b/src/hooks/useAppTheme.ts
new file mode 100644
index 0000000..f3f8588
--- /dev/null
+++ b/src/hooks/useAppTheme.ts
@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+function resolveInitialDarkMode(): boolean {
+  const stored = localStorage.getItem("theme");
+  if (stored === "dark") return true;
+  if (stored === "light") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+/**
+ * Manages the app-wide dark mode state.
+ * Syncs with `localStorage` and applies the `dark` class to `<html>`.
+ */
+export function useAppTheme() {
+  const [darkMode, setDarkMode] = useState(resolveInitialDarkMode);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", darkMode);
+    localStorage.setItem("theme", darkMode ? "dark" : "light");
+  }, [darkMode]);
+
+  const toggleDark = () => setDarkMode((prev) => !prev);
+
+  return { darkMode, toggleDark };
+}
diff --git a/src/hooks/useClientTransition.ts b/src/hooks/useClientTransition.ts
new file mode 100644
index 0000000..bdb31cc
--- /dev/null
+++ b/src/hooks/useClientTransition.ts
@@ -0,0 +1,58 @@
+import { useState, useCallback } from "react";
+import { toast } from "sonner";
+import { useClientStore } from "@/store/useClientStore";
+import { useTaskStore } from "@/store/useTaskStore";
+import { useMemberStore } from "@/store/useMemberStore";
+import { useUIStore } from "@/store/useUIStore";
+import type { ClientOption } from "@/contexts/AuthContext";
+
+interface TransitionTarget {
+  id: string | null | undefined;
+  name: string;
+}
+
+/**
+ * Handles the animated client-switch flow:
+ * shows `ClientTransitionOverlay`, then swaps the active client in stores.
+ */
+export function useClientTransition(
+  clients: ClientOption[],
+  effectiveClientId: string | null | undefined
+) {
+  const setClient = useClientStore((s) => s.setClient);
+  const invalidateTasks = useTaskStore((s) => s.invalidate);
+  const invalidateMembers = useMemberStore((s) => s.invalidate);
+  const setView = useUIStore((s) => s.setView);
+
+  const [transitionTarget, setTransitionTarget] = useState<TransitionTarget | null>(null);
+
+  const selectClient = useCallback((clientId: string | null | undefined) => {
+    const target = clients.find((c) => c.id === clientId);
+    if (!target || clientId === effectiveClientId) return;
+
+    // Show overlay first; after fade-in (~650ms) trigger the swap so data fetches happen in background
+    setTransitionTarget({ id: clientId, name: target.name });
+    setTimeout(() => {
+      setClient(clientId);
+      invalidateTasks();
+      invalidateMembers();
+      setView("home");
+    }, 650);
+  }, [clients, effectiveClientId, setClient, invalidateTasks, invalidateMembers, setView]);
+
+  const onTransitionComplete = useCallback(() => {
+    if (!transitionTarget) return;
+    toast("Visualização alterada", {
+      description: `Trocado para ${transitionTarget.name}`,
+      style: {
+        background: "var(--muted)",
+        color: "var(--foreground)",
+        border: "1px solid var(--border)",
+      },
+      duration: 3000,
+    });
+    setTransitionTarget(null);
+  }, [transitionTarget]);
+
+  return { transitionTarget, selectClient, onTransitionComplete };
+}
diff --git a/src/hooks/useTaskActions.ts b/src/hooks/useTaskActions.ts
new file mode 100644
index 0000000..452586e
--- /dev/null
+++ b/src/hooks/useTaskActions.ts
@@ -0,0 +1,102 @@
+import { useState, useCallback } from "react";
+import { toast } from "sonner";
+import { useUIStore } from "@/store/useUIStore";
+import type { Task } from "@/lib/steps";
+
+interface UseTaskActionsParams {
+  createTask: (data: Omit<Task, "id" | "createdAt">) => Promise<boolean>;
+  updateTask: (task: Task) => Promise<boolean>;
+  deleteTask: (id: string) => Promise<boolean>;
+  effectiveClientId: string | null | undefined;
+}
+
+/**
+ * Encapsulates task modal state and CRUD handlers (create, update, delete).
+ * Keeps App.tsx free of task-specific imperative logic.
+ */
+export function useTaskActions({
+  createTask,
+  updateTask,
+  deleteTask,
+  effectiveClientId,
+}: UseTaskActionsParams) {
+  const openTaskModal = useUIStore((s) => s.openTaskModal);
+  const closeTaskModal = useUIStore((s) => s.closeTaskModal);
+
+  const [editingTask, setEditingTask] = useState<Task | null>(null);
+  const [pendingDeleteTaskId, setPendingDeleteTaskId] = useState<string | null>(null);
+  const [closeModalOnDelete, setCloseModalOnDelete] = useState(false);
+
+  const openNewTask = useCallback(() => {
+    setEditingTask(null);
+    openTaskModal();
+  }, [openTaskModal]);
+
+  const openEditTask = useCallback((task: Task) => {
+    setEditingTask(task);
+    openTaskModal();
+  }, [openTaskModal]);
+
+  const requestDeleteTask = useCallback((id: string, closeModalAfterDelete = false) => {
+    setPendingDeleteTaskId(id);
+    setCloseModalOnDelete(closeModalAfterDelete);
+  }, []);
+
+  const cancelDeleteTask = useCallback(() => {
+    setPendingDeleteTaskId(null);
+    setCloseModalOnDelete(false);
+  }, []);
+
+  const confirmDeleteTask = useCallback(async () => {
+    if (!pendingDeleteTaskId) return;
+
+    const taskId = pendingDeleteTaskId;
+    const shouldCloseModal = closeModalOnDelete;
+
+    setPendingDeleteTaskId(null);
+    setCloseModalOnDelete(false);
+
+    const ok = await deleteTask(taskId);
+    if (!ok) {
+      toast.error("Erro ao eliminar tarefa");
+      return;
+    }
+
+    if (shouldCloseModal) closeTaskModal();
+  }, [pendingDeleteTaskId, closeModalOnDelete, deleteTask, closeTaskModal]);
+
+  const saveTask = useCallback(async (taskData: Omit<Task, "id" | "createdAt">) => {
+    let ok: boolean;
+
+    if (editingTask) {
+      ok = await updateTask({
+        ...editingTask,
+        ...taskData,
+        clientId: effectiveClientId ?? editingTask.clientId,
+      });
+    } else {
+      ok = await createTask({
+        ...taskData,
+        clientId: effectiveClientId ?? taskData.clientId,
+      });
+    }
+
+    if (!ok) {
+      toast.error("Erro ao guardar tarefa");
+      return;
+    }
+
+    closeTaskModal();
+  }, [editingTask, effectiveClientId, updateTask, createTask, closeTaskModal]);
+
+  return {
+    editingTask,
+    pendingDeleteTaskId,
+    openNewTask,
+    openEditTask,
+    requestDeleteTask,
+    cancelDeleteTask,
+    confirmDeleteTask,
+    saveTask,
+  };
+}

From 76fb3ec04c154b1f4a0d93e68ec58755b1348927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 18:31:36 -0300
Subject: [PATCH 12/13] feat: :sparkles: Melhor strutura do app

---
 docs/architecture.md            |  28 +--
 src/App.tsx                     | 313 ++++++++------------------------
 src/components/AppLayout.tsx    | 128 +++++++++++++
 src/components/AppModals.tsx    |  68 +++++++
 src/hooks/useAppOrchestrator.ts | 163 +++++++++++++++++
 5 files changed, 448 insertions(+), 252 deletions(-)
 create mode 100644 src/components/AppLayout.tsx
 create mode 100644 src/components/AppModals.tsx
 create mode 100644 src/hooks/useAppOrchestrator.ts

diff --git a/docs/architecture.md b/docs/architecture.md
index 55a1f84..d7b56cc 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -4,10 +4,12 @@
 
 ```
 src/
-├── App.tsx                    # Root: montagem do layout, orquestração de hooks — ~200 linhas
+├── App.tsx                    # Root: gates de auth + composição declarativa — ~80 linhas
 ├── main.tsx                   # Entry point
 ├── components/
 │   ├── AppRouter.tsx                  # Mapeia view → componente; guards de cliente
+│   ├── AppLayout.tsx                  # Shell do layout: AppHeader + AppSidebar + main/AppRouter
+│   ├── AppModals.tsx                  # TaskModal + ConfirmModal + ClientTransitionOverlay agrupados
 │   ├── TaskModal.tsx                  # Modal criar/editar demanda
 │   ├── AppHeader.tsx                  # Header: logo, hamburger mobile, NotificationBell, theme toggle (desktop)
 │   ├── AppSidebar.tsx                 # Sidebar de navegação; theme toggle no footer mobile
@@ -32,6 +34,7 @@ src/
 │   ├── useTaskStore.ts        # Cache de tasks, fetchTasks, invalidate
 │   └── useMemberStore.ts      # Cache de members por cliente, fetchMembers, invalidate
 ├── hooks/
+│   ├── useAppOrchestrator.ts  # Agrega toda a lógica de orquestração do App (cliente, views, notificações, task actions)
 │   ├── useSupabase.ts         # Mutations CRUD (createTask, updateTask, deleteTask)
 │   ├── useHolidays.ts         # Feriados
 │   ├── useFormState.ts        # Estado do formulário TaskModal
@@ -57,12 +60,13 @@ src/
 ```
 AuthContext (AuthProvider)
     ↓ session, member, clients (filtrado por access_role), isAdmin, refreshProfile
-App.tsx (inicialização, roteamento)
-    ├── useClientStore  → selectedClientId (persist)
-    ├── useTaskStore    → tasks, loading (lido pelas views diretamente)
-    ├── useMemberStore  → members, loading (lido pelas views diretamente)
-    ├── useUIStore      → view, isTaskModalOpen
-    ├── useSupabase({ memberId, clientId, isAdmin }) → mutations CRUD
+App.tsx (gates de auth + composição)
+    └── useAppOrchestrator (toda a lógica de orquestração)
+          ├── useClientStore  → selectedClientId (persist)
+          ├── useTaskStore    → tasks, loading (lido pelas views diretamente)
+          ├── useMemberStore  → members, loading (lido pelas views diretamente)
+          ├── useUIStore      → view, isTaskModalOpen
+          ├── useSupabase({ memberId, clientId, isAdmin }) → mutations CRUD
     ├── view="home"                    → HomeView
     ├── view="clients"                 → UserClientsView
     ├── view="overview"                → DashboardView (subview="overview") — métricas e resumo
@@ -75,7 +79,9 @@ App.tsx (inicialização, roteamento)
     ├── view="tools-briefing-analyzer" → ToolsView com subview (BriefingAnalyzerView)
     ├── view="tools-import/export/integrations" → ToolsView com subview (em breve)
     ├── view="profile"                 → ProfileView — perfil + preferências
-    └── TaskModal → criar/editar (useFormState → cascata de fases)
+          └── TaskModal → criar/editar (useFormState → cascata de fases)
+    ├── AppLayout    → shell do layout (AppHeader + AppSidebar + main/AppRouter)
+    └── AppModals    → TaskModal + ConfirmModal + ClientTransitionOverlay
 ```
 
 ## Stores (`src/store/`)
@@ -129,9 +135,9 @@ fetchMembers(clientId)             // idempotente; guard se loading=true ou clie
 invalidate()                       // reseta members, cachedClientId, error e loading=false
 ```
 
-## Fluxo de Autenticação — Retornos Condicionais em App.tsx
+## Fluxo de Autenticação — Gates em App.tsx
 
-Antes do layout principal (sidebar + header), `App.tsx` aplica retornos condicionais em ordem:
+`App.tsx` delega toda a lógica ao `useAppOrchestrator` e aplica retornos condicionais em ordem antes de montar o layout:
 
 | Condição | View renderizada |
 |---|---|
@@ -162,7 +168,7 @@ Relê o perfil do usuário atual (member + clients) sem reiniciar o ciclo de aut
 
 ```
 1. AuthContext resolve → loading=false, clients=[...] (já filtrado por access_role)
-2. App.tsx useEffect: selectedClientId===undefined && hasClients
+2. useAppOrchestrator useEffect: selectedClientId===undefined && hasClients
    → setClient(clients[0].id) + fetchTasks/fetchMembers disparados imediatamente
    ← fetch eager: dados começam a carregar antes da view montar
 3. useClientStore persiste clientId no localStorage
diff --git a/src/App.tsx b/src/App.tsx
index c8e61b8..4f7c77f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,152 +1,14 @@
-import { useEffect, useCallback } from "react";
-import { cn } from "@/lib/utils";
-import { useClientStore } from "@/store/useClientStore";
-import { useUIStore } from "@/store/useUIStore";
-import { useMemberStore } from "@/store/useMemberStore";
-import { useTaskStore } from "@/store/useTaskStore";
-import { useAuthContext } from "@/contexts/AuthContext";
-import { useSupabase } from "@/hooks/useSupabase";
-import { useHolidays } from "@/hooks/useHolidays";
-import { useNotifications } from "@/hooks/useNotifications";
-import { useAppTheme } from "@/hooks/useAppTheme";
-import { useAppSidebar } from "@/hooks/useAppSidebar";
-import { useTaskActions } from "@/hooks/useTaskActions";
-import { useClientTransition } from "@/hooks/useClientTransition";
-import { resolveNotificationRoute } from "@/lib/notifications";
-import { canAccessView, resolveAccessRole } from "@/lib/accessControl";
-import { Toaster, toast } from "sonner";
-import { AppHeader } from "@/components/AppHeader";
-import { AppSidebar } from "@/components/AppSidebar";
-import { AppRouter } from "@/components/AppRouter";
-import { ClientTransitionOverlay } from "@/components/ClientTransitionOverlay";
-import { ConfirmModal, TooltipProvider } from "@/components/ui";
-import TaskModal from "@/components/TaskModal";
+import { Toaster } from "sonner";
+import { useAppOrchestrator } from "@/hooks/useAppOrchestrator";
+import { AppLayout } from "@/components/AppLayout";
+import { AppModals } from "@/components/AppModals";
 import { LoginView } from "@/views/login";
 import { OnboardingView } from "@/views/onboarding";
-import type { Notification } from "@/types/notification";
-import type { ViewType } from "@/store/useUIStore";
 
 export default function App() {
-  const {
-    session,
-    user,
-    signIn,
-    signOut,
-    authError,
-    loading: authLoading,
-    isAdmin,
-    member,
-    clients,
-    refreshProfile,
-  } = useAuthContext();
+  const app = useAppOrchestrator();
 
-  const { darkMode, toggleDark } = useAppTheme();
-  const { sidebarOpen, mobileSidebarOpen, toggleSidebar, openMobileSidebar, closeMobileSidebar } = useAppSidebar();
-
-  const accessRole = resolveAccessRole(member);
-  const hasClients = clients.length > 0;
-
-  const { selectedClientId, setClient } = useClientStore();
-  const { members, fetchMembers } = useMemberStore();
-  const { fetchTasks } = useTaskStore();
-
-  const effectiveClientId =
-    selectedClientId === undefined
-      ? hasClients ? clients[0].id : null
-      : isAdmin
-        ? selectedClientId
-        : selectedClientId ?? (hasClients ? clients[0].id : null);
-
-  // Resolve the active client on auth load and keep it in sync with available clients
-  useEffect(() => {
-    if (authLoading || !session) return;
-
-    let resolvedClientId: string | null | undefined = selectedClientId;
-
-    if (selectedClientId === undefined && hasClients) {
-      setClient(clients[0].id);
-      resolvedClientId = clients[0].id;
-    } else if (!hasClients) {
-      setClient(undefined);
-      resolvedClientId = null;
-    } else if (typeof selectedClientId === "string" && !clients.find((c) => c.id === selectedClientId)) {
-      setClient(clients[0]?.id ?? undefined);
-      resolvedClientId = clients[0]?.id ?? null;
-    }
-
-    if (resolvedClientId !== undefined) {
-      fetchTasks(resolvedClientId, isAdmin);
-      fetchMembers(resolvedClientId);
-    }
-  }, [authLoading, session, hasClients, clients, selectedClientId, setClient, fetchTasks, fetchMembers, isAdmin]);
-
-  const { createTask, updateTask, deleteTask } = useSupabase({
-    memberId: member?.id,
-    clientId: effectiveClientId,
-    isAdmin,
-  });
-
-  const { holidays } = useHolidays();
-
-  const allClientIds = clients.map((c) => c.id);
-  const {
-    notifications,
-    unreadCount,
-    markAsRead: markNotificationAsRead,
-    markAllAsRead: markAllNotificationsAsRead,
-    reload: reloadNotifications,
-  } = useNotifications(member?.id, allClientIds);
-
-  const view = useUIStore((s) => s.view);
-  const setView = useUIStore((s) => s.setView);
-  const isModalOpen = useUIStore((s) => s.isTaskModalOpen);
-  const closeTaskModal = useUIStore((s) => s.closeTaskModal);
-
-  const { transitionTarget, selectClient, onTransitionComplete } = useClientTransition(
-    clients,
-    effectiveClientId
-  );
-
-  const { editingTask, pendingDeleteTaskId, openNewTask, openEditTask, requestDeleteTask, cancelDeleteTask, confirmDeleteTask, saveTask } =
-    useTaskActions({ createTask, updateTask, deleteTask, effectiveClientId });
-
-  const handleNotificationClick = useCallback((notification: Notification) => {
-    const route = resolveNotificationRoute(notification);
-    if (!route) return;
-
-    if (route.startsWith("/dashboard")) setView("calendar");
-    else if (route === "/profile") setView("profile");
-    else if (route === "/clients") setView("clients");
-  }, [setView]);
-
-  const handleViewChange = useCallback((newView: ViewType) => {
-    closeMobileSidebar();
-    const hasClientSelected = effectiveClientId !== null;
-    const canAccess = canAccessView(newView, accessRole, hasClientSelected);
-
-    if (!canAccess) {
-      if (newView !== "clients") toast.error("Selecione um cliente para acessar esta funcionalidade.");
-      setView("clients");
-    } else {
-      setView(newView);
-    }
-  }, [effectiveClientId, accessRole, setView, closeMobileSidebar]);
-
-  // Redirect to clients if current view becomes inaccessible (e.g. client deselected)
-  useEffect(() => {
-    if (!authLoading && session) {
-      const canAccess = canAccessView(view, accessRole, effectiveClientId !== null);
-      if (!canAccess) setView("clients");
-    }
-  }, [authLoading, session, effectiveClientId, accessRole, view, setView]);
-
-  const selectedClient = effectiveClientId
-    ? clients.find((c) => c.id === effectiveClientId) ?? null
-    : null;
-
-  // --- Early returns (auth gates) ---
-
-  if (authLoading) {
+  if (app.auth.loading) {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
@@ -154,114 +16,83 @@ export default function App() {
     );
   }
 
-  if (!session) {
-    return <LoginView onSignIn={signIn} error={authError} />;
+  if (!app.auth.session) {
+    return <LoginView onSignIn={app.auth.signIn} error={app.auth.authError} />;
   }
 
-  if (!hasClients) {
+  if (!app.hasClients) {
     return (
       <OnboardingView
-        userName={member?.name ?? user?.email}
-        onSignOut={signOut}
-        onClientsFound={refreshProfile}
+        userName={app.auth.member?.name ?? app.auth.user?.email}
+        onSignOut={app.auth.signOut}
+        onClientsFound={app.auth.refreshProfile}
       />
     );
   }
 
-  // --- Main layout ---
-
   return (
-    <div className="flex flex-col h-screen bg-background text-foreground font-sans">
+    <>
       <Toaster richColors position="bottom-right" />
 
-      <AppHeader
-        onToggleMobileSidebar={openMobileSidebar}
-        notifications={notifications}
-        unreadCount={unreadCount}
-        onMarkNotificationAsRead={markNotificationAsRead}
-        onMarkAllNotificationsAsRead={markAllNotificationsAsRead}
-        onNotificationClick={handleNotificationClick}
-        reloadNotifications={reloadNotifications}
-        selectedClientId={effectiveClientId ?? null}
-        darkMode={darkMode}
-        onToggleDark={toggleDark}
+      <AppLayout
+        // theme
+        darkMode={app.darkMode}
+        onToggleDark={app.toggleDark}
+        // header
+        notifications={app.notifications.notifications}
+        unreadCount={app.notifications.unreadCount}
+        selectedClientId={app.effectiveClientId ?? null}
+        onToggleMobileSidebar={app.sidebar.openMobileSidebar}
+        onMarkNotificationAsRead={app.notifications.markAsRead}
+        onMarkAllNotificationsAsRead={app.notifications.markAllAsRead}
+        onNotificationClick={app.handleNotificationClick}
+        onReloadNotifications={app.notifications.reload}
+        // sidebar
+        sidebarOpen={app.sidebar.sidebarOpen}
+        mobileSidebarOpen={app.sidebar.mobileSidebarOpen}
+        onToggleSidebar={app.sidebar.toggleSidebar}
+        onCloseMobileSidebar={app.sidebar.closeMobileSidebar}
+        view={app.view}
+        onViewChange={app.handleViewChange}
+        hasClients={app.hasClients}
+        role={app.accessRole}
+        userEmail={app.auth.user?.email}
+        userAvatarUrl={app.auth.member?.avatar_url}
+        onSignOut={app.auth.signOut}
+        selectedClient={app.selectedClient}
+        availableClients={app.auth.clients}
+        onSelectClient={app.selectClient}
+        isAdmin={app.auth.isAdmin}
+        // router
+        effectiveClientId={app.effectiveClientId}
+        userName={app.auth.member?.name ?? ""}
+        holidays={app.holidays}
+        onEditTask={app.taskActions.openEditTask}
+        onOpenNewTask={app.taskActions.openNewTask}
+        onDeleteTask={app.taskActions.requestDeleteTask}
+        onUpdateTask={app.updateTask}
       />
 
-      <div className="flex flex-row flex-1 overflow-hidden">
-        <AppSidebar
-          open={sidebarOpen}
-          onToggle={toggleSidebar}
-          mobileOpen={mobileSidebarOpen}
-          onCloseMobile={closeMobileSidebar}
-          view={view}
-          onViewChange={handleViewChange}
-          hasClient={hasClients}
-          role={accessRole}
-          darkMode={darkMode}
-          onToggleDark={toggleDark}
-          userEmail={user?.email}
-          userAvatarUrl={member?.avatar_url}
-          onSignOut={signOut}
-          selectedClient={selectedClient ?? null}
-          availableClients={clients}
-          onSelectClient={selectClient}
-          isAdmin={isAdmin}
-        />
-
-        <main
-          key={view}
-          className={cn(
-            "flex-1 overflow-auto animate-blur-fade-in",
-            view === "home" ? "p-0" : "px-4 sm:px-6 lg:px-8 py-8"
-          )}
-        >
-          <TooltipProvider>
-            <AppRouter
-              view={view}
-              hasClients={hasClients}
-              effectiveClientId={effectiveClientId}
-              selectedClient={selectedClient}
-              userName={member?.name ?? ""}
-              userEmail={user?.email}
-              holidays={holidays}
-              onViewChange={handleViewChange}
-              onEditTask={openEditTask}
-              onOpenNewTask={openNewTask}
-              onDeleteTask={requestDeleteTask}
-              onUpdateTask={updateTask}
-            />
-          </TooltipProvider>
-        </main>
-      </div>
-
-      {isModalOpen && (
-        <TaskModal
-          task={editingTask}
-          members={members}
-          onClose={closeTaskModal}
-          onDelete={(id) => requestDeleteTask(id, true)}
-          onSave={saveTask}
-          holidays={holidays}
-        />
-      )}
-
-      {transitionTarget && (
-        <ClientTransitionOverlay
-          clientName={transitionTarget.name}
-          onComplete={onTransitionComplete}
-        />
-      )}
-
-      {pendingDeleteTaskId && (
-        <ConfirmModal
-          title="Eliminar demanda"
-          message="Tem a certeza que deseja eliminar esta demanda?"
-          confirmLabel="Eliminar demanda"
-          cancelLabel="Cancelar"
-          onConfirm={confirmDeleteTask}
-          onCancel={cancelDeleteTask}
-        />
-      )}
-    </div>
-  );
+      <AppModals
+        taskModal={{
+          isOpen: app.isModalOpen,
+          editingTask: app.taskActions.editingTask,
+          onClose: app.closeTaskModal,
+          onSave: app.taskActions.saveTask,
+          onDelete: (id) => app.taskActions.requestDeleteTask(id, true),
+        }}
+        deleteModal={{
+          pendingId: app.taskActions.pendingDeleteTaskId,
+          onConfirm: app.taskActions.confirmDeleteTask,
+          onCancel: app.taskActions.cancelDeleteTask,
+        }}
+        transition={{
+          target: app.transitionTarget,
+          onComplete: app.onTransitionComplete,
+        }}
+        members={app.members}
+        holidays={app.holidays}
+      />
+    </>
+   );
 }
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
new file mode 100644
index 0000000..e533026
--- /dev/null
+++ b/src/components/AppLayout.tsx
@@ -0,0 +1,128 @@
+import { cn } from "@/lib/utils";
+import { AppHeader } from "@/components/AppHeader";
+import { AppSidebar } from "@/components/AppSidebar";
+import { AppRouter } from "@/components/AppRouter";
+import { TooltipProvider } from "@/components/ui";
+import type { ClientOption } from "@/contexts/AuthContext";
+import type { Holiday } from "@/utils/holidayUtils";
+import type { Task } from "@/types/task";
+import type { ViewType } from "@/store/useUIStore";
+import type { AccessRole } from "@/lib/accessControl";
+import type { Notification } from "@/types/notification";
+
+interface AppLayoutProps {
+  // header
+  darkMode: boolean;
+  onToggleDark: () => void;
+  notifications: Notification[];
+  unreadCount: number;
+  selectedClientId: string | null;
+  onToggleMobileSidebar: () => void;
+  onMarkNotificationAsRead: (id: string) => Promise<void>;
+  onMarkAllNotificationsAsRead: () => Promise<void>;
+  onNotificationClick: (notification: Notification) => void;
+  onReloadNotifications: () => Promise<void>;
+
+  // sidebar
+  sidebarOpen: boolean;
+  mobileSidebarOpen: boolean;
+  onToggleSidebar: () => void;
+  onCloseMobileSidebar: () => void;
+  view: ViewType;
+  onViewChange: (view: ViewType) => void;
+  hasClients: boolean;
+  role: AccessRole | null;
+  userEmail?: string;
+  userAvatarUrl?: string | null;
+  onSignOut: () => void;
+  selectedClient: ClientOption | null;
+  availableClients: ClientOption[];
+  onSelectClient: (clientId: string | null | undefined) => void;
+  isAdmin: boolean;
+
+  // main / router
+  effectiveClientId: string | null | undefined;
+  userName: string;
+  holidays: Holiday[];
+  onEditTask: (task: Task) => void;
+  onOpenNewTask: () => void;
+  onDeleteTask: (id: string) => void;
+  onUpdateTask: (task: Task) => Promise<boolean>;
+}
+
+export function AppLayout({
+  darkMode, onToggleDark,
+  notifications, unreadCount, selectedClientId,
+  onToggleMobileSidebar, onMarkNotificationAsRead, onMarkAllNotificationsAsRead,
+  onNotificationClick, onReloadNotifications,
+  sidebarOpen, mobileSidebarOpen, onToggleSidebar, onCloseMobileSidebar,
+  view, onViewChange, hasClients, role,
+  userEmail, userAvatarUrl, onSignOut,
+  selectedClient, availableClients, onSelectClient, isAdmin,
+  effectiveClientId, userName, holidays,
+  onEditTask, onOpenNewTask, onDeleteTask, onUpdateTask,
+}: AppLayoutProps) {
+  return (
+    <div className="flex flex-col h-screen bg-background text-foreground font-sans">
+      <AppHeader
+        darkMode={darkMode}
+        onToggleDark={onToggleDark}
+        notifications={notifications}
+        unreadCount={unreadCount}
+        selectedClientId={selectedClientId}
+        onToggleMobileSidebar={onToggleMobileSidebar}
+        onMarkNotificationAsRead={onMarkNotificationAsRead}
+        onMarkAllNotificationsAsRead={onMarkAllNotificationsAsRead}
+        onNotificationClick={onNotificationClick}
+        reloadNotifications={onReloadNotifications}
+      />
+
+      <div className="flex flex-row flex-1 overflow-hidden">
+        <AppSidebar
+          open={sidebarOpen}
+          onToggle={onToggleSidebar}
+          mobileOpen={mobileSidebarOpen}
+          onCloseMobile={onCloseMobileSidebar}
+          view={view}
+          onViewChange={onViewChange}
+          hasClient={hasClients}
+          role={role}
+          darkMode={darkMode}
+          onToggleDark={onToggleDark}
+          userEmail={userEmail}
+          userAvatarUrl={userAvatarUrl}
+          onSignOut={onSignOut}
+          selectedClient={selectedClient}
+          availableClients={availableClients}
+          onSelectClient={onSelectClient}
+          isAdmin={isAdmin}
+        />
+
+        <main
+          key={view}
+          className={cn(
+            "flex-1 overflow-auto animate-blur-fade-in",
+            view === "home" ? "p-0" : "px-4 sm:px-6 lg:px-8 py-8"
+          )}
+        >
+          <TooltipProvider>
+            <AppRouter
+              view={view}
+              hasClients={hasClients}
+              effectiveClientId={effectiveClientId}
+              selectedClient={selectedClient}
+              userName={userName}
+              userEmail={userEmail}
+              holidays={holidays}
+              onViewChange={onViewChange}
+              onEditTask={onEditTask}
+              onOpenNewTask={onOpenNewTask}
+              onDeleteTask={onDeleteTask}
+              onUpdateTask={onUpdateTask}
+            />
+          </TooltipProvider>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/AppModals.tsx b/src/components/AppModals.tsx
new file mode 100644
index 0000000..2b435d0
--- /dev/null
+++ b/src/components/AppModals.tsx
@@ -0,0 +1,68 @@
+import { ConfirmModal } from "@/components/ui";
+import TaskModal from "@/components/TaskModal";
+import { ClientTransitionOverlay } from "@/components/ClientTransitionOverlay";
+import type { Task } from "@/types/task";
+import type { Member } from "@/types/member";
+import type { Holiday } from "@/utils/holidayUtils";
+
+interface TaskModalState {
+  isOpen: boolean;
+  editingTask: Task | null;
+  onClose: () => void;
+  onSave: (taskData: Omit<Task, "id" | "createdAt">) => Promise<void>;
+  onDelete: (id: string) => void;
+}
+
+interface DeleteModalState {
+  pendingId: string | null;
+  onConfirm: () => Promise<void>;
+  onCancel: () => void;
+}
+
+interface TransitionState {
+  target: { id: string | null | undefined; name: string } | null;
+  onComplete: () => void;
+}
+
+interface AppModalsProps {
+  taskModal: TaskModalState;
+  deleteModal: DeleteModalState;
+  transition: TransitionState;
+  members: Member[];
+  holidays: Holiday[];
+}
+
+export function AppModals({ taskModal, deleteModal, transition, members, holidays }: AppModalsProps) {
+  return (
+    <>
+      {taskModal.isOpen && (
+        <TaskModal
+          task={taskModal.editingTask}
+          members={members}
+          holidays={holidays}
+          onClose={taskModal.onClose}
+          onSave={taskModal.onSave}
+          onDelete={(id) => taskModal.onDelete(id)}
+        />
+      )}
+
+      {transition.target && (
+        <ClientTransitionOverlay
+          clientName={transition.target.name}
+          onComplete={transition.onComplete}
+        />
+      )}
+
+      {deleteModal.pendingId && (
+        <ConfirmModal
+          title="Eliminar demanda"
+          message="Tem a certeza que deseja eliminar esta demanda?"
+          confirmLabel="Eliminar demanda"
+          cancelLabel="Cancelar"
+          onConfirm={deleteModal.onConfirm}
+          onCancel={deleteModal.onCancel}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/hooks/useAppOrchestrator.ts b/src/hooks/useAppOrchestrator.ts
new file mode 100644
index 0000000..219660a
--- /dev/null
+++ b/src/hooks/useAppOrchestrator.ts
@@ -0,0 +1,163 @@
+import { useEffect, useCallback } from "react";
+import { toast } from "sonner";
+import { useClientStore } from "@/store/useClientStore";
+import { useUIStore } from "@/store/useUIStore";
+import { useMemberStore } from "@/store/useMemberStore";
+import { useTaskStore } from "@/store/useTaskStore";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useSupabase } from "@/hooks/useSupabase";
+import { useHolidays } from "@/hooks/useHolidays";
+import { useNotifications } from "@/hooks/useNotifications";
+import { useAppTheme } from "@/hooks/useAppTheme";
+import { useAppSidebar } from "@/hooks/useAppSidebar";
+import { useTaskActions } from "@/hooks/useTaskActions";
+import { useClientTransition } from "@/hooks/useClientTransition";
+import { resolveNotificationRoute } from "@/lib/notifications";
+import { canAccessView, resolveAccessRole } from "@/lib/accessControl";
+import type { Notification } from "@/types/notification";
+import type { ViewType } from "@/store/useUIStore";
+
+export function useAppOrchestrator() {
+  const auth = useAuthContext();
+  const { darkMode, toggleDark } = useAppTheme();
+  const sidebar = useAppSidebar();
+
+  const accessRole = resolveAccessRole(auth.member);
+  const hasClients = auth.clients.length > 0;
+
+  const { selectedClientId, setClient } = useClientStore();
+  const { members, fetchMembers } = useMemberStore();
+  const { fetchTasks } = useTaskStore();
+
+  const effectiveClientId =
+    selectedClientId === undefined
+      ? hasClients ? auth.clients[0].id : null
+      : auth.isAdmin
+        ? selectedClientId
+        : selectedClientId ?? (hasClients ? auth.clients[0].id : null);
+
+  useEffect(() => {
+    if (auth.loading || !auth.session) return;
+
+    let resolvedClientId: string | null | undefined = selectedClientId;
+
+    if (selectedClientId === undefined && hasClients) {
+      setClient(auth.clients[0].id);
+      resolvedClientId = auth.clients[0].id;
+    } else if (!hasClients) {
+      setClient(undefined);
+      resolvedClientId = null;
+    } else if (
+      typeof selectedClientId === "string" &&
+      !auth.clients.find((c) => c.id === selectedClientId)
+    ) {
+      setClient(auth.clients[0]?.id ?? undefined);
+      resolvedClientId = auth.clients[0]?.id ?? null;
+    }
+
+    if (resolvedClientId !== undefined) {
+      fetchTasks(resolvedClientId, auth.isAdmin);
+      fetchMembers(resolvedClientId);
+    }
+  }, [auth.loading, auth.session, hasClients, auth.clients, selectedClientId, setClient, fetchTasks, fetchMembers, auth.isAdmin]);
+
+  const { createTask, updateTask, deleteTask } = useSupabase({
+    memberId: auth.member?.id,
+    clientId: effectiveClientId,
+    isAdmin: auth.isAdmin,
+  });
+
+  const { holidays } = useHolidays();
+
+  const allClientIds = auth.clients.map((c) => c.id);
+  const notifications = useNotifications(auth.member?.id, allClientIds);
+
+  const view = useUIStore((s) => s.view);
+  const setView = useUIStore((s) => s.setView);
+  const isModalOpen = useUIStore((s) => s.isTaskModalOpen);
+  const closeTaskModal = useUIStore((s) => s.closeTaskModal);
+
+  const { transitionTarget, selectClient, onTransitionComplete } = useClientTransition(
+    auth.clients,
+    effectiveClientId
+  );
+
+  const taskActions = useTaskActions({ createTask, updateTask, deleteTask, effectiveClientId });
+
+  const handleNotificationClick = useCallback(
+    (notification: Notification) => {
+      const route = resolveNotificationRoute(notification);
+      if (!route) return;
+      if (route.startsWith("/dashboard")) setView("calendar");
+      else if (route === "/profile") setView("profile");
+      else if (route === "/clients") setView("clients");
+    },
+    [setView]
+  );
+
+  const handleViewChange = useCallback(
+    (newView: ViewType) => {
+      sidebar.closeMobileSidebar();
+      const canAccess = canAccessView(newView, accessRole, effectiveClientId !== null);
+      if (!canAccess) {
+        if (newView !== "clients") toast.error("Selecione um cliente para acessar esta funcionalidade.");
+        setView("clients");
+      } else {
+        setView(newView);
+      }
+    },
+    [effectiveClientId, accessRole, setView, sidebar.closeMobileSidebar]
+  );
+
+  useEffect(() => {
+    if (!auth.loading && auth.session) {
+      const canAccess = canAccessView(view, accessRole, effectiveClientId !== null);
+      if (!canAccess) setView("clients");
+    }
+  }, [auth.loading, auth.session, effectiveClientId, accessRole, view, setView]);
+
+  const selectedClient = effectiveClientId
+    ? auth.clients.find((c) => c.id === effectiveClientId) ?? null
+    : null;
+
+  return {
+    // auth
+    auth,
+    hasClients,
+    accessRole,
+
+    // theme
+    darkMode,
+    toggleDark,
+
+    // sidebar
+    sidebar,
+
+    // client
+    effectiveClientId,
+    selectedClient,
+    selectClient,
+    transitionTarget,
+    onTransitionComplete,
+
+    // data
+    members,
+    holidays,
+
+    // notifications
+    notifications,
+    handleNotificationClick,
+
+    // view
+    view,
+    handleViewChange,
+
+    // modal
+    isModalOpen,
+    closeTaskModal,
+
+    // task actions
+    taskActions,
+    updateTask,
+  };
+}

From f12d2db562d37b5c0da2dc9b3c7e9146e4299be7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Sim=C3=B5es?= <matheusaugustosimoes@hotmail.com>
Date: Mon, 20 Apr 2026 18:34:46 -0300
Subject: [PATCH 13/13] perf:

---
 src/hooks/useAppOrchestrator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useAppOrchestrator.ts b/src/hooks/useAppOrchestrator.ts
index 219660a..ed26256 100644
--- a/src/hooks/useAppOrchestrator.ts
+++ b/src/hooks/useAppOrchestrator.ts
@@ -106,7 +106,7 @@ export function useAppOrchestrator() {
         setView(newView);
       }
     },
-    [effectiveClientId, accessRole, setView, sidebar.closeMobileSidebar]
+    [effectiveClientId, accessRole, setView, sidebar]
   );
 
   useEffect(() => {