From 22bd184cccdbe830ad7ead3bd55d51d146908bbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=ADs=20Ferreira?= <thais.ferreira07@outlook.com>
Date: Tue, 11 Feb 2025 11:07:18 -0300
Subject: [PATCH] =?UTF-8?q?Vers=C3=A3o=2011h06-11/02?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             | 485 +++++++++++++++++++++++++++++++++-
 package.json                  |   4 +
 src/views/ReportsView.vue     |   7 -
 src/views/UserProfileView.vue |  98 ++++---
 src/views/UsersView.vue       | 331 +++++++++--------------
 5 files changed, 654 insertions(+), 271 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4aa9a17..aa24816 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,14 @@
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "axios": "^1.7.9",
+        "jspdf": "^2.5.2",
+        "jspdf-autotable": "^3.8.4",
         "pinia": "^2.1.3",
+        "video.js": "^7.21.6",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2",
         "vue-the-mask": "^0.11.1",
+        "vue-video-player": "^6.0.0",
         "vuetify": "^3.7.11",
         "vuex": "^4.1.0"
       },
@@ -639,6 +643,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz",
+      "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
@@ -2340,6 +2356,13 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
@@ -2375,6 +2398,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/video.js": {
+      "version": "7.3.58",
+      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.58.tgz",
+      "integrity": "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -2410,6 +2440,66 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@videojs-player/vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/vue/-/vue-1.0.0.tgz",
+      "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/video.js": "7.x",
+        "video.js": "7.x",
+        "vue": "3.x"
+      }
+    },
+    "node_modules/@videojs/http-streaming": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.3.tgz",
+      "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "3.0.5",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "^0.22.1",
+        "mux.js": "6.0.1",
+        "video.js": "^6 || ^7"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^6 || ^7"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
@@ -2871,6 +2961,15 @@
         }
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2970,6 +3069,18 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
+      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -3191,6 +3302,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -3342,6 +3465,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -3549,6 +3682,18 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -3709,6 +3854,33 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -4153,6 +4325,18 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.40.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",
+      "integrity": "sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4211,6 +4395,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4533,6 +4727,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -4547,6 +4746,13 @@
         "node": ">=12"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+      "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -5433,6 +5639,12 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -5852,6 +6064,16 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "license": "MIT",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/global-dirs": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
@@ -6001,6 +6223,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -6173,6 +6409,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6271,6 +6512,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "license": "MIT"
+    },
     "node_modules/is-generator-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -7575,6 +7822,33 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.8.4.tgz",
+      "integrity": "sha512-rSffGoBsJYX83iTRv8Ft7FhqfgEL2nLpGAIiqruEQQ3e4r0qdLFbPUB7N9HAle0I3XgpisvyW751VHCqKUVOgQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2.5.1"
+      }
+    },
     "node_modules/jsprim": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
@@ -7591,6 +7865,12 @@
         "verror": "1.10.0"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
+      "license": "MIT"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -7863,6 +8143,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/m3u8-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
+      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -8072,6 +8363,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -8195,6 +8494,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.22.1.tgz",
+      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@@ -8287,6 +8601,23 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/mux.js": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
+      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -8767,7 +9098,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -8831,6 +9162,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -9052,7 +9395,6 @@
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
@@ -9204,6 +9546,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -9237,6 +9589,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/request-progress": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
@@ -9360,6 +9718,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -9438,6 +9806,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "license": "MIT",
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -9469,6 +9846,14 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -9908,6 +10293,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -10102,6 +10497,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -10130,6 +10535,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -10473,6 +10888,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -10490,6 +10911,16 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -10540,6 +10971,42 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "node_modules/video.js": {
+      "version": "7.21.6",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.6.tgz",
+      "integrity": "sha512-m41TbODrUCToVfK1aljVd296CwDQnCRewpIm5tTXMuV87YYSGw1H+VDOaV45HlpcWSsTWWLF++InDgGJfthfUw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.16.3",
+        "@videojs/vhs-utils": "^3.0.4",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "keycode": "^2.2.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "0.22.1",
+        "mux.js": "6.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.5"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz",
@@ -11066,6 +11533,20 @@
       "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ==",
       "license": "MIT"
     },
+    "node_modules/vue-video-player": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-6.0.0.tgz",
+      "integrity": "sha512-WP47OtefsjMEReRCIKIL3tRRgH/PyNm8ELjsbYgr/WWrYAj5Ih9Adzkzp+ylYOI/v57jJ4O7O4XkbXBCmsTqNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@videojs-player/vue": "1.x"
+      },
+      "peerDependencies": {
+        "@types/video.js": "7.x",
+        "video.js": "7.x",
+        "vue": "3.x"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.7.11",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.11.tgz",
diff --git a/package.json b/package.json
index 7b57930..042b075 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,14 @@
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "axios": "^1.7.9",
+    "jspdf": "^2.5.2",
+    "jspdf-autotable": "^3.8.4",
     "pinia": "^2.1.3",
+    "video.js": "^7.21.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
     "vue-the-mask": "^0.11.1",
+    "vue-video-player": "^6.0.0",
     "vuetify": "^3.7.11",
     "vuex": "^4.1.0"
   },
diff --git a/src/views/ReportsView.vue b/src/views/ReportsView.vue
index e2310ce..2980470 100644
--- a/src/views/ReportsView.vue
+++ b/src/views/ReportsView.vue
@@ -250,13 +250,6 @@ export default {
           sortable: true,
           width: '120'
         },
-        {
-          title: 'Ações',
-          key: 'actions',
-          align: 'center',
-          sortable: false,
-          width: '100'
-        },
       ],
 
       // Dados Mockados (substituir por API)
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index f9313df..989657b 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -1,11 +1,5 @@
-<!-- ProfilePage.vue -->
 <template>
   <div class="profile-container">
-    <div class="profile-header">
-      <h1 class="profile-title">Perfil do Usuário</h1>
-      <p class="profile-subtitle">Gerencie suas informações pessoais</p>
-    </div>
-    
     <form @submit.prevent="saveProfile" class="profile-form">
       <div class="profile-grid">
         <!-- Coluna da Foto -->
@@ -31,13 +25,14 @@
           </div>
         </div>
 
-        <!-- Coluna das Informações -->
+       <!-- Coluna das Informações -->
         <div class="info-section">
           <!-- Seção de Informações Básicas -->
           <div class="section-title">
             <i class="fas fa-user"></i>
-            <h2 class="sub-title">Informações Básicas</h2>
+            <h2 class="sub-title">Perfil do Usuário</h2>
           </div>
+          <p class="profile-description">Gerencie suas informações pessoais</p>
 
           <div class="form-row">
             <div class="form-group">
@@ -46,30 +41,6 @@
             </div>
           </div>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label>Nome</label>
-              <input 
-                type="text" 
-                v-model="profileData.firstName" 
-                required
-                class="form-input"
-                placeholder="Digite seu nome"
-              >
-            </div>
-
-            <div class="form-group">
-              <label>Sobrenome</label>
-              <input 
-                type="text" 
-                v-model="profileData.lastName" 
-                required
-                class="form-input"
-                placeholder="Digite seu sobrenome"
-              >
-            </div>
-          </div>
-
           <!-- Seção de Contato -->
           <div class="section-title">
             <i class="fas fa-address-card"></i>
@@ -173,6 +144,7 @@ export default {
   data() {
     return {
       defaultPhoto: '/path/to/default-avatar.png',
+      originalProfileData: null, 
       profileData: {
         id: '',
         photoUrl: '',
@@ -199,7 +171,8 @@ export default {
         { id: 1, name: 'Administrador' },
         { id: 2, name: 'Editor' },
         { id: 3, name: 'Visualizador' }
-      ]
+      ],
+      isFormModified: false
     }
   },
   methods: {
@@ -245,7 +218,7 @@ export default {
     resetForm() {
       this.loadProfile();
     },
-    showNotification(message,type) {
+    showNotification(message,_type) {
       // Implementar sistema de notificação de sua preferência
       alert(message);
     }
@@ -258,25 +231,27 @@ export default {
 
 <style scoped>
 .profile-container {
-  max-width: 1200px;
+  max-width: 1000px;
   margin: 0 auto;
-  padding: 40px 20px;
+  padding: 20px;
 }
 
 .profile-header {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 
 .profile-title {
-  font-size: 2.5rem;
+  font-size: 2rem;
   color: #2c3e50;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
+  font-weight: 700;
 }
 
 .profile-subtitle {
   color: #7f8c8d;
-  font-size: 1.1rem;
+  font-size: 1rem;
+  font-weight: 400;
 }
 
 .profile-form {
@@ -288,28 +263,43 @@ export default {
 
 .profile-grid {
   display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 30px;
+  grid-template-columns: 250px 1fr;
+  gap: 20px;
+}
+
+.profile-description {
+  color: #7f8c8d;
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.section-title h2 {
+  margin-bottom: 0;
 }
 
 .photo-section {
-  padding: 30px;
+  padding: 15px;
   background: #f8f9fa;
   border-right: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .info-section {
-  padding: 30px;
+  padding: 20px;
 }
 
 .photo-wrapper {
   position: relative;
   width: 200px;
   height: 200px;
-  margin: 0 auto 20px;
+  margin: 0 auto 15px;
   border-radius: 50%;
   overflow: hidden;
   cursor: pointer;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .profile-photo {
@@ -351,7 +341,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin: 30px 0 20px;
+  margin: 20px 0 15px;
   padding-bottom: 10px;
   border-bottom: 2px solid #e1e8ed;
 }
@@ -370,8 +360,8 @@ export default {
 .form-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
+  gap: 15px;
+  margin-bottom: 15px;
 }
 
 .form-group {
@@ -380,7 +370,7 @@ export default {
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 5px;
   font-weight: 500;
   color: #34495e;
 }
@@ -388,7 +378,7 @@ export default {
 .form-input,
 .form-select {
   width: 100%;
-  padding: 12px;
+  padding: 10px;
   border: 2px solid #e1e8ed;
   border-radius: 8px;
   font-size: 14px;
@@ -414,7 +404,7 @@ export default {
 
 .upload-btn {
   width: 100%;
-  padding: 12px;
+  padding: 10px;
   background: #3498db;
   color: white;
   border: none;
@@ -426,6 +416,7 @@ export default {
   justify-content: center;
   gap: 8px;
   transition: background 0.3s ease;
+  font-size: 0.9rem;
 }
 
 .upload-btn:hover {
@@ -436,14 +427,14 @@ export default {
   display: flex;
   gap: 15px;
   justify-content: flex-end;
-  padding: 30px;
+  padding: 20px;
   background: #f8f9fa;
   border-top: 1px solid #eee;
 }
 
 .save-btn,
 .cancel-btn {
-  padding: 12px 24px;
+  padding: 10px 20px;
   border: none;
   border-radius: 8px;
   font-weight: 500;
@@ -452,6 +443,7 @@ export default {
   align-items: center;
   gap: 8px;
   transition: all 0.3s ease;
+  font-size: 0.9rem;
 }
 
 .save-btn {
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index 0919085..4cbed5c 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -1,228 +1,141 @@
 <template>
   <v-container>
-    <v-card>
-      <v-card-title>
-        Usuários
-        <v-spacer></v-spacer>
-        <v-text-field
-          v-model="search"
-          append-icon="mdi-magnify"
-          label="Pesquisar"
-          single-line
-          hide-details
-          class="mr-4"
-        ></v-text-field>
-        <v-btn color="primary" @click="openUserDialog()">
-          + Novo usuário
-        </v-btn>
-      </v-card-title>
+    <!-- Tabs para alternar entre Usuários e Câmeras -->
+    <v-tabs v-model="tab" grow>
+      <v-tab value="usuarios">Usuários</v-tab>
+      <v-tab value="cameras">Câmeras</v-tab>
+    </v-tabs>
 
-      <v-card-text>
-        <v-data-table
-          :headers="headers"
-          :items="users"
-          :loading="loading"
-          :search="search"
-        >
-          <template v-slot:status="{ item }">
-            <v-chip
-              :color="getStatusColor(item.status)"
-              small
-            >
-              {{ item.status }}
-            </v-chip>
-          </template>
+    <v-window v-model="tab">
+      <!-- Aba Usuários -->
+      <v-window-item value="usuarios">
+        <v-container>
+          <v-text-field v-model="searchUser" label="Buscar usuário" prepend-inner-icon="mdi-magnify"></v-text-field>
+          <v-btn color="primary" class="mb-3" @click="exportUsersPDF">Exportar PDF</v-btn>
 
-          <template v-slot:actions="{ item }">
-            <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn
-                  icon
-                  small
-                  class="mr-2"
-                  v-bind="attrs"
-                  v-on="on"
-                  @click="editUser(item)"
-                >
-                  <v-icon>mdi-pencil</v-icon>
-                </v-btn>
-              </template>
-              <span>Editar</span>
-            </v-tooltip>
+          <v-data-table :headers="userHeaders" :items="filteredUsers" item-value="id">
+            <template v-slot:itemactions="{ item }">
+              <v-btn icon @click="editUser(item)">
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn icon @click="deleteUser(item)">
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </template>
+          </v-data-table>
+        </v-container>
+      </v-window-item>
 
-            <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn
-                  icon
-                  small
-                  color="error"
-                  v-bind="attrs"
-                  v-on="on"
-                  @click="confirmDelete(item)"
-                >
-                  <v-icon>mdi-delete</v-icon>
-                </v-btn>
-              </template>
-              <span>Deletar</span>
-            </v-tooltip>
-          </template>
-        </v-data-table>
-      </v-card-text>
-    </v-card>
+      <!-- Aba Câmeras -->
+      <v-window-item value="cameras">
+        <v-container>
+          <v-text-field v-model="searchCamera" label="Buscar câmera" prepend-inner-icon="mdi-magnify"></v-text-field>
+          <v-btn color="primary" class="mb-3" @click="exportCamerasPDF">Exportar PDF</v-btn>
+
+          <v-data-table :headers="cameraHeaders" :items="filteredCameras" item-value="model">
+            <template v-slot:itemview="{ item }">
+              <v-btn icon @click="openCameraView(item.view)">
+                <v-icon>mdi-video</v-icon>
+              </v-btn>
+            </template>
+            <template v-slot:itemactions="{ item }">
+              <v-btn icon @click="editCamera(item)">
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn icon @click="deleteCamera(item)">
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </template>
+          </v-data-table>
+        </v-container>
+      </v-window-item>
+    </v-window>
   </v-container>
 </template>
 
-<script>
-import { userService } from '@/services/api'
+<script setup>
+import { ref, computed } from "vue";
+import { jsPDF } from "jspdf";
+import "jspdf-autotable";
 
-export default {
-  name: 'UsersList',
-  data: () => ({
-    loading: false,
-    dialog: false,
-    deleteDialog: false,
-    valid: false,
-    search: '',
-    snackbar: {
-      show: false,
-      text: '',
-      color: ''
-    },
-    headers: [
-      { text: 'ID', value: 'id', sortable: true },
-      { text: 'Nome', value: 'name', sortable: true },
-      { text: 'Email', value: 'email', sortable: true },
-      { text: 'Grupo', value: 'group', sortable: true },
-      { text: 'Permissão', value: 'permission', sortable: true },
-      { text: 'Status', value: 'status', sortable: true },
-      { text: 'Ações', value: 'actions', sortable: false }
-    ],
-    users: [],
-    editedItem: {
-      name: '',
-      email: '',
-      group: '',
-      permission: '',
-      status: 'Ativo'
-    },
-    defaultItem: {
-      name: '',
-      email: '',
-      group: '',
-      permission: '',
-      status: 'Ativo'
-    },
-    deleteItem: null,
-    groups: ['Admin', 'Beta', 'Usuario'],
-    permissions: ['Admin', 'Editor', 'Visualizador'],
-    nameRules: [
-      v => !!v || 'Nome é obrigatório',
-      v => v.length >= 3 || 'Nome deve ter no mínimo 3 caracteres'
-    ],
-    emailRules: [
-      v => !!v || 'Email é obrigatório',
-      v => /.+@.+\..+/.test(v) || 'Email deve ser válido'
-    ]
-  }),
+const tab = ref("usuarios");
 
-  computed: {
-    formTitle() {
-      return this.editedItem.id ? 'Editar Usuário' : 'Novo Usuário'
-    }
-  },
+// **Usuários**
+const userHeaders = [
+  { title: "ID", key: "id" },
+  { title: "Nome", key: "name" },
+  { title: "E-mail", key: "email" },
+  { title: "Cargo", key: "role" },
+  { title: "Grupo", key: "group" },
+  { title: "Ações", key: "actions", sortable: false }
+];
 
-  created() {
-    this.fetchUsers()
-  },
+const users = ref([
+  { id: 1, name: "Alice", email: "alice@email.com", role: "Administrador", group: "Alfa" },
+  { id: 2, name: "Bob", email: "bob@email.com", role: "Usuário", group: "Omega" },
+  { id: 3, name: "Lucca", email: "lucca@email.com", role: "Usuário", group: "Omega" },
+  { id: 4, name: "Claudia", email: "claudia@email.com", role: "Usuário", group: "Beta" }
+]);
 
-  methods: {
-    async fetchUsers() {
-      this.loading = true
-      try {
-        const response = await userService.getUsers()
-        this.users = response.data
-      } catch (error) {
-        this.showSnackbar('Erro ao carregar usuários', 'error')
-        console.error('Error fetching users:', error)
-      } finally {
-        this.loading = false
-      }
-    },
+const searchUser = ref("");
+const filteredUsers = computed(() =>
+  users.value.filter(user =>
+    Object.values(user).some(value =>
+      String(value).toLowerCase().includes(searchUser.value.toLowerCase())
+    )
+  )
+);
 
-    getStatusColor(status) {
-      return status === 'Ativo' ? 'success' : 'error'
-    },
+// **Exportação PDF Usuários**
+const exportUsersPDF = () => {
+  const doc = new jsPDF();
+  doc.text("Lista de Usuários", 14, 10);
+  doc.autoTable({
+    head: [["ID", "Nome", "E-mail", "Cargo", "Grupo"]],
+    body: users.value.map(u => [u.id, u.name, u.email, u.role, u.group])
+  });
+  doc.save("usuarios.pdf");
+};
 
-    openUserDialog(item = null) {
-      this.editedItem = item ? { ...item } : { ...this.defaultItem }
-      this.dialog = true
-    },
+// **Câmeras**
+const cameraHeaders = [
+  { title: "Modelo", key: "model" },
+  { title: "Descrição", key: "description" },
+  { title: "Visualização", key: "view" },
+  { title: "Status", key: "status" },
+  { title: "Ações", key: "actions", sortable: false }
+];
 
-    closeDialog() {
-      this.dialog = false
-      this.$nextTick(() => {
-        this.editedItem = { ...this.defaultItem }
-        this.$refs.form.reset()
-      })
-    },
+const cameras = ref([
+  { model: "AXIS Q6128", description: "Câmera HD", view: "https://stream-akamai.castr.com/5b9352dbda7b8c769937e459/live_2361c920455111ea85db6911fe397b9e/index.fmp4.m3u8", status: "Ativa" },
+  { model: "Hikvision DS-2CD", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=1&subtype=0", status: "Ativa" },
+  { model: "AK-31548", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=3&subtype=0", status: "Ativa" }
+]);
 
-    editUser(item) {
-      this.openUserDialog(item)
-    },
+const searchCamera = ref("");
+const filteredCameras = computed(() =>
+  cameras.value.filter(camera =>
+    Object.values(camera).some(value =>
+      String(value).toLowerCase().includes(searchCamera.value.toLowerCase())
+    )
+  )
+);
 
-    confirmDelete(item) {
-      this.deleteItem = item
-      this.deleteDialog = true
-    },
+// **Exportação PDF Câmeras**
+const exportCamerasPDF = () => {
+  const doc = new jsPDF();
+  doc.text("Lista de Câmeras", 14, 10);
+  doc.autoTable({
+    head: [["Modelo", "Descrição", "Visualização", "Status"]],
+    body: cameras.value.map(c => [c.model, c.description, c.view, c.status])
+  });
+  doc.save("cameras.pdf");
+};
 
-    async deleteUser() {
-      if (!this.deleteItem) return
-
-      this.loading = true
-      try {
-        await userService.deleteUser(this.deleteItem.id)
-        this.showSnackbar('Usuário excluído com sucesso', 'success')
-        await this.fetchUsers()
-      } catch (error) {
-        this.showSnackbar('Erro ao excluir usuário', 'error')
-        console.error('Error deleting user:', error)
-      } finally {
-        this.loading = false
-        this.deleteDialog = false
-        this.deleteItem = null
-      }
-    },
-
-    async saveUser() {
-      if (!this.$refs.form.validate()) return
-
-      this.loading = true
-      try {
-        if (this.editedItem.id) {
-          await userService.updateUser(this.editedItem.id, this.editedItem)
-          this.showSnackbar('Usuário atualizado com sucesso', 'success')
-        } else {
-          await userService.createUser(this.editedItem)
-          this.showSnackbar('Usuário criado com sucesso', 'success')
-        }
-        
-        await this.fetchUsers()
-        this.closeDialog()
-      } catch (error) {
-        this.showSnackbar('Erro ao salvar usuário', 'error')
-        console.error('Error saving user:', error)
-      } finally {
-        this.loading = false
-      }
-    },
-
-    showSnackbar(text, color = 'success') {
-      this.snackbar = {
-        show: true,
-        text,
-        color
-      }
-    }
-  }
-}
+// **Ações**
+const openCameraView = (url) => window.open(url, "_blank");
+const editUser = (item) => alert(`Editar usuário ${item.name}`);
+const deleteUser = (item) => alert(`Deletar usuário ${item.name}`);
+const editCamera = (item) => alert(`Editar câmera ${item.model}`);
+const deleteCamera = (item) => alert(`Deletar câmera ${item.model}`);
 </script>