Merge pull request 'first-deploy' (#72) from first-deploy into master

Reviewed-on: #72

.agent/rules/convex-svelte-best-practices.md

@@ -0,0 +1,127 @@
+---
+trigger: glob
+globs: **/*.svelte.ts,**/*.svelte
+---
+
+# Convex + Svelte Best Practices
+
+This document outlines the mandatory rules and best practices for integrating Convex with Svelte in this project.
+
+## 1. Imports
+
+Always use the following import paths. Do NOT use `$lib/convex` or relative paths for generated files unless specifically required by a local override.
+
+### Correct Imports:
+
+```typescript
+import { useQuery, useConvexClient } from 'convex-svelte';
+import { api } from '@sgse-app/backend/convex/_generated/api';
+import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+```
+
+### Incorrect Imports (Avoid):
+
+```typescript
+import { convex } from '$lib/convex'; // Avoid direct client usage for queries
+import { api } from '$lib/convex/_generated/api'; // Incorrect path
+import { api } from '../convex/_generated/api'; // Relative path
+```
+
+## 2. Data Fetching
+
+### Use `useQuery` for Reactivity
+
+Instead of manually fetching data inside `onMount`, use the `useQuery` hook. This ensures your data is reactive and automatically updates when the backend data changes.
+
+**Preferred Pattern:**
+
+```svelte
+<script lang="ts">
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+
+	const tasksQuery = useQuery(api.tasks.list, { status: 'pending' });
+	const tasks = $derived(tasksQuery.data || []);
+	const isLoading = $derived(tasksQuery.isLoading);
+</script>
+```
+
+**Avoid Pattern:**
+
+```svelte
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { convex } from '$lib/convex';
+
+	let tasks = [];
+
+	onMount(async () => {
+		// This is not reactive!
+		tasks = await convex.query(api.tasks.list, { status: 'pending' });
+	});
+</script>
+```
+
+### Mutations
+
+Use `useConvexClient` to access the client for mutations.
+
+```svelte
+<script lang="ts">
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+
+	const client = useConvexClient();
+
+	async function completeTask(id) {
+		await client.mutation(api.tasks.complete, { id });
+	}
+</script>
+```
+
+## 3. Type Safety
+
+### No `any`
+
+Strictly avoid using `any`. The Convex generated data model provides precise types for all your tables.
+
+### Use Generated Types
+
+Use `Doc<"tableName">` for full document objects and `Id<"tableName">` for IDs.
+
+**Correct:**
+
+```typescript
+import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
+
+let selectedTask: Doc<'tasks'> | null = $state(null);
+let taskId: Id<'tasks'>;
+```
+
+**Incorrect:**
+
+```typescript
+let selectedTask: any = $state(null);
+let taskId: string;
+```
+
+### Union Types for Enums
+
+When dealing with status fields or other enums, define the specific union type instead of casting to `any`.
+
+**Correct:**
+
+```typescript
+async function updateStatus(newStatus: 'pending' | 'completed' | 'archived') {
+	// ...
+}
+```
+
+**Incorrect:**
+
+```typescript
+async function updateStatus(newStatus: string) {
+	// ...
+	status: newStatus as any; // Avoid this
+}
+```

.agent/rules/convex-svelte-guidelines.md

@@ -0,0 +1,275 @@
+---
+trigger: glob
+globs: **/*.svelte, **/*.ts, **/*.svelte.ts
+---
+
+# Convex + Svelte Guidelines
+
+## Overview
+
+These guidelines describe how to write **Convex** backend code **and** consume it from a **Svelte** (SvelteKit) frontend. The syntax for Convex functions stays exactly the same, but the way you import and call them from the client differs from a React/Next.js project. Below you will find the adapted sections from the original Convex style guide with Svelte‑specific notes.
+
+---
+
+## 1. Function Syntax (Backend)
+
+> **No change** – keep the new Convex function syntax.
+
+```typescript
+import {
+	query,
+	mutation,
+	action,
+	internalQuery,
+	internalMutation,
+	internalAction
+} from './_generated/server';
+import { v } from 'convex/values';
+
+export const getUser = query({
+	args: { userId: v.id('users') },
+	returns: v.object({ name: v.string(), email: v.string() }),
+	handler: async (ctx, args) => {
+		const user = await ctx.db.get(args.userId);
+		if (!user) throw new Error('User not found');
+		return { name: user.name, email: user.email };
+	}
+});
+```
+
+---
+
+## 2. HTTP Endpoints (Backend)
+
+> **No change** – keep the same `convex/http.ts` file.
+
+```typescript
+import { httpRouter } from 'convex/server';
+import { httpAction } from './_generated/server';
+
+const http = httpRouter();
+
+http.route({
+	path: '/api/echo',
+	method: 'POST',
+	handler: httpAction(async (ctx, req) => {
+		const body = await req.bytes();
+		return new Response(body, { status: 200 });
+	})
+});
+```
+
+---
+
+## 3. Validators (Backend)
+
+> **No change** – keep the same validators (`v.string()`, `v.id()`, etc.).
+
+---
+
+## 4. Function Registration (Backend)
+
+> **No change** – use `query`, `mutation`, `action` for public functions and `internal*` for private ones.
+
+---
+
+## 5. Function Calling from **Svelte**
+
+### 5.1 Install the Convex client
+
+```bash
+npm i convex @convex-dev/convex-svelte
+```
+
+> The `@convex-dev/convex-svelte` package provides a thin wrapper that works with Svelte stores.
+
+### 5.2 Initialise the client (e.g. in `src/lib/convex.ts`)
+
+```typescript
+import { createConvexClient } from '@convex-dev/convex-svelte';
+
+export const convex = createConvexClient({
+	url: import.meta.env.VITE_CONVEX_URL // set in .env
+});
+```
+
+### 5.3 Using queries in a component
+
+```svelte
+<script lang="ts">
+	import { convex } from '$lib/convex';
+	import { onMount } from 'svelte';
+	import { api } from '../convex/_generated/api';
+
+	let user: { name: string; email: string } | null = null;
+	let loading = true;
+	let error: string | null = null;
+
+	onMount(async () => {
+		try {
+			user = await convex.query(api.users.getUser, { userId: 'some-id' });
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			loading = false;
+		}
+	});
+</script>
+
+{#if loading}
+	<p>Loading…</p>
+{:else if error}
+	<p class="error">{error}</p>
+{:else if user}
+	<h2>{user.name}</h2>
+	<p>{user.email}</p>
+{/if}
+```
+
+### 5.4 Using mutations in a component
+
+```svelte
+<script lang="ts">
+	import { convex } from '$lib/convex';
+	import { api } from '../convex/_generated/api';
+	let name = '';
+	let creating = false;
+	let error: string | null = null;
+
+	async function createUser() {
+		creating = true;
+		error = null;
+		try {
+			const userId = await convex.mutation(api.users.createUser, { name });
+			console.log('Created user', userId);
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			creating = false;
+		}
+	}
+</script>
+
+<input bind:value={name} placeholder="Name" />
+<button on:click={createUser} disabled={creating}>Create</button>
+{#if error}<p class="error">{error}</p>{/if}
+```
+
+### 5.5 Using **actions** (Node‑only) from Svelte
+
+Actions run in a Node environment, so they cannot be called directly from the browser. Use a **mutation** that internally calls the action, or expose a HTTP endpoint that triggers the action.
+
+---
+
+## 6. Scheduler / Cron (Backend)
+
+> Same as original guide – define `crons.ts` and export the default `crons` object.
+
+---
+
+## 7. File Storage (Backend)
+
+> Same as original guide – use `ctx.storage.getUrl()` and query `_storage` for metadata.
+
+---
+
+## 8. TypeScript Helpers (Backend)
+
+> Keep using `Id<'table'>` from `./_generated/dataModel`.
+
+---
+
+## 9. Svelte‑Specific Tips
+
+| Topic                     | Recommendation                                                                                                                     |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| **Store‑based data**      | If you need reactive data across many components, wrap `convex.query` in a Svelte store (`readable`, `writable`).                  |
+| **Error handling**        | Use `try / catch` around every client call; surface the error in the UI.                                                           |
+| **SSR / SvelteKit**       | Calls made in `load` functions run on the server; you can use `convex.query` there without worrying about the browser environment. |
+| **Environment variables** | Prefix with `VITE_` for client‑side access (`import.meta.env.VITE_CONVEX_URL`).                                                    |
+| **Testing**               | Use the Convex mock client (`createMockConvexClient`) provided by `@convex-dev/convex-svelte` for unit tests.                      |
+
+---
+
+## 10. Full Example (SvelteKit + Convex)
+
+### 10.1 Backend (`convex/users.ts`)
+
+```typescript
+import { mutation, query } from './_generated/server';
+import { v } from 'convex/values';
+
+export const createUser = mutation({
+	args: { name: v.string() },
+	returns: v.id('users'),
+	handler: async (ctx, args) => {
+		return await ctx.db.insert('users', { name: args.name });
+	}
+});
+
+export const getUser = query({
+	args: { userId: v.id('users') },
+	returns: v.object({ name: v.string() }),
+	handler: async (ctx, args) => {
+		const user = await ctx.db.get(args.userId);
+		if (!user) throw new Error('Not found');
+		return { name: user.name };
+	}
+});
+```
+
+### 10.2 Frontend (`src/routes/+page.svelte`)
+
+```svelte
+<script lang="ts">
+	import { convex } from '$lib/convex';
+	import { api } from '$lib/convex/_generated/api';
+	import { onMount } from 'svelte';
+
+	let name = '';
+	let createdId: string | null = null;
+	let loading = false;
+	let error: string | null = null;
+
+	async function create() {
+		loading = true;
+		error = null;
+		try {
+			createdId = await convex.mutation(api.users.createUser, { name });
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<input bind:value={name} placeholder="Your name" />
+<button on:click={create} disabled={loading}>Create user</button>
+{#if createdId}<p>Created user id: {createdId}</p>{/if}
+{#if error}<p class="error">{error}</p>{/if}
+```
+
+---
+
+## 11. Checklist for New Files
+
+- ✅ All Convex functions use the **new syntax** (`query({ … })`).
+- ✅ Every public function has **argument** and **return** validators.
+- ✅ Svelte components import the generated `api` object from `convex/_generated/api`.
+- ✅ All client calls use the `convex` instance from `$lib/convex`.
+- ✅ Environment variable `VITE_CONVEX_URL` is defined in `.env`.
+- ✅ Errors are caught and displayed in the UI.
+- ✅ Types are imported from `convex/_generated/dataModel` when needed.
+
+---
+
+## 12. References
+
+- Convex Docs – [Functions](https://docs.convex.dev/functions)
+- Convex Svelte SDK – [`@convex-dev/convex-svelte`](https://github.com/convex-dev/convex-svelte)
+- SvelteKit Docs – [Loading Data](https://kit.svelte.dev/docs/loading)
+
+---
+
+_Keep these guidelines alongside the existing `svelte-rules.md` so that contributors have a single source of truth for both frontend and backend conventions._

.agent/rules/convex-typing.md

@@ -0,0 +1,69 @@
+---
+trigger: glob
+description: Regras de tipagem para queries e mutations do Convex
+globs: **/*.svelte.ts,**/*.svelte
+---
+
+# Regras de Tipagem do Convex
+
+## Regra Principal
+
+**NUNCA** crie anotações de tipo manuais para queries ou mutations do Convex. Os tipos já são inferidos automaticamente pelo Convex.
+
+### ❌ Errado - Não faça isso:
+
+```typescript
+// NÃO crie tipos manuais para o retorno de queries
+type Funcionario = {
+	_id: Id<'funcionarios'>;
+	nome: string;
+	email: string;
+	// ... outras propriedades
+};
+
+const funcionarios: Funcionario[] = useQuery(api.funcionarios.getAll) ?? [];
+```
+
+### ✅ Correto - Use inferência automática:
+
+```typescript
+// O tipo já vem inferido automaticamente
+const funcionarios = useQuery(api.funcionarios.getAll);
+```
+
+---
+
+## Quando Tipar É Necessário
+
+Em situações onde você **realmente precisa** de um tipo explícito (ex: props de componentes, variáveis de estado, etc.), use `FunctionReturnType` para inferir o tipo:
+
+```typescript
+import { FunctionReturnType } from 'convex/server';
+import { api } from '$convex/_generated/api';
+
+// Infere o tipo de retorno da query
+type FuncionariosQueryResult = FunctionReturnType<typeof api.funcionarios.getAll>;
+
+// Agora pode usar em props de componentes
+interface Props {
+	funcionarios: FuncionariosQueryResult;
+}
+```
+
+### Casos de Uso Válidos para `FunctionReturnType`:
+
+1. **Props de componentes** - quando um componente filho recebe dados de uma query
+2. **Variáveis derivadas** - quando precisa tipar uma transformação dos dados
+3. **Funções auxiliares** - quando cria funções que operam sobre os dados da query
+4. **Stores/Estado global** - quando armazena dados em estado externo ao componente
+
+---
+
+## Resumo
+
+| Situação                    | Abordagem                                         |
+| --------------------------- | ------------------------------------------------- |
+| Usar `useQuery` diretamente | Deixe o tipo ser inferido automaticamente         |
+| Props de componentes        | Use `FunctionReturnType<typeof api.module.query>` |
+| Transformações de dados     | Use `FunctionReturnType<typeof api.module.query>` |
+| Anotações manuais de tipo   | **NUNCA** - sempre infira do Convex               |

.agent/rules/svelte.md

@@ -0,0 +1,27 @@
+---
+trigger: always_on
+---
+
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns problems and suggestions.
+You MUST use this tool whenever you write Svelte code before submitting it to the user. Keep calling it until no problems or suggestions are returned. Remember that this does not eliminate all lint errors, so still keep checking for lint errors before proceeding.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.

.cursor/commands/svelte-task.md

@@ -0,0 +1,189 @@
+You are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool `get_documentation` with one of the following paths:
+<available-docs>
+
+- title: Overview, use_cases: project setup, creating new svelte apps, scaffolding, cli tools, initializing projects, path: cli/overview
+- title: Frequently asked questions, use_cases: project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration, path: cli/faq
+- title: sv create, use_cases: project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template, path: cli/sv-create
+- title: sv add, use_cases: project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters, path: cli/sv-add
+- title: sv check, use_cases: code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds, path: cli/sv-check
+- title: sv migrate, use_cases: migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis, path: cli/sv-migrate
+- title: devtools-json, use_cases: development setup, chrome devtools integration, browser-based editing, local development workflow, debugging setup, path: cli/devtools-json
+- title: drizzle, use_cases: database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries, path: cli/drizzle
+- title: eslint, use_cases: code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects, path: cli/eslint
+- title: lucia, use_cases: authentication, login systems, user management, registration pages, session handling, auth setup, path: cli/lucia
+- title: mcp, use_cases: use title and path to estimate use case, path: cli/mcp
+- title: mdsvex, use_cases: blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages, path: cli/mdsvex
+- title: paraglide, use_cases: internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content, path: cli/paraglide
+- title: playwright, use_cases: browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows, path: cli/playwright
+- title: prettier, use_cases: code formatting, project setup, code style consistency, team collaboration, linting configuration, path: cli/prettier
+- title: storybook, use_cases: component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase, path: cli/storybook
+- title: sveltekit-adapter, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify, path: cli/sveltekit-adapter
+- title: tailwindcss, use_cases: project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte, path: cli/tailwind
+- title: vitest, use_cases: testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development, path: cli/vitest
+- title: Introduction, use_cases: learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps, path: kit/introduction
+- title: Creating a project, use_cases: project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects, path: kit/creating-a-project
+- title: Project types, use_cases: deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers, path: kit/project-types
+- title: Project structure, use_cases: project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics, path: kit/project-structure
+- title: Web standards, use_cases: always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms, path: kit/web-standards
+- title: Routing, use_cases: routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always, path: kit/routing
+- title: Loading data, use_cases: data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering, path: kit/load
+- title: Form actions, use_cases: forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors, path: kit/form-actions
+- title: Page options, use_cases: prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization, path: kit/page-options
+- title: State management, use_cases: sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle, path: kit/state-management
+- title: Remote functions, use_cases: data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates, path: kit/remote-functions
+- title: Building your app, use_cases: production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment, path: kit/building-your-app
+- title: Adapters, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, path: kit/adapters
+- title: Zero-config deployments, use_cases: deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration, path: kit/adapter-auto
+- title: Node servers, use_cases: deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services, path: kit/adapter-node
+- title: Static site generation, use_cases: static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites, path: kit/adapter-static
+- title: Single-page apps, use_cases: spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages, path: kit/single-page-apps
+- title: Cloudflare, use_cases: deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing, path: kit/adapter-cloudflare
+- title: Cloudflare Workers, use_cases: deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings, path: kit/adapter-cloudflare-workers
+- title: Netlify, use_cases: deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting, path: kit/adapter-netlify
+- title: Vercel, use_cases: deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables, path: kit/adapter-vercel
+- title: Writing adapters, use_cases: custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments, path: kit/writing-adapters
+- title: Advanced routing, use_cases: advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation, path: kit/advanced-routing
+- title: Hooks, use_cases: authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management, path: kit/hooks
+- title: Errors, use_cases: error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors, path: kit/errors
+- title: Link options, use_cases: routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior, path: kit/link-options
+- title: Service workers, use_cases: offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps, path: kit/service-workers
+- title: Server-only modules, use_cases: api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation, path: kit/server-only-modules
+- title: Snapshots, use_cases: forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys, path: kit/snapshots
+- title: Shallow routing, use_cases: modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus, path: kit/shallow-routing
+- title: Observability, use_cases: performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations, path: kit/observability
+- title: Packaging, use_cases: building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution, path: kit/packaging
+- title: Auth, use_cases: authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks, path: kit/auth
+- title: Performance, use_cases: performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times, path: kit/performance
+- title: Icons, use_cases: icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management, path: kit/icons
+- title: Images, use_cases: image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management, path: kit/images
+- title: Accessibility, use_cases: always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites, path: kit/accessibility
+- title: SEO, use_cases: seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization, path: kit/seo
+- title: Frequently asked questions, use_cases: troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration, path: kit/faq
+- title: Integrations, use_cases: project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting, path: kit/integrations
+- title: Breakpoint Debugging, use_cases: debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution, path: kit/debugging
+- title: Migrating to SvelteKit v2, use_cases: migration, upgrading from sveltekit 1 to 2, breaking changes, version updates, path: kit/migrating-to-sveltekit-2
+- title: Migrating from Sapper, use_cases: migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization, path: kit/migrating
+- title: Additional resources, use_cases: troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support, path: kit/additional-resources
+- title: Glossary, use_cases: rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development, path: kit/glossary
+- title: @sveltejs/kit, use_cases: forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities, path: kit/@sveltejs-kit
+- title: @sveltejs/kit/hooks, use_cases: middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation, path: kit/@sveltejs-kit-hooks
+- title: @sveltejs/kit/node/polyfills, use_cases: node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements, path: kit/@sveltejs-kit-node-polyfills
+- title: @sveltejs/kit/node, use_cases: node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node, path: kit/@sveltejs-kit-node
+- title: @sveltejs/kit/vite, use_cases: project setup, vite configuration, initial sveltekit setup, build tooling, path: kit/@sveltejs-kit-vite
+- title: $app/environment, use_cases: always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection, path: kit/$app-environment
+- title: $app/forms, use_cases: forms, user input, data submission, progressive enhancement, custom form handling, form validation, path: kit/$app-forms
+- title: $app/navigation, use_cases: routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions, path: kit/$app-navigation
+- title: $app/paths, use_cases: static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation, path: kit/$app-paths
+- title: $app/server, use_cases: remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries, path: kit/$app-server
+- title: $app/state, use_cases: routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing, path: kit/$app-state
+- title: $app/stores, use_cases: legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates, path: kit/$app-stores
+- title: $app/types, use_cases: routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps, path: kit/$app-types
+- title: $env/dynamic/private, use_cases: api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling, path: kit/$env-dynamic-private
+- title: $env/dynamic/public, use_cases: environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps, path: kit/$env-dynamic-public
+- title: $env/static/private, use_cases: server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens, path: kit/$env-static-private
+- title: $env/static/public, use_cases: environment variables, public config, client-side data, api endpoints, build-time configuration, public constants, path: kit/$env-static-public
+- title: $lib, use_cases: project setup, component organization, importing shared components, reusable ui elements, code structure, path: kit/$lib
+- title: $service-worker, use_cases: offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps, path: kit/$service-worker
+- title: Configuration, use_cases: project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup, path: kit/configuration
+- title: Command Line Interface, use_cases: project setup, typescript configuration, generated types, ./$types imports, initial project configuration, path: kit/cli
+- title: Types, use_cases: typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup, path: kit/types
+- title: Overview, use_cases: use title and path to estimate use case, path: mcp/overview
+- title: Local setup, use_cases: use title and path to estimate use case, path: mcp/local-setup
+- title: Remote setup, use_cases: use title and path to estimate use case, path: mcp/remote-setup
+- title: Tools, use_cases: use title and path to estimate use case, path: mcp/tools
+- title: Resources, use_cases: use title and path to estimate use case, path: mcp/resources
+- title: Prompts, use_cases: use title and path to estimate use case, path: mcp/prompts
+- title: Overview, use_cases: always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics, path: svelte/overview
+- title: Getting started, use_cases: project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration, path: svelte/getting-started
+- title: .svelte files, use_cases: always, any svelte project, component creation, project setup, learning svelte basics, path: svelte/svelte-files
+- title: .svelte.js and .svelte.ts files, use_cases: shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities, path: svelte/svelte-js-files
+- title: What are runes?, use_cases: always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4, path: svelte/what-are-runes
+- title: $state, use_cases: always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components, path: svelte/$state
+- title: $derived, use_cases: always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values, path: svelte/$derived
+- title: $effect, use_cases: canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking, path: svelte/$effect
+- title: $props, use_cases: always, any svelte project, passing data to components, component communication, reusable components, component props, path: svelte/$props
+- title: $bindable, use_cases: forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields, path: svelte/$bindable
+- title: $inspect, use_cases: debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues, path: svelte/$inspect
+- title: $host, use_cases: custom elements, web components, dispatching custom events, component library, framework-agnostic components, path: svelte/$host
+- title: Basic markup, use_cases: always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering, path: svelte/basic-markup
+- title: {#if ...}, use_cases: always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation, path: svelte/if
+- title: {#each ...}, use_cases: always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds, path: svelte/each
+- title: {#key ...}, use_cases: animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state, path: svelte/key
+- title: {#await ...}, use_cases: async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports, path: svelte/await
+- title: {#snippet ...}, use_cases: reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication, path: svelte/snippet
+- title: {@render ...}, use_cases: reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse, path: svelte/@render
+- title: {@html ...}, use_cases: rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content, path: svelte/@html
+- title: {@attach ...}, use_cases: tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components, path: svelte/@attach
+- title: {@const ...}, use_cases: computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering, path: svelte/@const
+- title: {@debug ...}, use_cases: debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection, path: svelte/@debug
+- title: bind:, use_cases: forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking, path: svelte/bind
+- title: use:, use_cases: custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks, path: svelte/use
+- title: transition:, use_cases: animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes, path: svelte/transition
+- title: in: and out:, use_cases: animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications, path: svelte/in-and-out
+- title: animate:, use_cases: sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering, path: svelte/animate
+- title: style:, use_cases: dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling, path: svelte/style
+- title: class, use_cases: always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design, path: svelte/class
+- title: await, use_cases: async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading, path: svelte/await-expressions
+- title: Scoped styles, use_cases: always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes, path: svelte/scoped-styles
+- title: Global styles, use_cases: global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles, path: svelte/global-styles
+- title: Custom properties, use_cases: theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization, path: svelte/custom-properties
+- title: Nested <style> elements, use_cases: component styling, scoped styles, dynamic styles, conditional styling, nested style tags, custom styling logic, path: svelte/nested-style-elements
+- title: <svelte:boundary>, use_cases: error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui, path: svelte/svelte-boundary
+- title: <svelte:window>, use_cases: keyboard shortcuts, scroll tracking, window resize handling, responsive layouts, online/offline detection, viewport dimensions, global event listeners, path: svelte/svelte-window
+- title: <svelte:document>, use_cases: document events, visibility tracking, fullscreen detection, pointer lock, focus management, document-level interactions, path: svelte/svelte-document
+- title: <svelte:body>, use_cases: mouse tracking, hover effects, cursor interactions, global body events, drag and drop, custom cursors, interactive backgrounds, body-level actions, path: svelte/svelte-body
+- title: <svelte:head>, use_cases: seo optimization, page titles, meta tags, social media sharing, dynamic head content, multi-page apps, blog posts, product pages, path: svelte/svelte-head
+- title: <svelte:element>, use_cases: dynamic content, cms integration, user-generated content, configurable ui, runtime element selection, flexible components, path: svelte/svelte-element
+- title: <svelte:options>, use_cases: migration, custom elements, web components, legacy mode compatibility, runes mode setup, svg components, mathml components, css injection control, path: svelte/svelte-options
+- title: Stores, use_cases: shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic, path: svelte/stores
+- title: Context, use_cases: shared state, avoiding prop drilling, component communication, theme providers, user context, authentication state, configuration sharing, deeply nested components, path: svelte/context
+- title: Lifecycle hooks, use_cases: component initialization, cleanup tasks, timers, subscriptions, dom measurements, chat windows, autoscroll features, migration from svelte 4, path: svelte/lifecycle-hooks
+- title: Imperative component API, use_cases: project setup, client-side rendering, server-side rendering, ssr, hydration, testing, programmatic component creation, tooltips, dynamic mounting, path: svelte/imperative-component-api
+- title: Testing, use_cases: testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation, path: svelte/testing
+- title: TypeScript, use_cases: typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration, path: svelte/typescript
+- title: Custom elements, use_cases: web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom, path: svelte/custom-elements
+- title: Svelte 4 migration guide, use_cases: upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance, path: svelte/v4-migration-guide
+- title: Svelte 5 migration guide, use_cases: migrating from svelte 4 to 5, upgrading projects, learning svelte 5 syntax changes, runes migration, event handler updates, path: svelte/v5-migration-guide
+- title: Frequently asked questions, use_cases: getting started, learning svelte, beginner setup, project initialization, vs code setup, formatting, testing, routing, mobile apps, troubleshooting, community support, path: svelte/faq
+- title: svelte, use_cases: migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types, path: svelte/svelte
+- title: svelte/action, use_cases: typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration, path: svelte/svelte-action
+- title: svelte/animate, use_cases: animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions, path: svelte/svelte-animate
+- title: svelte/attachments, use_cases: library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements, path: svelte/svelte-attachments
+- title: svelte/compiler, use_cases: build tools, custom compilers, ast manipulation, preprocessors, code transformation, migration scripts, syntax analysis, bundler plugins, dev tools, path: svelte/svelte-compiler
+- title: svelte/easing, use_cases: animations, transitions, custom easing, smooth motion, interactive ui, modals, dropdowns, carousels, page transitions, scroll effects, path: svelte/svelte-easing
+- title: svelte/events, use_cases: window events, document events, global event listeners, event delegation, programmatic event handling, cleanup functions, media queries, path: svelte/svelte-events
+- title: svelte/legacy, use_cases: migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, imperative component instantiation, path: svelte/svelte-legacy
+- title: svelte/motion, use_cases: animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, reduced motion, path: svelte/svelte-motion
+- title: svelte/reactivity/window, use_cases: responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking, path: svelte/svelte-reactivity-window
+- title: svelte/reactivity, use_cases: reactive data structures, state management with maps/sets, game boards, selection tracking, url manipulation, query params, real-time clocks, media queries, responsive design, path: svelte/svelte-reactivity
+- title: svelte/server, use_cases: server-side rendering, ssr, static site generation, seo optimization, initial page load, pre-rendering, node.js server, custom server setup, path: svelte/svelte-server
+- title: svelte/store, use_cases: state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects, path: svelte/svelte-store
+- title: svelte/transition, use_cases: animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions, path: svelte/svelte-transition
+- title: Compiler errors, use_cases: animation, transitions, keyed each blocks, list animations, path: svelte/compiler-errors
+- title: Compiler warnings, use_cases: accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, interactive elements, path: svelte/compiler-warnings
+- title: Runtime errors, use_cases: debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity, path: svelte/runtime-errors
+- title: Runtime warnings, use_cases: debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting, path: svelte/runtime-warnings
+- title: Overview, use_cases: migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process, path: svelte/legacy-overview
+- title: Reactive let/var declarations, use_cases: migration, legacy svelte projects, upgrading from svelte 4, understanding old reactivity, maintaining existing code, learning runes differences, path: svelte/legacy-let
+- title: Reactive $: statements, use_cases: legacy mode, migration from svelte 4, reactive statements, computed values, derived state, side effects, path: svelte/legacy-reactive-assignments
+- title: export let, use_cases: legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props, path: svelte/legacy-export-let
+- title: $$props and $$restProps, use_cases: legacy mode migration, component wrappers, prop forwarding, button components, reusable ui components, spreading props to child elements, path: svelte/legacy-$$props-and-$$restProps
+- title: on:, use_cases: legacy mode, event handling, button clicks, forms, user interactions, component communication, event forwarding, event modifiers, path: svelte/legacy-on
+- title: <slot>, use_cases: legacy mode, migrating from svelte 4, component composition, reusable components, passing content to components, modals, layouts, wrappers, path: svelte/legacy-slots
+- title: $$slots, use_cases: legacy mode, conditional slot rendering, optional content sections, checking if slots provided, migrating from legacy to runes, path: svelte/legacy-$$slots
+- title: <svelte:fragment>, use_cases: named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization, path: svelte/legacy-svelte-fragment
+- title: <svelte:component>, use_cases: dynamic components, component switching, conditional rendering, legacy mode migration, tabbed interfaces, multi-step forms, path: svelte/legacy-svelte-component
+- title: <svelte:self>, use_cases: recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data, path: svelte/legacy-svelte-self
+- title: Imperative component API, use_cases: migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns, path: svelte/legacy-component-api
+
+</available-docs>
+
+Every time you write a Svelte component or a Svelte module you MUST invoke the `svelte-autofixer` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.
+
+This is the task you will work on:
+
+<task>
+[YOUR TASK HERE]
+</task>
+
+If you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the `playground-link` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called `App.svelte` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.

.cursor/mcp.json

@@ -0,0 +1,26 @@
+{
+	"mcpServers": {
+		"svelte": {
+			"url": "https://mcp.svelte.dev/mcp"
+		},
+		"context7": {
+			"url": "https://mcp.context7.com/mcp"
+		},
+		"convex": {
+			"command": "npx",
+			"args": [
+				"-y",
+				"convex@latest",
+				"mcp",
+				"start"
+			]
+		},
+		"ark-ui": {
+			"command": "npx",
+			"args": [
+				"-y",
+				"@ark-ui/mcp"
+			]
+		}
+	}
+}

.cursor/rules/svelte_rules.mdc

@@ -0,0 +1,27 @@
+---
+alwaysApply: true
+---
+
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.

.cursor/rules/typescript_rules.mdc

@@ -1,6 +1,7 @@
 ---
 description: Guidelines for TypeScript usage, including type safety rules and Convex query typing
-globs: **/*.ts,**/*.tsx,**/*.svelte
+globs: **/*.ts,**/*.svelte
+alwaysApply: false
 ---
 
 # TypeScript Guidelines
@@ -8,6 +9,7 @@ globs: **/*.ts,**/*.tsx,**/*.svelte
 ## Type Safety Rules
 
 ### Avoid `any` Type
+
 - **NEVER** use the `any` type in production code
 - The only exception is in test files (files matching `*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`)
 - Instead of `any`, use:
@@ -20,44 +22,48 @@ globs: **/*.ts,**/*.tsx,**/*.svelte
 ### Examples
 
 **❌ Bad:**
+
 ```typescript
 function processData(data: any) {
-  return data.value;
+	return data.value;
 }
 ```
 
 **✅ Good:**
+
 ```typescript
 function processData(data: { value: string }) {
-  return data.value;
+	return data.value;
 }
 
 // Or with generics
 function processData<T extends { value: unknown }>(data: T) {
-  return data.value;
+	return data.value;
 }
 
 // Or with unknown and type guards
 function processData(data: unknown) {
-  if (typeof data === 'object' && data !== null && 'value' in data) {
-    return (data as { value: string }).value;
-  }
-  throw new Error('Invalid data');
+	if (typeof data === 'object' && data !== null && 'value' in data) {
+		return (data as { value: string }).value;
+	}
+	throw new Error('Invalid data');
 }
 ```
 
 **✅ Exception (tests only):**
+
 ```typescript
 // test.ts or *.spec.ts
 it('should handle any input', () => {
-  const input: any = getMockData();
-  expect(process(input)).toBeDefined();
+	const input: any = getMockData();
+	expect(process(input)).toBeDefined();
 });
 ```
 
 ## Convex Query Typing
 
 ### Frontend Query Usage
+
 - **DO NOT** create manual type definitions for Convex query results in the frontend
 - Convex queries already return properly typed results based on their `returns` validator
 - The TypeScript types are automatically inferred from the query's return validator
@@ -66,17 +72,19 @@ it('should handle any input', () => {
 ### Examples
 
 **❌ Bad:**
+
 ```typescript
 // Don't manually type the result
 type UserListResult = Array<{
-  _id: Id<"users">;
-  name: string;
+	_id: Id<'users'>;
+	name: string;
 }>;
 
 const users: UserListResult = useQuery(api.users.list);
 ```
 
 **✅ Good:**
+
 ```typescript
 // Let TypeScript infer the type from the query
 const users = useQuery(api.users.list);
@@ -84,24 +92,26 @@ const users = useQuery(api.users.list);
 
 // You can still use it with type inference
 if (users !== undefined) {
-  users.forEach(user => {
-    // TypeScript knows user._id is Id<"users"> and user.name is string
-    console.log(user.name);
-  });
+	users.forEach((user) => {
+		// TypeScript knows user._id is Id<"users"> and user.name is string
+		console.log(user.name);
+	});
 }
 ```
 
 **✅ Good (with explicit type if needed for clarity):**
+
 ```typescript
 // Only if you need to export or explicitly annotate for documentation
-import type { FunctionReturnType } from "convex/server";
-import type { api } from "./convex/_generated/api";
+import type { FunctionReturnType } from 'convex/server';
+import type { api } from './convex/_generated/api';
 
 type UserListResult = FunctionReturnType<typeof api.users.list>;
 const users = useQuery(api.users.list);
 ```
 
 ### Best Practices
+
 - Trust Convex's type inference - it's based on your schema and validators
 - If you need type annotations, use `FunctionReturnType` from Convex's type utilities
 - Only create manual types if you're doing complex transformations that need intermediate types

.dockerignore

@@ -0,0 +1 @@
+node_modules

.editorconfig

@@ -4,9 +4,9 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = false
-insert_final_newline = false
+insert_final_newline = true

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+name: Build and Deploy Docker images
+
+on:
+  push:
+    branches: ['master']
+  pull_request:
+    branches: ['master']
+
+jobs:
+  build-and-push-dockerfile-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        # Only login if we are actually going to push
+        if: github.event_name == 'push'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./apps/web/Dockerfile
+          # Only push on 'push' event (merge to master), not on 'pull_request'
+          push: ${{ github.event_name == 'push' }}
+          tags: sgsedevs/sgse-app:latest
+          platforms: linux/amd64
+          build-args: |
+            PUBLIC_CONVEX_URL=${{ secrets.PUBLIC_CONVEX_URL }}
+            PUBLIC_CONVEX_SITE_URL=${{ secrets.PUBLIC_CONVEX_SITE_URL }}

.gitignore

@@ -47,4 +47,7 @@ coverage
 *.tgz
 .cache
 tmp
-temp
+temp
+.eslintcache
+
+out

.prettierignore

@@ -0,0 +1,6 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "useTabs": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": [
+    "prettier-plugin-svelte",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,38 @@
+{
+	// "editor.formatOnSave": true,
+	// "editor.defaultFormatter": "biomejs.biome",
+	// "editor.codeActionsOnSave": {
+	//   "source.fixAll.biome": "always"
+	// },
+	// "[typescript]": {
+	//   "editor.defaultFormatter": "biomejs.biome"
+	// },
+	// "[svelte]": {
+	//   "editor.defaultFormatter": "biomejs.biome"
+	// },
+	"eslint.useFlatConfig": true,
+	"eslint.workingDirectories": [
+		{
+			"pattern": "apps/*"
+		},
+		{
+			"pattern": "packages/*"
+		}
+	],
+	"eslint.validate": ["javascript", "typescript", "svelte"],
+	"eslint.options": {
+		"cache": true,
+		"cacheLocation": ".eslintcache"
+	},
+	"editor.formatOnSave": true,
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[jsonc]": {
+		"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[svelte]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"editor.tabSize": 2
+}

AGENTS.md

@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.

ANALISE_AUTENTICACAO.md

@@ -1,179 +0,0 @@
-# Análise: Migração para Better Auth
-
-## 📊 Situação Atual
-
-### Sistema Customizado (Atual)
-- ✅ **Funciona**: Sistema próprio com tokens na tabela `sessoes`
-- ✅ **Características**:
-  - Login via `api.autenticacao.login` (mutation customizada)
-  - Tokens gerados manualmente
-  - Armazenamento em `localStorage` no frontend
-  - Uso de `ConvexHttpClient.setAuth(token)` para autenticar requisições
-- ⚠️ **Problema encontrado**: Vulnerabilidade onde mensagens eram enviadas em nome errado
-- ❌ **Estado após correção**: Agora falha porque `ctx.auth.getUserIdentity()` retorna `null` (Better Auth não configurado)
-
-### Better Auth (Parcialmente Configurado)
-- ✅ **Frontend**: Cliente criado em `lib/auth.ts`
-- ✅ **API Route**: Handler em `/api/auth/[...all]/+server.ts`
-- ❌ **Backend Convex**: **NÃO CONFIGURADO** - `convex.config.ts` não tem integração
-- ❌ **Integração**: Código comentado no `+layout.svelte`
-
-## 🔍 Por que está falhando agora?
-
-Após remover o fallback inseguro:
-```typescript
-// Antes (inseguro, mas funcionava):
-if (!usuarioAtual) {
-  sessaoAtiva = sessaoMaisRecente(); // ❌ Pegava qualquer usuário
-}
-
-// Agora (seguro, mas não funciona):
-// Só usa Better Auth, que não está configurado
-// Resultado: ctx.auth.getUserIdentity() retorna null
-```
-
-O código está tentando usar `ctx.auth.getUserIdentity()` do Convex, mas isso **só funciona** se Better Auth estiver integrado ao Convex via `convex.config.ts`.
-
-## 📈 Comparação: Sistema Customizado vs Better Auth
-
-| Aspecto | Sistema Customizado | Better Auth |
-|---------|-------------------|-------------|
-| **Segurança** | ⚠️ Média (token manual, vulnerável a problemas) | ✅ Alta (padrão da indústria) |
-| **Manutenção** | ⚠️ Alta (manter código próprio) | ✅ Baixa (biblioteca mantida) |
-| **Funcionalidades** | ⚠️ Básicas | ✅ Completas (OAuth, 2FA, etc) |
-| **Confiabilidade** | ⚠️ Dependente da implementação | ✅ Testado e confiável |
-| **Migração** | - | ⚠️ Trabalhosa (mas única vez) |
-| **Tempo** | ✅ Já funciona | ⚠️ Requer configuração |
-
-## 🎯 Impacto da Migração para Better Auth
-
-### ✅ Vantagens
-1. **Segurança**: Elimina vulnerabilidades de identificação incorreta
-2. **Confiabilidade**: Biblioteca testada e mantida pela comunidade
-3. **Features**: OAuth, 2FA, recuperação de senha, etc
-4. **Padrão**: Usa `ctx.auth.getUserIdentity()` nativo do Convex
-5. **Futuro**: Mais fácil adicionar novos métodos de auth
-
-### ⚠️ Desvantagens/Custos
-1. **Trabalho inicial**: Configurar Better Auth no Convex
-2. **Migração de dados**: Migrar sessões ativas
-3. **Mudanças no frontend**: Alterar fluxo de login
-4. **Breaking changes**: Usuários precisarão fazer login novamente
-5. **Tempo**: 2-4 horas de trabalho
-
-### 📝 Arquivos que precisam mudar
-
-**Backend:**
-- `packages/backend/convex/convex.config.ts` - Adicionar Better Auth provider
-- `packages/backend/convex/autenticacao.ts` - Manter para features específicas (logs, etc)
-- `packages/backend/convex/chat.ts` - Já usa Better Auth (precisa configurar)
-- `packages/backend/convex/usuarios.ts` - Já usa Better Auth (precisa configurar)
-
-**Frontend:**
-- `apps/web/src/routes/+layout.svelte` - Descomentar integração Better Auth
-- `apps/web/src/lib/components/Sidebar.svelte` - Migrar login para Better Auth
-- `apps/web/src/lib/stores/auth.svelte.ts` - Adaptar para Better Auth
-- Qualquer lugar que use `convex.setAuth(token)`
-
-## 🚀 Recomendação
-
-**SIM, migrar para Better Auth é melhor**, porque:
-1. ✅ Mais seguro (resolve o problema atual)
-2. ✅ Padrão da indústria
-3. ✅ Menos código para manter
-4. ✅ Melhor integração com Convex
-5. ⚠️ Custo inicial é aceitável (única vez)
-
-## 📋 Plano de Migração (se aprovar)
-
-### Fase 1: Configurar Better Auth no Convex
-- Configurar provider no `convex.config.ts`
-- Testar `ctx.auth.getUserIdentity()` funcionando
-
-### Fase 2: Migrar Login no Frontend
-- Usar Better Auth para login/logout
-- Manter sistema customizado como fallback temporário
-
-### Fase 3: Migrar Todas as Queries/Mutations
-- Garantir que todas usam Better Auth
-- Remover dependências de tokens customizados
-
-### Fase 4: Limpeza
-- Remover código de sessões customizadas (ou manter apenas para logs)
-- Atualizar documentação
-
-## ⚠️ Alternativa: Corrigir Sistema Customizado
-
-Se preferir manter o sistema customizado, precisamos:
-1. Configurar Custom Auth Provider no `convex.config.ts` para ler token do header
-2. Modificar `getUsuarioAutenticado` para buscar sessão pelo token específico
-3. Garantir que tokens customizados sejam validados corretamente
-
-**Desvantagem**: Continua mantendo código customizado que pode ter bugs futuros.
-
-## 🔧 Solução Imediata: Configurar Custom Auth Provider
-
-Para fazer o sistema customizado funcionar AGORA, precisamos configurar um auth provider no Convex:
-
-```typescript
-// convex.config.ts
-import { defineApp } from "convex/server";
-import { createCustomAuth } from "convex/server";
-
-const app = defineApp({
-  auth: createCustomAuth({
-    // Função que extrai o token do header da requisição
-    getToken: async (request) => {
-      const authHeader = request.headers.get("authorization");
-      if (authHeader?.startsWith("Bearer ")) {
-        return authHeader.substring(7);
-      }
-      return null;
-    },
-    // Função que valida o token e retorna identity
-    getIdentity: async (token, ctx) => {
-      // Buscar sessão pelo token
-      const sessao = await ctx.db
-        .query("sessoes")
-        .withIndex("by_token", (q) => q.eq("token", token))
-        .filter((q) => q.eq(q.field("ativo"), true))
-        .first();
-      
-      if (!sessao || sessao.expiraEm < Date.now()) {
-        return null; // Token inválido ou expirado
-      }
-      
-      const usuario = await ctx.db.get(sessao.usuarioId);
-      if (!usuario || !usuario.ativo) {
-        return null;
-      }
-      
-      // Retornar identity compatível com Better Auth
-      return {
-        subject: usuario._id,
-        email: usuario.email,
-        emailVerified: true,
-      };
-    },
-  }),
-});
-
-export default app;
-```
-
-Depois disso, `ctx.auth.getUserIdentity()` funcionará com tokens customizados!
-
-## 💡 Minha Recomendação Final
-
-**Opção A - Migrar para Better Auth (RECOMENDADO)**:
-- ✅ Mais seguro e confiável
-- ✅ Padrão da indústria
-- ⚠️ 2-4 horas de trabalho
-- ✅ Solução definitiva
-
-**Opção B - Configurar Custom Auth Provider (RÁPIDO)**:
-- ✅ Funciona imediatamente
-- ✅ Mantém sistema atual
-- ⚠️ Continua código customizado
-- ⚠️ Mais manutenção futura
-

CONFIGURACAO_PUSH_NOTIFICATIONS.md

@@ -1,117 +0,0 @@
-# 🔔 Configuração de Push Notifications
-
-## Passo 1: Configurar VAPID Keys
-
-### 1.1 Gerar VAPID Keys (se ainda não tiver)
-
-Execute no diretório do backend:
-```bash
-cd packages/backend
-bunx web-push generate-vapid-keys
-```
-
-Isso gerará duas chaves:
-- **Public Key**: Segura para expor no frontend
-- **Private Key**: Deve ser mantida em segredo, apenas no backend
-
-### 1.2 Configurar no Convex (Backend)
-
-As variáveis de ambiente no Convex são configuradas via dashboard ou CLI:
-
-#### Opção A: Via Dashboard Convex
-1. Acesse https://dashboard.convex.dev
-2. Selecione seu projeto
-3. Vá em **Settings** > **Environment Variables**
-4. Adicione as seguintes variáveis:
-
-```
-VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks
-VAPID_PRIVATE_KEY=KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4
-FRONTEND_URL=http://localhost:5173
-```
-
-#### Opção B: Via CLI Convex
-```bash
-cd packages/backend
-npx convex env set VAPID_PUBLIC_KEY "BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks"
-npx convex env set VAPID_PRIVATE_KEY "KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4"
-npx convex env set FRONTEND_URL "http://localhost:5173"
-```
-
-### 1.3 Configurar no Frontend
-
-Crie um arquivo `.env` no diretório `apps/web/` com:
-
-```env
-VITE_VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks
-```
-
-**Importante**: Reinicie o servidor de desenvolvimento após criar/modificar o `.env`.
-
-## Passo 2: Configurar FRONTEND_URL
-
-A variável `FRONTEND_URL` é usada nos templates de email para gerar links de volta ao sistema.
-
-### Para Desenvolvimento:
-```
-FRONTEND_URL=http://localhost:5173
-```
-
-### Para Produção:
-```
-FRONTEND_URL=https://seu-dominio.com
-```
-
-## Passo 3: Testar Push Notifications
-
-### 3.1 Registrar Subscription no Frontend
-
-O sistema automaticamente solicita permissão e registra a subscription quando:
-1. O usuário faz login
-2. Acessa o chat pela primeira vez
-3. O Service Worker é instalado
-
-### 3.2 Verificar se está funcionando
-
-1. Abra o DevTools do navegador (F12)
-2. Vá na aba **Application** > **Service Workers**
-3. Verifique se o Service Worker está registrado
-4. Vá em **Application** > **Notifications**
-5. Verifique se a permissão está concedida
-
-### 3.3 Testar envio de push
-
-1. Abra o chat em duas abas/janelas diferentes
-2. Faça login com usuários diferentes
-3. Envie uma mensagem de um usuário para o outro
-4. A mensagem deve aparecer como notificação push na outra aba
-
-## Troubleshooting
-
-### Push notifications não funcionam
-
-1. **Verificar VAPID keys**: Certifique-se de que as keys estão configuradas corretamente
-2. **Verificar Service Worker**: O arquivo `sw.js` deve estar em `/static/sw.js`
-3. **Verificar permissões**: O navegador deve ter permissão para notificações
-4. **Verificar console**: Procure por erros no console do navegador e do Convex
-
-### Erro "VAPID keys não configuradas"
-
-- Verifique se as variáveis de ambiente estão configuradas no Convex
-- Reinicie o servidor Convex após configurar as variáveis
-- Verifique se os nomes das variáveis estão corretos (case-sensitive)
-
-### Service Worker não registra
-
-- Verifique se o arquivo `sw.js` existe em `apps/web/static/sw.js`
-- Verifique se o servidor está servindo arquivos estáticos corretamente
-- Limpe o cache do navegador e tente novamente
-
-## Segurança
-
-⚠️ **IMPORTANTE**:
-- A **Private Key** nunca deve ser exposta no frontend
-- Use variáveis de ambiente diferentes para desenvolvimento e produção
-- Regenere as keys se suspeitar de comprometimento
-- Mantenha as keys em segredo (não commite no Git)
-

CORRECAO_AUTENTICACAO.md

@@ -1,61 +0,0 @@
-# 🔧 Correção Crítica: Autenticação no Chat
-
-## 🐛 Problema Identificado
-
-Erros no console:
-- `[getUsuarioAutenticado] Usuário não autenticado - Better Auth não configurado ou token inválido`
-- `Uncaught Error: Não autenticado at handler (../convex/chat.ts:757:14)`
-- Chat não abre conversas (tela branca)
-
-**Causa Raiz**: Token não está sendo passado nas requisições Convex do `convex-svelte`
-
-## ✅ Correções Aplicadas
-
-### 1. `apps/web/src/routes/+layout.svelte`
-- ✅ Monkey patch no `ConvexHttpClient.prototype` para adicionar token automaticamente
-- ✅ Token é injetado em todas chamadas `mutation()` e `query()`
-
-### 2. `apps/web/src/lib/components/chat/PresenceManager.svelte`
-- ✅ Configuração manual do token no `onMount`
-- ✅ Garante que `atualizarStatusPresenca` tenha token
-
-### 3. `apps/web/src/lib/components/chat/ChatWindow.svelte`
-- ✅ Configuração manual do token no cliente
-- ✅ Garante que queries de conversas funcionem
-
-### 4. Backend (`packages/backend/convex/convex.config.ts`)
-- ✅ Custom Auth Provider já configurado com logs extensivos
-- ✅ Busca sessão por token específico (seguro)
-
-## 🧪 Como Testar
-
-1. **Limpar cache do navegador** (importante!)
-2. **Fazer login novamente**
-3. **Abrir console do navegador** e verificar:
-   - Não deve aparecer mais "Não autenticado"
-   - Deve aparecer logs do Custom Auth Provider no backend
-4. **Testar chat**:
-   - Abrir conversa
-   - Verificar se mensagens carregam
-   - Enviar mensagem
-
-## 🔍 Verificar Logs do Backend
-
-No terminal do Convex, deve aparecer:
-- `🔍 [Custom Auth] Headers recebidos:` - Se token está chegando
-- `✅ [Custom Auth] Token extraído:` - Se token foi encontrado
-- `✅ [Custom Auth] Identity criada:` - Se usuário foi identificado
-
-## ⚠️ Se Ainda Não Funcionar
-
-1. Verificar se token está no `authStore`: `console.log(authStore.token)`
-2. Verificar logs do backend Convex para ver qual etapa está falhando
-3. Verificar se sessão ainda está ativa no banco
-
-## 📝 Arquivos Modificados
-
-- `apps/web/src/routes/+layout.svelte`
-- `apps/web/src/lib/components/chat/PresenceManager.svelte`
-- `apps/web/src/lib/components/chat/ChatWindow.svelte`
-- Backend já estava correto desde Fase 1
-

FASE1_COMPLETA.md

@@ -1,82 +0,0 @@
-# ✅ FASE 1 COMPLETA: Configurar Auth Provider no Convex
-
-## 🎯 Objetivo
-Configurar Custom Auth Provider no Convex que funciona com o sistema atual (tokens customizados) e prepara para Better Auth.
-
-## ✅ O que foi implementado:
-
-### 1. `packages/backend/convex/convex.config.ts`
-- ✅ Adicionado Custom Auth Provider
-- ✅ `getToken()` - Extrai token do header `Authorization: Bearer <token>`
-- ✅ `getIdentity()` - Valida token buscando sessão na tabela `sessoes`
-- ✅ Retorna identity formatada compatível com Better Auth
-- ✅ Valida expiração e status ativo
-
-### 2. `packages/backend/convex/chat.ts`
-- ✅ Atualizado `getUsuarioAutenticado()` para usar Custom Auth Provider
-- ✅ Adicionado logs de debug em desenvolvimento
-- ✅ Mantida compatibilidade com sistema atual
-
-### 3. `packages/backend/convex/usuarios.ts`
-- ✅ Atualizado `getUsuarioAutenticado()` para usar Custom Auth Provider
-- ✅ Mantida compatibilidade
-
-## 🔍 Como funciona agora:
-
-1. **Frontend envia token**: `ConvexHttpClient.setAuth(token)` → header `Authorization: Bearer <token>`
-
-2. **Convex recebe**: O Custom Auth Provider extrai o token do header
-
-3. **Provider valida**: 
-   - Busca sessão na tabela `sessoes` por token
-   - Verifica se está ativa e não expirada
-   - Busca usuário e retorna identity
-
-4. **Backend usa**: `ctx.auth.getUserIdentity()` agora retorna identity válida!
-
-## ✅ Garantias de segurança:
-
-- ✅ Busca sessão por **token específico** (não mais recente)
-- ✅ Valida expiração do token
-- ✅ Verifica se usuário está ativo
-- ✅ Retorna `null` se token inválido (não assume usuário errado)
-
-## 🧪 Como testar:
-
-1. **Iniciar backend**:
-   ```bash
-   cd packages/backend
-   npm run dev
-   ```
-
-2. **Fazer login** no sistema (como sempre)
-
-3. **Verificar logs**:
-   - Deve aparecer: `✅ [getUsuarioAutenticado] Usuário identificado via Custom Auth Provider`
-   - Enviar mensagem no chat deve funcionar
-   - Ver perfil deve funcionar
-
-4. **Testar mutations críticas**:
-   - ✅ Enviar mensagem no chat
-   - ✅ Ver perfil do usuário
-   - ✅ Criar conversa
-   - ✅ Qualquer mutation que use `getUsuarioAutenticado()`
-
-## ⚠️ Se algo der errado:
-
-**Rollback rápido**: Comentar o bloco `auth: { ... }` no `convex.config.ts`:
-```typescript
-const app = defineApp();
-// auth: { ... } // Comentado temporariamente
-```
-
-## 📝 Próximos passos (Fase 2):
-
-- Configurar Better Auth no frontend para funcionar junto
-- Migrar login gradualmente
-- Adicionar suporte a tokens Better Auth no provider
-
-## ✨ Status: FASE 1 COMPLETA ✅
-
-O sistema atual deve funcionar normalmente, mas agora com `ctx.auth.getUserIdentity()` funcionando corretamente!
-

FASE2_COMPLETA.md

@@ -1,39 +0,0 @@
-# ✅ FASE 2 COMPLETA: Migração Dual - Login
-
-## 🎯 Objetivo
-Preparar sistema de login para suportar tanto Better Auth quanto sistema customizado, mantendo ambos funcionando simultaneamente.
-
-## ✅ O que foi implementado:
-
-### 1. `apps/web/src/lib/stores/auth.svelte.ts`
-- ✅ Método `login()` atualizado com logs e preparação para Better Auth
-- ✅ Método `loginWithBetterAuth()` criado (estrutura pronta, aguardando configuração)
-- ✅ Sistema customizado continua funcionando normalmente
-
-### 2. `apps/web/src/lib/components/Sidebar.svelte`
-- ✅ `handleLogin()` preparado com estrutura dual
-- ✅ Comentários mostram onde Better Auth será integrado
-- ✅ Fallback para sistema customizado mantido
-
-### 3. `apps/web/src/routes/+layout.svelte`
-- ✅ `setupConvex` configurado para passar token automaticamente
-- ✅ Token do `authStore` é incluído em todas as requisições
-
-## 🔄 Como funciona agora:
-
-**Login atual (Sistema Customizado)**:
-1. Usuário faz login via `api.autenticacao.login`
-2. Recebe `token` e `usuario`
-3. `authStore.login()` salva no localStorage
-4. Token é passado automaticamente para todas requisições Convex
-
-**Preparado para Better Auth**:
-- Estrutura pronta em `loginWithBetterAuth()`
-- Quando Better Auth estiver configurado, será descomentado o código em `handleLogin()`
-- Sistema continuará funcionando com fallback automático
-
-## ✨ Status: FASE 2 COMPLETA ✅
-
-Sistema está preparado para Better Auth, mas ainda usa sistema customizado normalmente.
-Próximo passo: Fase 3 (já parcialmente feito na Fase 1)
-

FASE4_COMPLETA.md

@@ -1,56 +0,0 @@
-# ✅ FASE 4 COMPLETA: Integração Better Auth no Frontend
-
-## 🎯 Objetivo
-Preparar integração Better Auth no frontend, mantendo compatibilidade com sistema customizado.
-
-## ✅ O que foi implementado:
-
-### 1. `apps/web/src/lib/auth.ts`
-- ✅ `authClient` atualizado com configuração dinâmica
-- ✅ Plugin `convexClient` configurado corretamente
-- ✅ Base URL ajustada para funcionar em produção/dev
-
-### 2. `apps/web/src/routes/+layout.svelte`
-- ✅ Comentários e estrutura preparada para Better Auth
-- ✅ Sistema customizado continua funcionando
-- ✅ Preparado para descomentar quando Better Auth estiver pronto
-
-### 3. `apps/web/src/routes/api/auth/[...all]/+server.ts`
-- ✅ Handler SvelteKit já existe e está funcionando
-- ✅ Processa requisições Better Auth automaticamente
-
-### 4. `packages/backend/convex/betterAuth.ts`
-- ✅ Arquivo criado (estrutura preparada)
-- ✅ Será configurado quando Better Auth estiver totalmente integrado
-
-## 🔄 Como funciona agora:
-
-**Sistema Atual (Funcionando)**:
-- ✅ Login via sistema customizado
-- ✅ Tokens passados automaticamente
-- ✅ Custom Auth Provider valida tokens
-
-**Preparado para Better Auth**:
-- ✅ Cliente Better Auth configurado
-- ✅ Handler SvelteKit pronto
-- ⏳ Aguardando configuração completa do backend
-
-## ⚠️ Status Atual:
-
-Better Auth está **parcialmente configurado**:
-- ✅ Frontend preparado
-- ✅ Handler API pronto  
-- ⏳ Backend Convex precisa de configuração adicional
-- ⏳ Tabelas Better Auth precisam ser geradas
-
-**Próximos Passos**:
-1. Configurar Better Auth no backend Convex (quando pacote suportar)
-2. Gerar/migrar tabelas Better Auth
-3. Descomentar integração no `+layout.svelte`
-4. Testar login via Better Auth
-
-## ✨ Status: FASE 4 COMPLETA (Estrutura) ✅
-
-Estrutura está pronta. Sistema customizado continua funcionando normalmente.
-Better Auth será ativado quando backend estiver completamente configurado.
-

GUIA_TESTE_PUSH_NOTIFICATIONS.md

@@ -1,214 +0,0 @@
-# 🧪 Guia de Teste - Push Notifications e Melhorias do Chat
-
-## Pré-requisitos
-
-1. ✅ Convex rodando (`cd packages/backend && bun run dev`)
-2. ✅ Frontend rodando (`cd apps/web && bun run dev`)
-3. ✅ Variáveis de ambiente configuradas (ver `configurar-variaveis-ambiente.md`)
-4. ✅ Usuários criados no sistema
-
-## Teste 1: Configuração de Push Notifications
-
-### 1.1 Verificar Service Worker
-
-1. Abra o navegador em `http://localhost:5173`
-2. Faça login no sistema
-3. Abra DevTools (F12)
-4. Vá em **Application** > **Service Workers**
-5. ✅ Verifique se `sw.js` está registrado e ativo
-
-### 1.2 Solicitar Permissão de Notificações
-
-1. Abra o chat no sistema
-2. O sistema deve solicitar permissão para notificações automaticamente
-3. Clique em **Permitir**
-4. ✅ Verifique em **Application** > **Notifications** que a permissão está concedida
-
-### 1.3 Verificar Subscription
-
-1. Abra o Console do DevTools
-2. Execute:
-```javascript
-navigator.serviceWorker.ready.then(reg => {
-  reg.pushManager.getSubscription().then(sub => {
-    console.log('Subscription:', sub);
-  });
-});
-```
-3. ✅ Deve retornar um objeto Subscription com endpoint e keys
-
-## Teste 2: Envio e Recebimento de Push Notifications
-
-### 2.1 Teste Básico
-
-1. Abra o sistema em **duas abas diferentes** (ou dois navegadores)
-2. Faça login com usuários diferentes em cada aba
-3. Na aba 1, abra uma conversa com o usuário da aba 2
-4. Envie uma mensagem da aba 1
-5. ✅ A aba 2 deve receber uma notificação push (mesmo se estiver em background)
-
-### 2.2 Teste de Menção
-
-1. Na aba 1, envie uma mensagem mencionando o usuário da aba 2 (use @)
-2. ✅ A aba 2 deve receber uma notificação push destacada
-
-### 2.3 Teste Offline
-
-1. Feche a aba 2 (ou coloque o navegador em modo offline)
-2. Envie uma mensagem da aba 1
-3. ✅ O sistema deve enviar um email para o usuário da aba 2 (se estiver offline)
-
-## Teste 3: Edição de Mensagens
-
-### 3.1 Editar Mensagem Própria
-
-1. Envie uma mensagem no chat
-2. Clique no ícone ✏️ ao lado da mensagem
-3. Edite o conteúdo
-4. Pressione **Ctrl+Enter** ou clique em **Salvar**
-5. ✅ A mensagem deve ser atualizada com indicador "(editado)"
-
-### 3.2 Tentar Editar Mensagem de Outro Usuário
-
-1. Tente editar uma mensagem de outro usuário
-2. ✅ Não deve aparecer o botão de editar (ou deve retornar erro)
-
-## Teste 4: Soft Delete de Mensagens
-
-### 4.1 Deletar Mensagem Própria
-
-1. Envie uma mensagem
-2. Clique no ícone 🗑️ ao lado da mensagem
-3. Confirme a exclusão
-4. ✅ A mensagem deve ser marcada como "Mensagem deletada"
-
-### 4.2 Tentar Deletar Mensagem de Outro Usuário
-
-1. Tente deletar uma mensagem de outro usuário
-2. ✅ Não deve aparecer o botão de deletar (ou deve retornar erro)
-
-## Teste 5: Respostas Encadeadas
-
-### 5.1 Responder Mensagem
-
-1. Clique no botão **↪️ Responder** em uma mensagem
-2. ✅ Deve aparecer um preview da mensagem original no campo de input
-3. Digite sua resposta e envie
-4. ✅ A mensagem enviada deve mostrar o preview da mensagem original acima
-
-### 5.2 Visualizar Thread
-
-1. Envie várias respostas para diferentes mensagens
-2. ✅ Cada resposta deve mostrar claramente qual mensagem está respondendo
-
-## Teste 6: Preview de Links
-
-### 6.1 Enviar Mensagem com URL
-
-1. Envie uma mensagem contendo uma URL (ex: `https://www.google.com`)
-2. Aguarde alguns segundos
-3. ✅ Deve aparecer um preview do link abaixo da mensagem com:
-   - Imagem (se disponível)
-   - Título
-   - Descrição
-   - Site/nome do domínio
-
-### 6.2 Testar Diferentes URLs
-
-Teste com diferentes tipos de URLs:
-- ✅ Google: `https://www.google.com`
-- ✅ YouTube: `https://www.youtube.com`
-- ✅ Artigo de notícia
-- ✅ Site sem Open Graph (deve funcionar mesmo assim)
-
-## Teste 7: Busca Full-Text
-
-### 7.1 Busca Básica
-
-1. Envie algumas mensagens com palavras específicas
-2. Use a busca no chat (se implementada) ou a query de busca
-3. ✅ Deve encontrar mensagens mesmo com acentos diferentes
-
-### 7.2 Busca com Filtros
-
-1. Busque mensagens por:
-   - ✅ Remetente específico
-   - ✅ Tipo (texto, arquivo, imagem)
-   - ✅ Período de data
-2. ✅ Os filtros devem funcionar corretamente
-
-## Teste 8: Rate Limiting de Emails
-
-### 8.1 Enviar Múltiplos Emails
-
-1. Configure o sistema para enviar emails
-2. Tente enviar mais de 10 emails em 1 minuto
-3. ✅ Deve retornar erro de rate limit após o limite
-
-### 8.2 Verificar Delay Exponencial
-
-1. Aguarde o rate limit ser aplicado
-2. Tente enviar novamente
-3. ✅ Deve haver um delay antes de permitir novo envio
-
-## Checklist de Validação
-
-- [ ] Service Worker registrado e funcionando
-- [ ] Permissão de notificações concedida
-- [ ] Push notifications sendo recebidas
-- [ ] Emails sendo enviados quando usuário offline
-- [ ] Edição de mensagens funcionando
-- [ ] Soft delete funcionando
-- [ ] Respostas encadeadas funcionando
-- [ ] Preview de links aparecendo
-- [ ] Busca full-text funcionando
-- [ ] Rate limiting de emails funcionando
-
-## Problemas Comuns e Soluções
-
-### Push notifications não funcionam
-
-**Problema**: Notificações não aparecem
-
-**Soluções**:
-1. Verifique se as VAPID keys estão configuradas no Convex
-2. Verifique se `VITE_VAPID_PUBLIC_KEY` está no `.env` do frontend
-3. Reinicie o servidor Convex e frontend
-4. Limpe o cache do navegador
-5. Verifique o console para erros
-
-### Preview de links não aparece
-
-**Problema**: Links não geram preview
-
-**Soluções**:
-1. Verifique se a URL é válida (começa com http:// ou https://)
-2. Aguarde alguns segundos (processamento é assíncrono)
-3. Verifique o console do Convex para erros na extração
-4. Alguns sites bloqueiam scrapers - isso é normal
-
-### Edição não funciona
-
-**Problema**: Botão de editar não aparece ou não funciona
-
-**Soluções**:
-1. Verifique se a mensagem é sua (só pode editar próprias mensagens)
-2. Verifique se a mensagem não foi deletada
-3. Verifique o console para erros
-4. Certifique-se de que a mutation `editarMensagem` está funcionando
-
-## Relatório de Testes
-
-Após completar os testes, preencha:
-
-- **Data**: ___________
-- **Testador**: ___________
-- **Ambiente**: [ ] Desenvolvimento [ ] Produção
-- **Navegador**: ___________
-- **Resultados**: ___________
-
-**Observações**:
-_______________________________________
-_______________________________________
-_______________________________________
-

PASSO_A_PASSO_CONFIGURACAO.md

@@ -1,163 +0,0 @@
-# 📋 Passo a Passo - Configuração Completa
-
-## ✅ Passo 1: Configurar VAPID Keys
-
-### 1.1 Configurar no Convex (Backend)
-
-**Opção A: Via Dashboard (Recomendado)**
-
-1. Acesse https://dashboard.convex.dev
-2. Selecione seu projeto
-3. Vá em **Settings** > **Environment Variables**
-4. Adicione as seguintes variáveis:
-
-```
-VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks
-VAPID_PRIVATE_KEY=KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4
-FRONTEND_URL=http://localhost:5173
-```
-
-**Opção B: Via CLI**
-
-Execute do diretório raiz do projeto:
-
-```powershell
-cd packages/backend
-npx convex env set VAPID_PUBLIC_KEY "BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks"
-npx convex env set VAPID_PRIVATE_KEY "KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4"
-npx convex env set FRONTEND_URL "http://localhost:5173"
-```
-
-**Opção C: Usar Script Automático**
-
-Execute na raiz do projeto:
-
-```powershell
-.\scripts\configurar-push-notifications.ps1
-```
-
-### 1.2 Configurar no Frontend
-
-Crie o arquivo `apps/web/.env` com:
-
-```env
-VITE_VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks
-```
-
-**Importante**: Reinicie o servidor frontend após criar/modificar o `.env`
-
-## ✅ Passo 2: Configurar FRONTEND_URL
-
-A variável `FRONTEND_URL` já foi configurada no Passo 1.1. Ela é usada nos templates de email para gerar links de volta ao sistema.
-
-**Para Desenvolvimento:**
-```
-FRONTEND_URL=http://localhost:5173
-```
-
-**Para Produção (quando fizer deploy):**
-```
-FRONTEND_URL=https://seu-dominio.com
-```
-
-## ✅ Passo 3: Testar Funcionalidades
-
-### 3.1 Verificar Configuração Inicial
-
-1. **Inicie o Convex** (se não estiver rodando):
-   ```bash
-   cd packages/backend
-   bun run dev
-   ```
-
-2. **Inicie o Frontend** (se não estiver rodando):
-   ```bash
-   cd apps/web
-   bun run dev
-   ```
-
-3. **Verifique as variáveis de ambiente**:
-   - No Convex Dashboard: Settings > Environment Variables
-   - No Frontend: Verifique se `apps/web/.env` existe
-
-### 3.2 Testar Push Notifications
-
-1. Abra `http://localhost:5173` no navegador
-2. Faça login no sistema
-3. Abra DevTools (F12) > **Application** > **Service Workers**
-4. ✅ Verifique se `sw.js` está registrado
-5. ✅ Verifique se a permissão de notificações foi solicitada
-
-### 3.3 Testar Chat Completo
-
-Siga o guia completo em `GUIA_TESTE_PUSH_NOTIFICATIONS.md` para testar:
-- ✅ Push notifications
-- ✅ Edição de mensagens
-- ✅ Soft delete
-- ✅ Respostas encadeadas
-- ✅ Preview de links
-- ✅ Busca full-text
-
-## 🔍 Verificação Rápida
-
-Execute estes comandos para verificar:
-
-### Verificar Variáveis no Convex:
-```bash
-cd packages/backend
-npx convex env list
-```
-
-Deve mostrar:
-- `VAPID_PUBLIC_KEY`
-- `VAPID_PRIVATE_KEY`
-- `FRONTEND_URL`
-
-### Verificar Frontend:
-```bash
-cd apps/web
-# Verifique se o arquivo .env existe
-cat .env
-```
-
-## 🐛 Troubleshooting
-
-### Problema: Variáveis não aparecem no Convex
-
-**Solução**: 
-- Certifique-se de estar no projeto correto no dashboard
-- Reinicie o servidor Convex após configurar
-- Use `npx convex env list` para verificar
-
-### Problema: Frontend não encontra VAPID_PUBLIC_KEY
-
-**Solução**:
-- Verifique se o arquivo `.env` está em `apps/web/.env`
-- Verifique se a variável começa com `VITE_`
-- Reinicie o servidor frontend
-- Limpe o cache do navegador
-
-### Problema: Service Worker não registra
-
-**Solução**:
-- Verifique se `apps/web/static/sw.js` existe
-- Abra DevTools > Application > Service Workers
-- Clique em "Unregister" e recarregue a página
-- Verifique o console para erros
-
-## 📝 Checklist Final
-
-- [ ] VAPID keys configuradas no Convex
-- [ ] FRONTEND_URL configurada no Convex
-- [ ] VITE_VAPID_PUBLIC_KEY no `.env` do frontend
-- [ ] Convex rodando
-- [ ] Frontend rodando
-- [ ] Service Worker registrado
-- [ ] Permissão de notificações concedida
-- [ ] Push notifications funcionando
-- [ ] Todas as funcionalidades testadas
-
-## 🎉 Pronto!
-
-Após completar os 3 passos, o sistema estará totalmente configurado e pronto para uso!
-

PLANO_MIGRACAO_BETTER_AUTH.md

@@ -1,226 +0,0 @@
-# Plano de Migração para Better Auth - Garantia de Funcionamento
-
-## 🎯 Estratégia: Migração Dual (Zero Downtime)
-
-**Garantia**: Sistema atual continua funcionando durante toda a migração. Se algo falhar, simplesmente revertemos uma linha de código.
-
-## 📋 Análise Completa de Dependências
-
-### Backend (7 arquivos usando `getUsuarioAutenticado`):
-1. ✅ `chat.ts` - Crítico (mensagens)
-2. ✅ `usuarios.ts` - Crítico (perfil)
-3. ✅ `pushNotifications.ts` - Importante
-4. ✅ `preferenciasNotificacao.ts` - Importante
-5. ✅ `atestadosLicencas.ts` - Médio
-6. ✅ `permissoesAcoes.ts` - Médio
-7. ✅ `monitoramento.ts` - Baixo
-
-### Frontend (24 arquivos usando `authStore`):
-- ✅ Todos usam `useConvexClient()` que pega auth automaticamente
-- ✅ Não há `setAuth()` manual nos componentes (exceto refresh)
-- ✅ `Sidebar.svelte` é o único lugar que faz login customizado
-
-## 🔄 Fases de Migração (Cada fase é testável e reversível)
-
-### ✅ FASE 0: Preparação (Sem Risco)
-- [x] Documentação completa
-- [x] Análise de dependências
-- [ ] Backups de configuração atual
-
-### ✅ FASE 1: Configurar Better Auth no Convex (Baixo Risco)
-**Status**: Configuração apenas, sistema atual continua funcionando
-
-**Arquivo**: `packages/backend/convex/convex.config.ts`
-- Adicionar Better Auth provider
-- Testar `ctx.auth.getUserIdentity()` retornando dados
-
-**Rollback**: Simplesmente comentar a configuração
-
-**Tempo**: 30 minutos
-
----
-
-### ✅ FASE 2: Migração Dual - Login (Médio Risco)
-**Status**: Ambos sistemas funcionam simultaneamente
-
-**Estratégia**: 
-- Better Auth como primário
-- Sistema customizado como fallback
-- Logs para comparar resultados
-
-**Arquivos**:
-- `apps/web/src/lib/components/Sidebar.svelte` - Suportar ambos logins
-- `apps/web/src/lib/stores/auth.svelte.ts` - Detectar qual método usar
-
-**Teste**: Login com Better Auth e verificar que tudo funciona
-**Rollback**: Remover código Better Auth, manter apenas customizado
-
-**Tempo**: 1 hora
-
----
-
-### ✅ FASE 3: Migração Dual - Backend Helpers (Baixo Risco)
-**Status**: Helper tenta Better Auth primeiro, fallback para customizado
-
-**Arquivos** (7 arquivos):
-- `packages/backend/convex/chat.ts`
-- `packages/backend/convex/usuarios.ts`
-- `packages/backend/convex/pushNotifications.ts`
-- `packages/backend/convex/preferenciasNotificacao.ts`
-- `packages/backend/convex/atestadosLicencas.ts`
-- `packages/backend/convex/permissoesAcoes.ts`
-- `packages/backend/convex/monitoramento.ts`
-
-**Estratégia**:
-```typescript
-async function getUsuarioAutenticado(ctx) {
-  // 1. Tentar Better Auth primeiro
-  const identity = await ctx.auth.getUserIdentity();
-  if (identity?.email) {
-    // Buscar usuário do Better Auth
-    const usuario = await buscarPorEmail(identity.email);
-    if (usuario) return usuario;
-  }
-  
-  // 2. Fallback para sistema customizado (se Better Auth não funcionar)
-  // ... código atual ...
-}
-```
-
-**Teste**: Cada mutation/query deve funcionar com ambos sistemas
-**Rollback**: Remover código Better Auth, manter apenas fallback
-
-**Tempo**: 1 hora
-
----
-
-### ✅ FASE 4: Integrar Convex com Better Auth (Médio Risco)
-**Status**: Convex passa a usar Better Auth automaticamente
-
-**Arquivo**: `apps/web/src/routes/+layout.svelte`
-- Descomentar `createSvelteAuthClient`
-- Configurar Convex para usar Better Auth automaticamente
-
-**Teste**: Todas requisições devem funcionar sem `setAuth()` manual
-**Rollback**: Comentar novamente
-
-**Tempo**: 30 minutos
-
----
-
-### ✅ FASE 5: Migração Completa - Frontend (Médio Risco)
-**Status**: Remover sistema customizado do frontend
-
-**Arquivos**:
-- `apps/web/src/lib/components/Sidebar.svelte` - Usar apenas Better Auth
-- `apps/web/src/lib/stores/auth.svelte.ts` - Adaptar para Better Auth
-- Remover `auth_token` do localStorage
-
-**Teste**: Login/logout completo
-**Rollback**: Reverter para código anterior
-
-**Tempo**: 1 hora
-
----
-
-### ✅ FASE 6: Migração Completa - Backend (Baixo Risco)
-**Status**: Remover fallback customizado dos helpers
-
-**Arquivos**: Os mesmos 7 arquivos da Fase 3
-- Remover código de fallback customizado
-- Manter apenas Better Auth
-
-**Teste**: Tudo deve funcionar apenas com Better Auth
-**Rollback**: Restaurar código com fallback
-
-**Tempo**: 30 minutos
-
----
-
-### ✅ FASE 7: Limpeza (Sem Risco)
-**Status**: Remover código não usado
-
-**Arquivos**:
-- `packages/backend/convex/autenticacao.ts` - Manter para logs históricos ou remover
-- Limpar tokens antigos do localStorage (se houver)
-
-**Tempo**: 30 minutos
-
----
-
-## ⚠️ Pontos de Atenção e Como Mitigar
-
-### 1. **Sessões Ativas Existentes**
-**Problema**: Usuários logados perderão sessão
-**Mitigação**: 
-- Fazer migração fora do horário de pico
-- Avisar usuários para fazer logout/login
-- Manter ambos sistemas por alguns dias
-
-### 2. **Tokens no localStorage**
-**Problema**: Tokens antigos podem causar confusão
-**Mitigação**:
-- Criar script de migração que limpa tokens antigos
-- Detectar e migrar automaticamente na primeira abertura
-
-### 3. **Email como Identificador Único**
-**Problema**: Better Auth usa email, sistema atual usa ID
-**Mitigação**:
-- Verificar que todos usuários têm email único
-- Criar índices no banco se necessário
-
-### 4. **Testes em Produção**
-**Problema**: Diferenças entre dev e produção
-**Mitigação**:
-- Testar em ambiente de staging primeiro
-- Migração gradual por módulo
-- Monitorar logs de erro
-
-## ✅ Checklist de Garantia
-
-Antes de completar cada fase:
-- [ ] Testar login/logout
-- [ ] Testar queries críticas
-- [ ] Testar mutations críticas
-- [ ] Verificar logs de erro
-- [ ] Testar com múltiplos usuários
-- [ ] Verificar autenticação em componentes críticos (Chat, Perfil, etc)
-
-## 🚨 Plano de Rollback
-
-Se algo der errado em qualquer fase:
-
-1. **Fase 1-3**: Comentar configuração Better Auth, manter sistema atual
-2. **Fase 4**: Reverter layout.svelte para código anterior
-3. **Fase 5**: Restaurar código de Sidebar e authStore
-4. **Fase 6**: Restaurar helpers com fallback
-
-**Tempo de rollback**: Máximo 5 minutos por fase
-
-## 📊 Garantia Final
-
-**Posso garantir**:
-- ✅ Sistema atual continua funcionando durante migração
-- ✅ Rollback rápido em caso de problemas
-- ✅ Testes em cada fase antes de prosseguir
-- ✅ Documentação completa de cada passo
-
-**Não posso garantir**:
-- ❌ Zero bugs (impossível sem testes reais)
-- ❌ Compatibilidade 100% sem testar em ambiente real
-- ❌ Que não haverá necessidade de ajustes finos
-
-**Mas posso garantir**:
-- ✅ Que se algo falhar, revertemos imediatamente
-- ✅ Que testes serão feitos antes de cada avanço
-- ✅ Que código estará documentado para debugging fácil
-
-## 🎬 Decisão
-
-**Opções**:
-1. **Migração completa** (6 horas total, fases separadas)
-2. **Solução rápida** (Configurar Custom Auth Provider - 1 hora)
-3. **Manter como está** (Corrigir apenas o problema imediato)
-
-**Minha recomendação**: Opção 1, mas fazer fase por fase, testando bem entre cada uma.
-

RESUMO_CONFIGURACAO_COMPLETA.md

@@ -1,68 +0,0 @@
-# ✅ Resumo da Configuração Completa
-
-## 📋 Passo 1: VAPID Keys - CONCLUÍDO
-
-### Keys Geradas:
-- **Public Key**: `BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks`
-- **Private Key**: `KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4`
-
-### Configuração Necessária:
-
-**1. No Convex (Backend):**
-- Via Dashboard: Settings > Environment Variables
-- Adicionar: `VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY`, `FRONTEND_URL`
-- OU executar: `.\scripts\configurar-push-notifications.ps1`
-
-**2. No Frontend:**
-- Criar arquivo `apps/web/.env`
-- Adicionar: `VITE_VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks`
-
-## 📋 Passo 2: FRONTEND_URL - CONCLUÍDO
-
-- Valor padrão: `http://localhost:5173`
-- Configurar no Convex junto com as VAPID keys
-- Usado nos templates de email para links de retorno
-
-## 📋 Passo 3: Testes - PRONTO PARA EXECUTAR
-
-### Arquivos Criados:
-- ✅ `PushNotificationManager.svelte` - Registra subscription automaticamente
-- ✅ `GUIA_TESTE_PUSH_NOTIFICATIONS.md` - Guia completo de testes
-- ✅ `PASSO_A_PASSO_CONFIGURACAO.md` - Instruções detalhadas
-- ✅ `CONFIGURACAO_PUSH_NOTIFICATIONS.md` - Documentação técnica
-- ✅ `scripts/configurar-push-notifications.ps1` - Script automático
-
-### Para Testar:
-
-1. **Configure as variáveis** (ver Passo 1)
-2. **Reinicie os servidores** (Convex e Frontend)
-3. **Faça login** no sistema
-4. **Siga o guia**: `GUIA_TESTE_PUSH_NOTIFICATIONS.md`
-
-## 🎯 Checklist de Configuração
-
-- [ ] VAPID keys configuradas no Convex Dashboard
-- [ ] FRONTEND_URL configurada no Convex
-- [ ] Arquivo `apps/web/.env` criado com VITE_VAPID_PUBLIC_KEY
-- [ ] Convex reiniciado após configurar variáveis
-- [ ] Frontend reiniciado após criar .env
-- [ ] Service Worker registrado (verificar DevTools)
-- [ ] Permissão de notificações concedida
-- [ ] Testes executados conforme guia
-
-## 📚 Documentação Disponível
-
-1. **CONFIGURACAO_PUSH_NOTIFICATIONS.md** - Configuração técnica detalhada
-2. **PASSO_A_PASSO_CONFIGURACAO.md** - Instruções passo a passo
-3. **GUIA_TESTE_PUSH_NOTIFICATIONS.md** - Guia completo de testes
-4. **configurar-variaveis-ambiente.md** - Referência rápida
-
-## 🚀 Próximos Passos
-
-1. Execute o script de configuração OU configure manualmente
-2. Reinicie os servidores
-3. Teste todas as funcionalidades
-4. Reporte qualquer problema encontrado
-
-**Tudo pronto para configuração e testes!** 🎉
-

RESUMO_MIGRACAO.md

@@ -1,178 +0,0 @@
-# 📋 Resumo da Migração para Better Auth
-
-## ✅ STATUS GERAL: FASES 1-4 COMPLETAS
-
-Migração gradual implementada com sucesso. Sistema atual funcionando + estrutura Better Auth preparada.
-
----
-
-## 🎯 O QUE FOI FEITO
-
-### ✅ FASE 1: Custom Auth Provider no Convex
-**Arquivos modificados:**
-- `packages/backend/convex/convex.config.ts` - Custom Auth Provider configurado
-- `packages/backend/convex/chat.ts` - Helper atualizado
-- `packages/backend/convex/usuarios.ts` - Helper atualizado
-
-**Resultado:**
-- ✅ `ctx.auth.getUserIdentity()` agora funciona com tokens customizados
-- ✅ Busca sessão por token específico (seguro, não mais "mais recente")
-- ✅ Logs de debug extensivos adicionados
-
----
-
-### ✅ FASE 2: Migração Dual - Login
-**Arquivos modificados:**
-- `apps/web/src/lib/stores/auth.svelte.ts` - Estrutura dual preparada
-- `apps/web/src/lib/components/Sidebar.svelte` - Login com fallback preparado
-- `apps/web/src/routes/+layout.svelte` - Token passado automaticamente
-
-**Resultado:**
-- ✅ Sistema customizado continua funcionando normalmente
-- ✅ Estrutura pronta para Better Auth
-- ✅ Token passado automaticamente em todas requisições
-
----
-
-### ✅ FASE 3: Backend Helpers (Já feito na Fase 1)
-**Arquivos modificados:**
-- Mesmos arquivos da Fase 1
-
-**Resultado:**
-- ✅ Todos helpers usam Custom Auth Provider
-- ✅ Fallback seguro implementado
-
----
-
-### ✅ FASE 4: Integração Better Auth Frontend
-**Arquivos modificados:**
-- `apps/web/src/lib/auth.ts` - Cliente Better Auth configurado
-- `apps/web/src/routes/+layout.svelte` - Integração preparada
-- `apps/web/src/routes/api/auth/[...all]/+server.ts` - Handler já existia
-- `packages/backend/convex/betterAuth.ts` - Estrutura criada
-
-**Resultado:**
-- ✅ Cliente Better Auth configurado corretamente
-- ✅ Handler SvelteKit pronto
-- ⏳ Aguardando configuração completa do backend
-
----
-
-## 🔒 SEGURANÇA
-
-### Problemas corrigidos:
-1. ✅ **Bug crítico**: Removido fallback inseguro que buscava "sessão mais recente"
-2. ✅ **Identificação correta**: Agora busca sessão por token específico
-3. ✅ **Validação**: Verifica expiração e status ativo
-4. ✅ **Logs**: Debug extensivo para troubleshooting
-
-### Garantias:
-- ✅ Nenhum usuário será identificado incorretamente
-- ✅ Tokens são validados antes de usar
-- ✅ Sessões expiradas são rejeitadas
-- ✅ Usuários inativos são bloqueados
-
----
-
-## 🧪 TESTES NECESSÁRIOS
-
-### Testes Imediatos:
-1. ✅ **Login**: Fazer login e verificar que funciona
-2. ✅ **Enviar Mensagem**: Testar chat funcionando
-3. ✅ **Ver Perfil**: Verificar que perfil carrega
-4. ✅ **Logs**: Verificar logs do Convex para debug
-
-### Testes Futuros (quando Better Auth ativo):
-1. ⏳ Login via Better Auth
-2. ⏳ Comparar tokens Better Auth vs customizado
-3. ⏳ Validar que ambos funcionam simultaneamente
-4. ⏳ Migração de usuários existentes
-
----
-
-## 📊 ESTADO ATUAL DO SISTEMA
-
-### ✅ Funcionando:
-- Login via sistema customizado
-- Autenticação em todas mutations/queries
-- Token passado automaticamente
-- Custom Auth Provider validando tokens
-
-### ⏳ Preparado mas não ativo:
-- Cliente Better Auth configurado
-- Handler SvelteKit pronto
-- Estrutura dual no login
-- Integração no layout
-
-### ❌ Pendente:
-- Configuração completa Better Auth backend
-- Migração de sessões existentes
-- Ativação Better Auth (descomentar código)
-
----
-
-## 🚀 PRÓXIMOS PASSOS
-
-### Curto Prazo (Para resolver erros):
-1. **Verificar logs do Convex** para entender por que tokens não estão chegando
-2. **Ajustar `setupConvex`** se necessário para passar token corretamente
-3. **Testar em ambiente real** e ajustar conforme necessário
-
-### Médio Prazo (Completar Better Auth):
-1. Configurar Better Auth backend completamente
-2. Gerar tabelas Better Auth no Convex
-3. Descomentar integração no `+layout.svelte`
-4. Testar login via Better Auth
-5. Validar que ambos sistemas funcionam
-
-### Longo Prazo (Migração completa):
-1. Migrar todos usuários para Better Auth
-2. Remover sistema customizado (ou manter como fallback)
-3. Atualizar documentação
-4. Remover código comentado
-
----
-
-## ⚠️ ROLLBACK PLAN
-
-Se algo der errado, reverta em ordem:
-
-1. **Comentar Custom Auth Provider**: Remover `auth: { ... }` de `convex.config.ts`
-2. **Reverter helpers**: Voltar para busca de sessão (mas não "mais recente"!)
-3. **Reverter layout**: Remover configuração `auth` de `setupConvex`
-
-**Tempo estimado de rollback**: 5-10 minutos
-
----
-
-## 📝 ARQUIVOS CRIADOS/MODIFICADOS
-
-### Criados:
-- `FASE1_COMPLETA.md`
-- `FASE2_COMPLETA.md`
-- `FASE4_COMPLETA.md`
-- `RESUMO_MIGRACAO.md`
-- `packages/backend/convex/betterAuth.ts`
-
-### Modificados:
-- `packages/backend/convex/convex.config.ts`
-- `packages/backend/convex/chat.ts`
-- `packages/backend/convex/usuarios.ts`
-- `apps/web/src/routes/+layout.svelte`
-- `apps/web/src/lib/auth.ts`
-- `apps/web/src/lib/stores/auth.svelte.ts`
-- `apps/web/src/lib/components/Sidebar.svelte`
-
----
-
-## ✨ CONCLUSÃO
-
-**Migração gradual implementada com sucesso!**
-
-- ✅ Sistema atual funcionando com Custom Auth Provider seguro
-- ✅ Estrutura Better Auth preparada e pronta
-- ✅ Migração reversível e testável
-- ✅ Documentação completa
-
-**Próximo passo**: Testar sistema atual e verificar logs para ajustar se necessário.
-

apps/web/Dockerfile

@@ -0,0 +1,68 @@
+# Use the official Bun image
+FROM oven/bun:1 AS base
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# ---
+FROM base AS prepare
+
+RUN bun add -g turbo@^2
+COPY . .
+RUN turbo prune web --docker
+
+
+# ---
+FROM base AS builder
+
+# First install the dependencies (as they change less often)
+COPY --from=prepare /app/out/json/ .
+RUN bun install
+# Build the project
+COPY --from=prepare /app/out/full/ .
+
+ARG PUBLIC_CONVEX_URL
+ENV PUBLIC_CONVEX_URL=$PUBLIC_CONVEX_URL
+
+ARG PUBLIC_CONVEX_SITE_URL
+ENV PUBLIC_CONVEX_SITE_URL=$PUBLIC_CONVEX_SITE_URL
+
+RUN bunx turbo build
+
+# Production stage
+FROM oven/bun:1-slim AS production
+
+# Set working directory to match builder structure
+WORKDIR /app
+
+# Copy root node_modules (contains hoisted dependencies)
+COPY --from=builder /app/node_modules ./node_modules
+
+# Copy built application and workspace files
+COPY --from=builder /app/apps/web/build ./apps/web/build
+COPY --from=builder /app/apps/web/package.json ./apps/web/package.json
+# Copy workspace node_modules (contains symlinks to root node_modules)
+COPY --from=builder /app/apps/web/node_modules ./apps/web/node_modules
+
+# Copy any additional files needed for runtime
+COPY --from=builder /app/apps/web/static ./apps/web/static
+
+# Switch to non-root user
+USER sveltekit
+
+# Set working directory to the app
+WORKDIR /app/apps/web
+
+# Expose the port that the app runs on
+EXPOSE 5173
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=5173
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+	CMD bun --version || exit 1
+
+# Start the application
+CMD ["bun", "./build/index.js"]

apps/web/convex/_generated/api.d.ts

@@ -8,11 +8,7 @@
  * @module
  */
 
-import type {
-  ApiFromModules,
-  FilterApi,
-  FunctionReference,
-} from "convex/server";
+import type { ApiFromModules, FilterApi, FunctionReference } from 'convex/server';
 
 /**
  * A utility for referencing Convex functions in your app's API.
@@ -25,13 +21,10 @@ import type {
 declare const fullApi: ApiFromModules<{}>;
 declare const fullApiWithMounts: typeof fullApi;
 
-export declare const api: FilterApi<
-  typeof fullApiWithMounts,
-  FunctionReference<any, "public">
->;
+export declare const api: FilterApi<typeof fullApiWithMounts, FunctionReference<any, 'public'>>;
 export declare const internal: FilterApi<
-  typeof fullApiWithMounts,
-  FunctionReference<any, "internal">
+	typeof fullApiWithMounts,
+	FunctionReference<any, 'internal'>
 >;
 
 export declare const components: {};

apps/web/convex/_generated/api.js

@@ -8,7 +8,7 @@
  * @module
  */
 
-import { anyApi, componentsGeneric } from "convex/server";
+import { anyApi, componentsGeneric } from 'convex/server';
 
 /**
  * A utility for referencing Convex functions in your app's API.

apps/web/convex/_generated/dataModel.d.ts

@@ -8,8 +8,8 @@
  * @module
  */
 
-import { AnyDataModel } from "convex/server";
-import type { GenericId } from "convex/values";
+import { AnyDataModel } from 'convex/server';
+import type { GenericId } from 'convex/values';
 
 /**
  * No `schema.ts` file found!
@@ -43,8 +43,7 @@ export type Doc = any;
  * IDs are just strings at runtime, but this type can be used to distinguish them from other
  * strings when type checking.
  */
-export type Id<TableName extends TableNames = TableNames> =
-  GenericId<TableName>;
+export type Id<TableName extends TableNames = TableNames> = GenericId<TableName>;
 
 /**
  * A type describing your Convex data model.

apps/web/convex/_generated/server.d.ts

@@ -9,24 +9,24 @@
  */
 
 import {
-  ActionBuilder,
-  AnyComponents,
-  HttpActionBuilder,
-  MutationBuilder,
-  QueryBuilder,
-  GenericActionCtx,
-  GenericMutationCtx,
-  GenericQueryCtx,
-  GenericDatabaseReader,
-  GenericDatabaseWriter,
-  FunctionReference,
-} from "convex/server";
-import type { DataModel } from "./dataModel.js";
+	ActionBuilder,
+	AnyComponents,
+	HttpActionBuilder,
+	MutationBuilder,
+	QueryBuilder,
+	GenericActionCtx,
+	GenericMutationCtx,
+	GenericQueryCtx,
+	GenericDatabaseReader,
+	GenericDatabaseWriter,
+	FunctionReference
+} from 'convex/server';
+import type { DataModel } from './dataModel.js';
 
 type GenericCtx =
-  | GenericActionCtx<DataModel>
-  | GenericMutationCtx<DataModel>
-  | GenericQueryCtx<DataModel>;
+	| GenericActionCtx<DataModel>
+	| GenericMutationCtx<DataModel>
+	| GenericQueryCtx<DataModel>;
 
 /**
  * Define a query in this Convex app's public API.
@@ -36,7 +36,7 @@ type GenericCtx =
  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
  */
-export declare const query: QueryBuilder<DataModel, "public">;
+export declare const query: QueryBuilder<DataModel, 'public'>;
 
 /**
  * Define a query that is only accessible from other Convex functions (but not from the client).
@@ -46,7 +46,7 @@ export declare const query: QueryBuilder<DataModel, "public">;
  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
  */
-export declare const internalQuery: QueryBuilder<DataModel, "internal">;
+export declare const internalQuery: QueryBuilder<DataModel, 'internal'>;
 
 /**
  * Define a mutation in this Convex app's public API.
@@ -56,7 +56,7 @@ export declare const internalQuery: QueryBuilder<DataModel, "internal">;
  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
  */
-export declare const mutation: MutationBuilder<DataModel, "public">;
+export declare const mutation: MutationBuilder<DataModel, 'public'>;
 
 /**
  * Define a mutation that is only accessible from other Convex functions (but not from the client).
@@ -66,7 +66,7 @@ export declare const mutation: MutationBuilder<DataModel, "public">;
  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
  */
-export declare const internalMutation: MutationBuilder<DataModel, "internal">;
+export declare const internalMutation: MutationBuilder<DataModel, 'internal'>;
 
 /**
  * Define an action in this Convex app's public API.
@@ -79,7 +79,7 @@ export declare const internalMutation: MutationBuilder<DataModel, "internal">;
  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
  */
-export declare const action: ActionBuilder<DataModel, "public">;
+export declare const action: ActionBuilder<DataModel, 'public'>;
 
 /**
  * Define an action that is only accessible from other Convex functions (but not from the client).
@@ -87,7 +87,7 @@ export declare const action: ActionBuilder<DataModel, "public">;
  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
  */
-export declare const internalAction: ActionBuilder<DataModel, "internal">;
+export declare const internalAction: ActionBuilder<DataModel, 'internal'>;
 
 /**
  * Define an HTTP action.

apps/web/convex/_generated/server.js

@@ -9,15 +9,15 @@
  */
 
 import {
-  actionGeneric,
-  httpActionGeneric,
-  queryGeneric,
-  mutationGeneric,
-  internalActionGeneric,
-  internalMutationGeneric,
-  internalQueryGeneric,
-  componentsGeneric,
-} from "convex/server";
+	actionGeneric,
+	httpActionGeneric,
+	queryGeneric,
+	mutationGeneric,
+	internalActionGeneric,
+	internalMutationGeneric,
+	internalQueryGeneric,
+	componentsGeneric
+} from 'convex/server';
 
 /**
  * Define a query in this Convex app's public API.

apps/web/eslint.config.js

@@ -0,0 +1,28 @@
+import { config as svelteConfigBase } from '@sgse-app/eslint-config/svelte';
+import { defineConfig } from 'eslint/config';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+/** @type {import("eslint").Linter.Config} */
+export default defineConfig([
+	...svelteConfigBase,
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser,
+				extraFileExtensions: ['.svelte'],
+				svelteConfig
+			}
+		}
+	},
+	{
+		ignores: [
+			'**/node_modules/**',
+			'**/.svelte-kit/**',
+			'**/build/**',
+			'**/dist/**',
+			'**/.turbo/**'
+		]
+	}
+]);

apps/web/package.json

@@ -1,56 +1,70 @@
 {
-  "name": "web",
-  "private": true,
-  "version": "0.0.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/kit": "^2.31.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.2",
-    "@tailwindcss/vite": "^4.1.12",
-    "autoprefixer": "^10.4.21",
-    "daisyui": "^5.3.8",
-    "esbuild": "^0.25.11",
-    "postcss": "^8.5.6",
-    "svelte": "^5.38.1",
-    "svelte-check": "^4.3.1",
-    "tailwindcss": "^4.1.12",
-    "typescript": "catalog:",
-    "vite": "^7.1.2"
-  },
-  "dependencies": {
-    "@convex-dev/better-auth": "^0.9.7",
-    "@dicebear/collection": "^9.2.4",
-    "@dicebear/core": "^9.2.4",
-    "@fullcalendar/core": "^6.1.19",
-    "@fullcalendar/daygrid": "^6.1.19",
-    "@fullcalendar/interaction": "^6.1.19",
-    "@fullcalendar/list": "^6.1.19",
-    "@fullcalendar/multimonth": "^6.1.19",
-    "@internationalized/date": "^3.10.0",
-    "@mmailaender/convex-better-auth-svelte": "^0.2.0",
-    "@sgse-app/backend": "*",
-    "@tanstack/svelte-form": "^1.19.2",
-    "@types/papaparse": "^5.3.14",
-    "better-auth": "^1.3.34",
-    "convex": "catalog:",
-    "convex-svelte": "^0.0.11",
-    "date-fns": "^4.1.0",
-    "emoji-picker-element": "^1.27.0",
-    "is-network-error": "^1.3.0",
-    "jspdf": "^3.0.3",
-    "jspdf-autotable": "^5.0.2",
-    "lucide-svelte": "^0.552.0",
-    "papaparse": "^5.4.1",
-    "svelte-sonner": "^1.0.5",
-    "zod": "^4.1.12"
-  }
-}
+	"name": "web",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "bunx --bun vite dev",
+		"build": "bunx --bun vite build",
+		"preview": "bunx --bun vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sgse-app/eslint-config": "*",
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/kit": "^2.31.1",
+		"@sveltejs/vite-plugin-svelte": "^6.1.2",
+		"@tailwindcss/vite": "^4.1.12",
+		"autoprefixer": "^10.4.21",
+		"daisyui": "^5.3.8",
+		"esbuild": "^0.25.11",
+		"postcss": "^8.5.6",
+		"svelte": "^5.38.1",
+		"svelte-adapter-bun": "^1.0.1",
+		"svelte-check": "^4.3.1",
+		"svelte-dnd-action": "^0.9.67",
+		"tailwindcss": "^4.1.12",
+		"typescript": "catalog:",
+		"vite": "^7.1.2"
+	},
+	"dependencies": {
+		"@ark-ui/svelte": "^5.15.0",
+		"@convex-dev/better-auth": "^0.9.7",
+		"@dicebear/collection": "^9.2.4",
+		"@dicebear/core": "^9.2.4",
+		"@fullcalendar/core": "^6.1.19",
+		"@fullcalendar/daygrid": "^6.1.19",
+		"@fullcalendar/interaction": "^6.1.19",
+		"@fullcalendar/list": "^6.1.19",
+		"@fullcalendar/multimonth": "^6.1.19",
+		"@internationalized/date": "^3.10.0",
+		"@mmailaender/convex-better-auth-svelte": "^0.2.0",
+		"@sgse-app/backend": "*",
+		"@tanstack/svelte-form": "^1.19.2",
+		"@types/papaparse": "^5.3.14",
+		"better-auth": "catalog:",
+		"convex": "catalog:",
+		"convex-svelte": "^0.0.12",
+		"date-fns": "^4.1.0",
+		"emoji-picker-element": "^1.27.0",
+		"eslint": "catalog:",
+		"exceljs": "^4.4.0",
+		"html5-qrcode": "^2.3.8",
+		"is-network-error": "^1.3.0",
+		"jspdf": "^3.0.3",
+		"jspdf-autotable": "^5.0.2",
+		"lib-jitsi-meet": "^1.0.6",
+		"lucide-svelte": "^0.552.0",
+		"marked": "^17.0.1",
+		"papaparse": "^5.4.1",
+		"svelte-sonner": "^1.0.5",
+		"theme-change": "^2.5.0",
+		"xlsx": "^0.18.5",
+		"xlsx-js-style": "^1.2.0",
+		"zod": "^4.1.12"
+	}
+}

apps/web/src/app.css

@@ -1,77 +1,368 @@
-@import "tailwindcss";
-@plugin "daisyui";
+@import 'tailwindcss';
+@plugin 'daisyui';
 
 /* FullCalendar CSS - v6 não exporta CSS separado, estilos são aplicados via JavaScript */
 
 /* Estilo padrão dos botões - mesmo estilo do sidebar */
 .btn-standard {
-  @apply font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors;
+	@apply border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content flex items-center justify-center gap-2 rounded-xl border p-3 text-center font-medium transition-colors hover:text-white active:text-white;
 }
 
 /* Sobrescrever estilos DaisyUI para seguir o padrão */
 .btn-primary {
-  @apply font-medium flex items-center justify-center gap-2 text-center px-4 py-2 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors;
+	@apply border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-center font-medium transition-colors hover:text-white active:text-white;
 }
 
 .btn-ghost {
-  @apply font-medium flex items-center justify-center gap-2 text-center px-4 py-2 rounded-xl border border-base-300 bg-base-100 hover:bg-base-200 active:bg-base-300 text-base-content transition-colors;
+	@apply border-base-300 bg-base-100 hover:bg-base-200 active:bg-base-300 text-base-content flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-center font-medium transition-colors;
 }
 
 .btn-error {
-  @apply font-medium flex items-center justify-center gap-2 text-center px-4 py-2 rounded-xl border border-error bg-base-100 hover:bg-error/60 active:bg-error text-error hover:text-white active:text-white transition-colors;
+	@apply border-error bg-base-100 hover:bg-error/60 active:bg-error text-error flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-center font-medium transition-colors hover:text-white active:text-white;
 }
 
-:where(.card, .card-hover) {
-  position: relative;
-  overflow: hidden;
-  transform: translateY(0);
-  transition: transform 220ms ease, box-shadow 220ms ease;
+/* Tema Aqua (padrão roxo/azul) - redefinido como custom para garantir compatibilidade */
+@plugin 'daisyui/theme' {
+	name: 'aqua';
+	default: true;
+	color-scheme: light;
+	/* Azul principal (ligeiramente mais escuro que o anterior) */
+	--color-primary: hsl(217 91% 55%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(217 91% 55%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(217 91% 55%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(217 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(217 20% 95%);
+	--color-base-300: hsl(217 20% 90%);
+	--color-base-content: hsl(217 20% 17%);
+	--color-info: hsl(217 91% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
 }
 
-:where(.card, .card-hover)::before {
-  content: "";
-  position: absolute;
-  inset: -2px;
-  border-radius: 1.15rem;
-  box-shadow:
-    0 0 0 1px rgba(15, 23, 42, 0.04),
-    0 14px 32px -22px rgba(15, 23, 42, 0.45),
-    0 6px 18px -16px rgba(102, 126, 234, 0.35);
-  opacity: 0.55;
-  transition: opacity 220ms ease, transform 220ms ease;
-  pointer-events: none;
-  z-index: 0;
+/* Temas customizados para SGSE */
+
+/* Azul */
+@plugin 'daisyui/theme' {
+	name: 'sgse-blue';
+	color-scheme: light;
+	--color-primary: hsl(217 91% 55%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(217 91% 55%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(217 91% 55%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(217 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(217 20% 95%);
+	--color-base-300: hsl(217 20% 90%);
+	--color-base-content: hsl(217 20% 17%);
+	--color-info: hsl(217 91% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
 }
 
-:where(.card, .card-hover)::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 1rem;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
-  opacity: 0;
-  transform: scale(0.96);
-  transition: opacity 220ms ease, transform 220ms ease;
-  pointer-events: none;
-  z-index: 1;
+/* Verde */
+@plugin 'daisyui/theme' {
+	name: 'sgse-green';
+	color-scheme: light;
+	--color-primary: hsl(142 76% 36%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(142 76% 36%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(142 76% 36%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(142 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(142 20% 95%);
+	--color-base-300: hsl(142 20% 90%);
+	--color-base-content: hsl(142 20% 17%);
+	--color-info: hsl(142 76% 36%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
 }
 
-:where(.card, .card-hover):hover {
-  transform: translateY(-6px);
-  box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.35);
+/* Laranja */
+@plugin 'daisyui/theme' {
+	name: 'sgse-orange';
+	color-scheme: light;
+	--color-primary: hsl(25 95% 53%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(25 95% 53%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(25 95% 53%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(25 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(25 20% 95%);
+	--color-base-300: hsl(25 20% 90%);
+	--color-base-content: hsl(25 20% 17%);
+	--color-info: hsl(25 95% 53%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
 }
 
-:where(.card, .card-hover):hover::before {
-  opacity: 0.9;
-  transform: scale(1);
+/* Vermelho */
+@plugin 'daisyui/theme' {
+	name: 'sgse-red';
+	color-scheme: light;
+	--color-primary: hsl(0 84% 60%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(0 84% 60%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(0 84% 60%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(0 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(0 20% 95%);
+	--color-base-300: hsl(0 20% 90%);
+	--color-base-content: hsl(0 20% 17%);
+	--color-info: hsl(0 84% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
 }
 
-:where(.card, .card-hover):hover::after {
-  opacity: 1;
-  transform: scale(1);
+/* Rosa */
+@plugin 'daisyui/theme' {
+	name: 'sgse-pink';
+	color-scheme: light;
+	--color-primary: hsl(330 81% 60%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(330 81% 60%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(330 81% 60%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(330 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(330 20% 95%);
+	--color-base-300: hsl(330 20% 90%);
+	--color-base-content: hsl(330 20% 17%);
+	--color-info: hsl(330 81% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
 }
 
-:where(.card, .card-hover) > * {
-  position: relative;
-  z-index: 2;
-}
+/* Teal */
+@plugin 'daisyui/theme' {
+	name: 'sgse-teal';
+	color-scheme: light;
+	--color-primary: hsl(173 80% 40%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(173 80% 40%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(173 80% 40%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(173 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(173 20% 95%);
+	--color-base-300: hsl(173 20% 90%);
+	--color-base-content: hsl(173 20% 17%);
+	--color-info: hsl(173 80% 40%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
+}
+
+/* Corporativo (Dark Blue) */
+@plugin 'daisyui/theme' {
+	name: 'sgse-corporate';
+	color-scheme: dark;
+	--color-primary: hsl(217 91% 55%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(217 91% 55%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(217 91% 55%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(217 30% 15%);
+	--color-neutral-content: hsl(0 0% 100%);
+	/* Aproxima do fundo do login (Tailwind slate-900 = #0f172a) */
+	--color-base-100: hsl(222 47% 11%);
+	/* Escala de contraste (slate-800 / slate-700 aproximados) */
+	--color-base-200: hsl(215 28% 17%);
+	--color-base-300: hsl(215 25% 23%);
+	--color-base-content: hsl(217 10% 90%);
+	--color-info: hsl(217 91% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
+}
+
+/* Light */
+@plugin 'daisyui/theme' {
+	name: 'light';
+	color-scheme: light;
+	--color-primary: hsl(217 91% 55%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(217 91% 55%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(217 91% 55%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(217 20% 17%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(0 0% 100%);
+	--color-base-200: hsl(217 20% 95%);
+	--color-base-300: hsl(217 20% 90%);
+	--color-base-content: hsl(217 20% 17%);
+	--color-info: hsl(217 91% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
+}
+
+/* Dark */
+@plugin 'daisyui/theme' {
+	name: 'dark';
+	color-scheme: dark;
+	--color-primary: hsl(217 91% 55%);
+	--color-primary-content: hsl(0 0% 100%);
+	--color-secondary: hsl(217 91% 55%);
+	--color-secondary-content: hsl(0 0% 100%);
+	--color-accent: hsl(217 91% 55%);
+	--color-accent-content: hsl(0 0% 100%);
+	--color-neutral: hsl(217 30% 15%);
+	--color-neutral-content: hsl(0 0% 100%);
+	--color-base-100: hsl(217 30% 10%);
+	--color-base-200: hsl(217 30% 15%);
+	--color-base-300: hsl(217 30% 20%);
+	--color-base-content: hsl(217 10% 90%);
+	--color-info: hsl(217 91% 60%);
+	--color-info-content: hsl(0 0% 100%);
+	--color-success: hsl(142 76% 36%);
+	--color-success-content: hsl(0 0% 100%);
+	--color-warning: hsl(38 92% 50%);
+	--color-warning-content: hsl(0 0% 100%);
+	--color-error: hsl(0 84% 60%);
+	--color-error-content: hsl(0 0% 100%);
+	--radius-selector: 0.5rem;
+	--radius-field: 0.5rem;
+	--radius-box: 1rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
+}

apps/web/src/app.d.ts

@@ -1,12 +1,8 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
 declare global {
 	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
+		interface Locals {
+			token: string | undefined;
+		}
 	}
 }
 

apps/web/src/app.html

@@ -1,10 +1,131 @@
 <!doctype html>
-<html lang="en" data-theme="aqua">
+<html lang="en" id="html-theme">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+		<!-- Polyfill BlobBuilder ANTES de qualquer código JavaScript -->
+		<!-- IMPORTANTE: Este script DEVE ser executado antes de qualquer módulo JavaScript -->
+		<script>
+			// Executar IMEDIATAMENTE, de forma síncrona e bloqueante
+			// Não usar IIFE assíncrona, executar direto no escopo global
+			(function () {
+				'use strict';
+
+				// Implementar BlobBuilder usando Blob moderno
+				function BlobBuilderPolyfill() {
+					if (!(this instanceof BlobBuilderPolyfill)) {
+						return new BlobBuilderPolyfill();
+					}
+					this.parts = [];
+				}
+
+				BlobBuilderPolyfill.prototype.append = function (data) {
+					if (data instanceof Blob) {
+						this.parts.push(data);
+					} else if (typeof data === 'string') {
+						this.parts.push(data);
+					} else {
+						this.parts.push(new Blob([data]));
+					}
+				};
+
+				BlobBuilderPolyfill.prototype.getBlob = function (contentType) {
+					return new Blob(this.parts, contentType ? { type: contentType } : undefined);
+				};
+
+				// Função para aplicar o polyfill em todos os contextos possíveis
+				function aplicarPolyfillBlobBuilder() {
+					// Aplicar no window (se disponível)
+					if (typeof window !== 'undefined') {
+						if (!window.BlobBuilder) {
+							window.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!window.WebKitBlobBuilder) {
+							window.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!window.MozBlobBuilder) {
+							window.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!window.MSBlobBuilder) {
+							window.MSBlobBuilder = BlobBuilderPolyfill;
+						}
+					}
+
+					// Aplicar no globalThis (se disponível)
+					if (typeof globalThis !== 'undefined') {
+						if (!globalThis.BlobBuilder) {
+							globalThis.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!globalThis.WebKitBlobBuilder) {
+							globalThis.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!globalThis.MozBlobBuilder) {
+							globalThis.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+					}
+
+					// Aplicar no self (para workers)
+					if (typeof self !== 'undefined') {
+						if (!self.BlobBuilder) {
+							self.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!self.WebKitBlobBuilder) {
+							self.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!self.MozBlobBuilder) {
+							self.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+					}
+
+					// Aplicar no global (Node.js)
+					if (typeof global !== 'undefined') {
+						if (!global.BlobBuilder) {
+							global.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!global.WebKitBlobBuilder) {
+							global.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!global.MozBlobBuilder) {
+							global.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+					}
+				}
+
+				// Aplicar imediatamente
+				aplicarPolyfillBlobBuilder();
+
+				// Aplicar também quando o DOM estiver pronto (caso window não esteja disponível ainda)
+				if (typeof document !== 'undefined' && document.readyState === 'loading') {
+					document.addEventListener('DOMContentLoaded', aplicarPolyfillBlobBuilder, { once: true });
+				}
+
+				// Log apenas se console está disponível
+				if (typeof console !== 'undefined' && console.log) {
+					console.log('✅ Polyfill BlobBuilder adicionado globalmente (via app.html)');
+				}
+			})();
+
+			// Aplicar tema padrão imediatamente se não houver tema definido
+			(function () {
+				if (typeof document !== 'undefined') {
+					var html = document.documentElement;
+					if (html && !html.getAttribute('data-theme')) {
+						var tema = null;
+						try {
+							// theme-change usa por padrão a chave "theme"
+							tema = localStorage.getItem('theme');
+						} catch (e) {
+							tema = null;
+						}
+
+						// Fallback para o tema padrão se não houver persistência
+						html.setAttribute('data-theme', tema || 'aqua');
+					}
+				}
+			})();
+		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

apps/web/src/hooks.server.ts

@@ -1,9 +1,177 @@
-import type { Handle } from "@sveltejs/kit";
-
-// Middleware desabilitado - proteção de rotas feita no lado do cliente
-// para compatibilidade com localStorage do authStore
+import type { Handle, HandleServerError } from '@sveltejs/kit';
+import { createAuth } from '@sgse-app/backend/convex/auth';
+import { getToken, createConvexHttpClient } from '@mmailaender/convex-better-auth-svelte/sveltekit';
+import { api } from '@sgse-app/backend/convex/_generated/api';
 
 export const handle: Handle = async ({ event, resolve }) => {
-  return resolve(event);
+	event.locals.token = await getToken(createAuth, event.cookies);
+
+	// Enforcement para endpoints sensíveis (antes de chegar nas rotas)
+	// - Foco: /api/auth/* (login, logout, etc.)
+	// - Aplica blacklist + rate limit configuráveis via Convex
+	const pathname = event.url.pathname;
+	if (pathname.startsWith('/api/auth/')) {
+		const token = event.locals.token;
+		const client = createConvexHttpClient({ token: token || undefined });
+
+		// Preferir X-Forwarded-For quando existir (proxy), senão fallback do adapter
+		const forwardedFor = event.request.headers.get('x-forwarded-for');
+		const ip =
+			forwardedFor?.split(',')[0]?.trim() ||
+			event.request.headers.get('x-real-ip') ||
+			event.getClientAddress();
+
+		try {
+			// 1) Enforcement básico (blacklist + rate limit)
+			const enforcement = await client.mutation(api.security.enforceRequest, {
+				ip,
+				path: pathname,
+				method: event.request.method
+			});
+
+			if (!enforcement.allowed) {
+				const headers = new Headers({ 'Content-Type': 'application/json' });
+				if (enforcement.retryAfterMs) {
+					headers.set('Retry-After', String(Math.ceil(enforcement.retryAfterMs / 1000)));
+				}
+				return new Response(JSON.stringify(enforcement), { status: enforcement.status, headers });
+			}
+
+			// 2) Análise de ataques e bloqueio automático
+			// Extrair dados da requisição para análise
+			const headers: Record<string, string> = {};
+			event.request.headers.forEach((value, key) => {
+				headers[key] = value;
+			});
+
+			const queryParams: Record<string, string> = {};
+			event.url.searchParams.forEach((value, key) => {
+				queryParams[key] = value;
+			});
+
+			let body: string | undefined;
+			try {
+				// Tentar ler body apenas se for POST/PUT/PATCH
+				if (['POST', 'PUT', 'PATCH'].includes(event.request.method)) {
+					const clonedRequest = event.request.clone();
+					body = await clonedRequest.text();
+				}
+			} catch {
+				// Ignorar erros ao ler body
+			}
+
+			const analise = await client.mutation(api.security.analisarRequisicaoHTTP, {
+				url: pathname + event.url.search,
+				method: event.request.method,
+				headers,
+				body,
+				queryParams,
+				ipOrigem: ip,
+				userAgent: event.request.headers.get('user-agent') ?? undefined
+			});
+
+			// Se ataque detectado e bloqueio automático aplicado, retornar 403
+			if (analise.ataqueDetectado && analise.bloqueadoAutomatico) {
+				return new Response(
+					JSON.stringify({
+						error: 'Acesso negado',
+						reason: 'ataque_detectado',
+						tipoAtaque: analise.tipoAtaque,
+						severidade: analise.severidade
+					}),
+					{
+						status: 403,
+						headers: { 'Content-Type': 'application/json' }
+					}
+				);
+			}
+		} catch (err) {
+			// Se o enforcement falhar, não bloquear login (fail-open),
+			// mas registrar erro para observabilidade via handleError (se ocorrer)
+			console.error('❌ Falha no enforcement de segurança:', err);
+		}
+	}
+
+	return resolve(event);
 };
 
+export const handleError: HandleServerError = async ({ error, event, status, message }) => {
+	// Notificar erros 404 e 500+ (erros internos do servidor)
+	if (status === 404 || status === 500 || status >= 500) {
+		// Evitar loop infinito: não registrar erros relacionados à própria página de erros
+		const urlPath = event.url.pathname;
+		if (urlPath.includes('/ti/erros-servidor')) {
+			console.warn(
+				`⚠️ Erro na página de erros do servidor (${status}): Não será registrado para evitar loop.`
+			);
+		} else {
+			try {
+				// Obter token do usuário (se autenticado)
+				const token = event.locals.token;
+
+				// Criar cliente Convex para chamar a action
+				const client = createConvexHttpClient({
+					token: token || undefined
+				});
+
+				// Extrair informações do erro
+				const errorMessage = error instanceof Error ? error.message : String(error);
+				const errorStack = error instanceof Error ? error.stack : undefined;
+				const url = event.url.toString();
+				const method = event.request.method;
+				const ipAddress = event.getClientAddress();
+				const userAgent = event.request.headers.get('user-agent') || undefined;
+
+				// Log para debug
+				console.log(`📝 Registrando erro ${status} no servidor:`, {
+					url,
+					method,
+					mensagem: errorMessage.substring(0, 100)
+				});
+
+				// Chamar action para registrar e notificar erro
+				// Aguardar a promise mas não bloquear a resposta se falhar
+				try {
+					// Usar Promise.race com timeout para evitar bloquear a resposta
+					const actionPromise = client.action(api.errosServidor.registrarErroServidor, {
+						statusCode: status,
+						mensagem: errorMessage,
+						stack: errorStack,
+						url,
+						method,
+						ipAddress,
+						userAgent,
+						usuarioId: undefined // Pode ser implementado depois para obter do token
+					});
+
+					// Timeout de 3 segundos
+					const timeoutPromise = new Promise<never>((_, reject) => {
+						setTimeout(() => reject(new Error('Timeout ao registrar erro')), 3000);
+					});
+
+					const resultado = await Promise.race([actionPromise, timeoutPromise]);
+					console.log(`✅ Erro ${status} registrado com sucesso:`, resultado);
+				} catch (actionError) {
+					// Log do erro de notificação, mas não falhar a resposta
+					console.error(
+						`❌ Erro ao registrar notificação de erro ${status}:`,
+						actionError instanceof Error ? actionError.message : actionError
+					);
+				}
+			} catch (err) {
+				// Se falhar ao criar cliente ou chamar action, apenas logar
+				// Não queremos que falhas na notificação quebrem a resposta de erro
+				console.error(
+					`❌ Erro ao tentar notificar equipe técnica sobre erro ${status}:`,
+					err instanceof Error ? err.message : err
+				);
+			}
+		}
+	}
+
+	// Retornar mensagem de erro padrão
+	return {
+		message: message || 'Erro interno do servidor',
+		status
+	};
+};

apps/web/src/lib/auth.ts

@@ -1,21 +1,18 @@
 /**
  * Cliente Better Auth para frontend SvelteKit
- * 
+ *
  * Configurado para trabalhar com Convex via plugin convexClient.
  * Este cliente será usado para autenticação quando Better Auth estiver ativo.
  */
-import { createAuthClient } from "better-auth/svelte";
-import { convexClient } from "@convex-dev/better-auth/client/plugins";
 
+import { createAuthClient } from 'better-auth/svelte';
+import { convexClient } from '@convex-dev/better-auth/client/plugins';
+
+// O baseURL deve apontar para o frontend (SvelteKit), não para o Convex diretamente
+// O Better Auth usa as rotas HTTP do Convex que são acessadas via proxy do SvelteKit
+// ou diretamente se configurado. Com o plugin convexClient, o token é gerenciado automaticamente.
 export const authClient = createAuthClient({
-  // Base URL da API Better Auth (mesma do app)
-  baseURL: typeof window !== "undefined" 
-    ? window.location.origin  // Usar origem atual em produção
-    : "http://localhost:5173", // Fallback para desenvolvimento
-  plugins: [
-    // Plugin Convex integra Better Auth com Convex backend
-    convexClient({
-      convexUrl: import.meta.env.PUBLIC_CONVEX_URL || "",
-    }),
-  ],
+	// baseURL padrão é window.location.origin, que é o correto para SvelteKit
+	// O Better Auth será acessado via rotas HTTP do Convex registradas em http.ts
+	plugins: [convexClient()]
 });

apps/web/src/lib/components/ActionGuard.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import { loginModalStore } from "$lib/stores/loginModal.svelte";
-  import { AlertTriangle } from "lucide-svelte";
-
-  interface Props {
-    recurso: string;
-    acao: string;
-    children?: any;
-  }
-
-  let { recurso, acao, children }: Props = $props();
-
-  let verificando = $state(true);
-  let permitido = $state(false);
-
-  const permissaoQuery = $derived(
-    authStore.usuario
-      ? useQuery(api.permissoesAcoes.verificarAcao, {
-          usuarioId: authStore.usuario._id as Id<"usuarios">,
-          recurso,
-          acao,
-        })
-      : null
-  );
-
-  $effect(() => {
-    if (!authStore.autenticado) {
-      verificando = false;
-      permitido = false;
-      const currentPath = window.location.pathname;
-      loginModalStore.open(currentPath);
-      return;
-    }
-
-    if (permissaoQuery?.error) {
-      verificando = false;
-      permitido = false;
-    } else if (permissaoQuery && !permissaoQuery.isLoading) {
-      // Backend retorna null quando permitido
-      verificando = false;
-      permitido = true;
-    }
-  });
-</script>
-
-{#if verificando}
-  <div class="flex items-center justify-center min-h-screen">
-    <div class="text-center">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-      <p class="mt-4 text-base-content/70">Verificando permissões...</p>
-    </div>
-  </div>
-{:else if permitido}
-  {@render children?.()}
-{:else}
-  <div class="flex items-center justify-center min-h-screen">
-    <div class="text-center">
-      <div class="p-4 bg-error/10 rounded-full inline-block mb-4">
-        <AlertTriangle class="h-16 w-16 text-error" strokeWidth={2} />
-      </div>
-      <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
-      <p class="text-base-content/70">
-        Você não tem permissão para acessar esta ação.
-      </p>
-    </div>
-  </div>
-{/if}

apps/web/src/lib/components/AlertModal.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { Info, X } from 'lucide-svelte';
+
+	interface Props {
+		open: boolean;
+		title?: string;
+		message: string;
+		buttonText?: string;
+		onClose: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title = 'Atenção',
+		message,
+		buttonText = 'OK',
+		onClose
+	}: Props = $props();
+
+	function handleClose() {
+		open = false;
+		onClose();
+	}
+</script>
+
+{#if open}
+	<div
+		class="pointer-events-none fixed inset-0 z-[9999]"
+		style="animation: fadeIn 0.2s ease-out;"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-alert-title"
+	>
+		<!-- Backdrop -->
+		<div
+			class="pointer-events-auto absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-200"
+			onclick={handleClose}
+		></div>
+
+		<!-- Modal Box -->
+		<div
+			class="bg-base-100 pointer-events-auto absolute left-1/2 top-1/2 z-10 flex max-h-[90vh] w-full max-w-md transform -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl shadow-2xl transition-all duration-300"
+			style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header -->
+			<div
+				class="border-base-300 from-info/10 to-info/5 flex flex-shrink-0 items-center justify-between border-b bg-linear-to-r px-6 py-4"
+			>
+				<h2 id="modal-alert-title" class="text-info flex items-center gap-2 text-xl font-bold">
+					<Info class="h-6 w-6" strokeWidth={2.5} />
+					{title}
+				</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle btn-ghost hover:bg-base-300"
+					onclick={handleClose}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="modal-scroll flex-1 overflow-y-auto px-6 py-6">
+				<p class="text-base-content text-base leading-relaxed">{message}</p>
+			</div>
+
+			<!-- Footer -->
+			<div class="border-base-300 flex flex-shrink-0 justify-end border-t px-6 py-4">
+				<button class="btn btn-primary" onclick={handleClose}>{buttonText}</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -40%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>
+

apps/web/src/lib/components/AlterarStatusFerias.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { useConvexClient } from 'convex-svelte';
+	import { XCircle, AlertTriangle, X, Clock } from 'lucide-svelte';
+
+	type PeriodoFerias = Doc<'ferias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+		time?: Doc<'times'> | null;
+	};
+
+	interface Props {
+		solicitacao: PeriodoFerias;
+		usuarioId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	const { solicitacao, usuarioId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let processando = $state(false);
+	let erro = $state('');
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info',
+			EmFérias: 'badge-info',
+			Cancelado_RH: 'badge-error'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Data Ajustada e Aprovada',
+			EmFérias: 'Em Férias',
+			Cancelado_RH: 'Cancelado RH'
+		};
+		return textos[status] || status;
+	}
+
+	async function cancelarPorRH() {
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.atualizarStatus, {
+				feriasId: solicitacao._id,
+				novoStatus: 'Cancelado_RH',
+				usuarioId: usuarioId
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function formatarData(data: number) {
+		return new Date(data).toLocaleString('pt-BR');
+	}
+</script>
+
+<div class="card bg-base-100 shadow-xl">
+	<div class="card-body">
+		<div class="mb-4 flex items-start justify-between">
+			<div>
+				<h2 class="card-title text-2xl">
+					{solicitacao.funcionario?.nome || 'Funcionário'}
+				</h2>
+				<p class="text-base-content/70 mt-1 text-sm">
+					Ano de Referência: {solicitacao.anoReferencia}
+				</p>
+			</div>
+			<div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
+				{getStatusTexto(solicitacao.status)}
+			</div>
+		</div>
+
+		<!-- Período Solicitado -->
+		<div class="mt-4">
+			<h3 class="mb-3 text-lg font-semibold">Período Solicitado</h3>
+			<div class="bg-base-200 rounded-lg p-4">
+				<div class="grid grid-cols-3 gap-4 text-sm">
+					<div>
+						<span class="text-base-content/70">Início:</span>
+						<span class="ml-1 font-semibold"
+							>{new Date(solicitacao.dataInicio).toLocaleDateString('pt-BR')}</span
+						>
+					</div>
+					<div>
+						<span class="text-base-content/70">Fim:</span>
+						<span class="ml-1 font-semibold"
+							>{new Date(solicitacao.dataFim).toLocaleDateString('pt-BR')}</span
+						>
+					</div>
+					<div>
+						<span class="text-base-content/70">Dias:</span>
+						<span class="text-primary ml-1 font-bold">{solicitacao.diasFerias}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Observações -->
+		{#if solicitacao.observacao}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Observações</h3>
+				<div class="bg-base-200 rounded-lg p-3 text-sm">
+					{solicitacao.observacao}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Histórico -->
+		{#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Histórico</h3>
+				<div class="space-y-1">
+					{#each solicitacao.historicoAlteracoes as hist (hist.data)}
+						<div class="text-base-content/70 flex items-center gap-2 text-xs">
+							<Clock class="h-3 w-3" strokeWidth={2} />
+							<span>{formatarData(hist.data)}</span>
+							<span>-</span>
+							<span>{hist.acao}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Ação: Cancelar por RH -->
+		{#if solicitacao.status !== 'Cancelado_RH'}
+			<div class="divider mt-6"></div>
+			<div class="alert alert-warning">
+				<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" />
+				<div>
+					<h3 class="font-bold">Cancelar Férias</h3>
+					<div class="text-sm">
+						Ao cancelar as férias, o status será alterado para "Cancelado RH" e a solicitação não
+						poderá mais ser processada.
+					</div>
+				</div>
+			</div>
+
+			<div class="card-actions mt-4 justify-end">
+				<button
+					type="button"
+					class="btn btn-error gap-2"
+					onclick={cancelarPorRH}
+					disabled={processando}
+				>
+					<X class="h-5 w-5" strokeWidth={2} />
+					Cancelar Férias (RH)
+				</button>
+			</div>
+		{:else}
+			<div class="divider mt-6"></div>
+			<div class="alert alert-error">
+				<XCircle class="h-6 w-6 shrink-0 stroke-current" />
+				<span>Esta solicitação já foi cancelada pelo RH.</span>
+			</div>
+		{/if}
+
+		<!-- Motivo Reprovação (se reprovado) -->
+		{#if solicitacao.status === 'reprovado' && solicitacao.motivoReprovacao}
+			<div class="alert alert-error mt-4">
+				<XCircle class="h-6 w-6 shrink-0 stroke-current" />
+				<div>
+					<div class="font-bold">Motivo da Reprovação:</div>
+					<div class="text-sm">{solicitacao.motivoReprovacao}</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<XCircle class="h-6 w-6 shrink-0 stroke-current" />
+				<span>{erro}</span>
+			</div>
+		{/if}
+
+		<!-- Botão Fechar -->
+		{#if onCancelar}
+			<div class="card-actions mt-4 justify-end">
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Cancelar
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>

apps/web/src/lib/components/AnimatedBackgroundElements.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class={['absolute inset-0 h-full w-full', className]}>
+	<div
+		class="bg-primary/20 absolute top-[-10%] left-[-10%] h-[40%] w-[40%] animate-pulse rounded-full blur-[120px]"
+	></div>
+	<div
+		class="bg-secondary/20 absolute right-[-10%] bottom-[-10%] h-[40%] w-[40%] animate-pulse rounded-full blur-[120px] delay-700"
+	></div>
+</div>

apps/web/src/lib/components/AprovarAusencias.svelte

@@ -1,398 +1,424 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ErrorModal from "./ErrorModal.svelte";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { useConvexClient } from 'convex-svelte';
+	import ErrorModal from './ErrorModal.svelte';
+	import UserAvatar from './chat/UserAvatar.svelte';
+	import { Calendar, FileText, XCircle, X, Check, Clock, User, Info } from 'lucide-svelte';
+	import { parseLocalDate } from '$lib/utils/datas';
 
-  type SolicitacaoAusencia = Doc<"solicitacoesAusencias"> & {
-    funcionario?: Doc<"funcionarios"> | null;
-    gestor?: Doc<"usuarios"> | null;
-    time?: Doc<"times"> | null;
-  };
+	type SolicitacaoAusencia = Doc<'solicitacoesAusencias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+		time?: Doc<'times'> | null;
+	};
 
-  interface Props {
-    solicitacao: SolicitacaoAusencia;
-    gestorId: Id<"usuarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		solicitacao: SolicitacaoAusencia;
+		gestorId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
+	const { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let motivoReprovacao = $state("");
-  let processando = $state(false);
-  let erro = $state("");
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
+	let motivoReprovacao = $state('');
+	let processando = $state(false);
+	let erro = $state('');
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = parseLocalDate(dataInicio);
+		const fim = parseLocalDate(dataFim);
+		const diff = fim.getTime() - inicio.getTime();
+		return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  const totalDias = $derived(
-    calcularDias(solicitacao.dataInicio, solicitacao.dataFim)
-  );
+	let totalDias = $derived(calcularDias(solicitacao.dataInicio, solicitacao.dataFim));
 
-  async function aprovar() {
-    try {
-      processando = true;
-      erro = "";
-      mostrarModalErro = false;
+	async function aprovar() {
+		try {
+			processando = true;
+			erro = '';
+			mostrarModalErro = false;
 
-      await client.mutation(api.ausencias.aprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-      });
+			await client.mutation(api.ausencias.aprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId
+			});
 
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      const mensagemErro = e instanceof Error ? e.message : String(e);
-      
-      // Verificar se é erro de permissão
-      if (mensagemErro.includes("permissão") || mensagemErro.includes("permission") || mensagemErro.includes("Você não tem permissão")) {
-        mensagemErroModal = "Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
-        mostrarModalErro = true;
-      } else {
-        erro = mensagemErro;
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			const mensagemErro = e instanceof Error ? e.message : String(e);
 
-  async function reprovar() {
-    if (!motivoReprovacao.trim()) {
-      erro = "Informe o motivo da reprovação";
-      return;
-    }
+			// Verificar se é erro de permissão
+			if (
+				mensagemErro.includes('permissão') ||
+				mensagemErro.includes('permission') ||
+				mensagemErro.includes('Você não tem permissão')
+			) {
+				mensagemErroModal =
+					'Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.';
+				mostrarModalErro = true;
+			} else {
+				erro = mensagemErro;
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-    try {
-      processando = true;
-      erro = "";
-      mostrarModalErro = false;
+	async function reprovar() {
+		if (!motivoReprovacao.trim()) {
+			erro = 'Informe o motivo da reprovação';
+			return;
+		}
 
-      await client.mutation(api.ausencias.reprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        motivoReprovacao: motivoReprovacao.trim(),
-      });
+		try {
+			processando = true;
+			erro = '';
+			mostrarModalErro = false;
 
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      const mensagemErro = e instanceof Error ? e.message : String(e);
-      
-      // Verificar se é erro de permissão
-      if (mensagemErro.includes("permissão") || mensagemErro.includes("permission") || mensagemErro.includes("Você não tem permissão")) {
-        mensagemErroModal = "Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
-        mostrarModalErro = true;
-      } else {
-        erro = mensagemErro;
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			await client.mutation(api.ausencias.reprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				motivoReprovacao: motivoReprovacao.trim()
+			});
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-  }
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			const mensagemErro = e instanceof Error ? e.message : String(e);
 
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
+			// Verificar se é erro de permissão
+			if (
+				mensagemErro.includes('permissão') ||
+				mensagemErro.includes('permission') ||
+				mensagemErro.includes('Você não tem permissão')
+			) {
+				mensagemErroModal =
+					'Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.';
+				mostrarModalErro = true;
+			} else {
+				erro = mensagemErro;
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando Aprovação",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+	}
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado'
+		};
+		return textos[status] || status;
+	}
 </script>
 
 <div class="aprovar-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <h2 class="text-3xl font-bold text-primary mb-2">Aprovar/Reprovar Ausência</h2>
-    <p class="text-base-content/70">Analise a solicitação e tome uma decisão</p>
-  </div>
+	<!-- Header -->
+	<div class="mb-4">
+		<h2 class="text-primary mb-1 text-2xl font-bold">Aprovar/Reprovar Ausência</h2>
+		<p class="text-base-content/70 text-sm">Analise a solicitação e tome uma decisão</p>
+	</div>
 
-  <!-- Card Principal -->
-  <div class="card bg-base-100 shadow-2xl border-t-4 border-orange-500">
-    <div class="card-body">
-      <!-- Informações do Funcionário -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            />
-          </svg>
-          Funcionário
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <p class="text-sm text-base-content/70">Nome</p>
-            <p class="font-bold text-lg">{solicitacao.funcionario?.nome || "N/A"}</p>
-          </div>
-          {#if solicitacao.time}
-            <div>
-              <p class="text-sm text-base-content/70">Time</p>
-              <div
-                class="badge badge-lg font-semibold"
-                style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time.cor}; color: {solicitacao.time.cor}"
-              >
-                {solicitacao.time.nome}
-              </div>
-            </div>
-          {/if}
-        </div>
-      </div>
+	<!-- Card Principal -->
+	<div class="card bg-base-100 border-primary border-t-4 shadow-2xl">
+		<div class="card-body p-4 md:p-6">
+			<!-- Informações do Funcionário -->
+			<div class="mb-4">
+				<h3 class="text-primary mb-3 flex items-center gap-2 text-lg font-bold">
+					<div class="bg-primary/10 rounded-lg p-1.5">
+						<User class="text-primary h-5 w-5" strokeWidth={2} />
+					</div>
+					Funcionário
+				</h3>
+				<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+					<div class="bg-base-200/50 hover:bg-base-200 rounded-lg p-3 transition-all">
+						<p class="text-base-content/60 mb-1.5 text-xs font-semibold tracking-wide uppercase">
+							Nome
+						</p>
+						<div class="flex items-center gap-2">
+							<UserAvatar
+								fotoPerfilUrl={solicitacao.funcionario?.fotoPerfilUrl}
+								nome={solicitacao.funcionario?.nome || 'N/A'}
+								size="sm"
+							/>
+							<p class="text-base-content text-base font-bold truncate">
+								{solicitacao.funcionario?.nome || 'N/A'}
+							</p>
+						</div>
+					</div>
+					{#if solicitacao.time}
+						<div class="bg-base-200/50 hover:bg-base-200 rounded-lg p-3 transition-all">
+							<p class="text-base-content/60 mb-1.5 text-xs font-semibold tracking-wide uppercase">
+								Time
+							</p>
+							<div
+								class="badge badge-sm font-semibold max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+								style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time
+									.cor}; color: {solicitacao.time.cor}"
+								title={solicitacao.time.nome}
+							>
+								{solicitacao.time.nome}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
 
-      <div class="divider"></div>
+			<div class="divider my-4"></div>
 
-      <!-- Período da Ausência -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-            />
-          </svg>
-          Período da Ausência
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div class="stat bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30">
-            <div class="stat-title">Data Início</div>
-            <div class="stat-value text-orange-600 dark:text-orange-400 text-2xl">
-              {new Date(solicitacao.dataInicio).toLocaleDateString("pt-BR")}
-            </div>
-          </div>
-          <div class="stat bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30">
-            <div class="stat-title">Data Fim</div>
-            <div class="stat-value text-orange-600 dark:text-orange-400 text-2xl">
-              {new Date(solicitacao.dataFim).toLocaleDateString("pt-BR")}
-            </div>
-          </div>
-          <div class="stat bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30">
-            <div class="stat-title">Total de Dias</div>
-            <div class="stat-value text-orange-600 dark:text-orange-400 text-3xl">
-              {totalDias}
-            </div>
-            <div class="stat-desc">dias corridos</div>
-          </div>
-        </div>
-      </div>
+			<!-- Período da Ausência -->
+			<div class="mb-4">
+				<h3 class="text-primary mb-3 flex items-center gap-2 text-lg font-bold">
+					<div class="bg-primary/10 rounded-lg p-1.5">
+						<Calendar class="text-primary h-5 w-5" strokeWidth={2} />
+					</div>
+					Período da Ausência
+				</h3>
+				<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+					<div
+						class="stat border-primary/20 from-primary/5 to-primary/10 hover:border-primary/30 rounded-lg border-2 bg-gradient-to-br shadow-md transition-all hover:shadow-lg p-3"
+					>
+						<div class="stat-title text-base-content/70 text-xs">Data Início</div>
+						<div class="stat-value text-primary text-lg font-bold">
+							{parseLocalDate(solicitacao.dataInicio).toLocaleDateString('pt-BR')}
+						</div>
+					</div>
+					<div
+						class="stat border-primary/20 from-primary/5 to-primary/10 hover:border-primary/30 rounded-lg border-2 bg-gradient-to-br shadow-md transition-all hover:shadow-lg p-3"
+					>
+						<div class="stat-title text-base-content/70 text-xs">Data Fim</div>
+						<div class="stat-value text-primary text-lg font-bold">
+							{parseLocalDate(solicitacao.dataFim).toLocaleDateString('pt-BR')}
+						</div>
+					</div>
+					<div
+						class="stat border-primary/30 from-primary/10 to-primary/15 hover:border-primary/40 rounded-lg border-2 bg-gradient-to-br shadow-md transition-all hover:shadow-lg p-3"
+					>
+						<div class="stat-title text-base-content/70 text-xs">Total de Dias</div>
+						<div class="stat-value text-primary text-2xl font-bold">
+							{totalDias}
+						</div>
+						<div class="stat-desc text-base-content/60 text-xs">dias corridos</div>
+					</div>
+				</div>
+			</div>
 
-      <div class="divider"></div>
+			<div class="divider my-4"></div>
 
-      <!-- Motivo -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-          Motivo da Ausência
-        </h3>
-        <div class="card bg-base-200">
-          <div class="card-body">
-            <p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
-          </div>
-        </div>
-      </div>
+			<!-- Motivo -->
+			<div class="mb-4">
+				<h3 class="text-primary mb-3 flex items-center gap-2 text-lg font-bold">
+					<div class="bg-primary/10 rounded-lg p-1.5">
+						<FileText class="text-primary h-5 w-5" strokeWidth={2} />
+					</div>
+					Motivo da Ausência
+				</h3>
+				<div class="card border-primary/10 bg-base-200/50 rounded-lg border-2 shadow-sm">
+					<div class="card-body p-3">
+						<p class="text-base-content text-sm leading-relaxed whitespace-pre-wrap">
+							{solicitacao.motivo}
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <!-- Status Atual -->
-      <div class="mb-6">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-semibold">Status:</span>
-          <div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
-            {getStatusTexto(solicitacao.status)}
-          </div>
-        </div>
-      </div>
+			<!-- Status Atual -->
+			<div class="bg-base-200/30 mb-4 rounded-lg p-3">
+				<div class="flex items-center gap-2">
+					<span class="text-base-content/70 text-xs font-semibold tracking-wide uppercase"
+						>Status:</span
+					>
+					<div class={`badge badge-sm ${getStatusBadge(solicitacao.status)}`}>
+						{getStatusTexto(solicitacao.status)}
+					</div>
+				</div>
+			</div>
 
-      <!-- Erro -->
-      {#if erro}
-        <div class="alert alert-error mb-4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <span>{erro}</span>
-        </div>
-      {/if}
+			<!-- Informações de Aprovação/Reprovação -->
+			{#if solicitacao.status === 'aprovado'}
+				<div class="alert alert-success mb-4 shadow-lg py-3">
+					<Check class="h-5 w-5 shrink-0 stroke-current" strokeWidth={2} />
+					<div class="flex-1">
+						<div class="font-bold text-sm">Aprovado</div>
+						{#if solicitacao.gestor}
+							<div class="text-xs mt-1">
+								Por: <strong>{solicitacao.gestor.nome}</strong>
+							</div>
+						{/if}
+						{#if solicitacao.dataAprovacao}
+							<div class="text-xs mt-1 opacity-80">
+								Em: {new Date(solicitacao.dataAprovacao).toLocaleString('pt-BR')}
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
 
-      <!-- Ações -->
-      {#if solicitacao.status === "aguardando_aprovacao"}
-        <div class="card-actions justify-end gap-4 mt-6">
-          <button
-            type="button"
-            class="btn btn-error btn-lg gap-2"
-            onclick={reprovar}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            {/if}
-            Reprovar
-          </button>
-          <button
-            type="button"
-            class="btn btn-success btn-lg gap-2"
-            onclick={aprovar}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-            {/if}
-            Aprovar
-          </button>
-        </div>
+			{#if solicitacao.status === 'reprovado'}
+				<div class="alert alert-error mb-4 shadow-lg py-3">
+					<XCircle class="h-5 w-5 shrink-0 stroke-current" strokeWidth={2} />
+					<div class="flex-1">
+						<div class="font-bold text-sm">Reprovado</div>
+						{#if solicitacao.gestor}
+							<div class="text-xs mt-1">
+								Por: <strong>{solicitacao.gestor.nome}</strong>
+							</div>
+						{/if}
+						{#if solicitacao.dataReprovacao}
+							<div class="text-xs mt-1 opacity-80">
+								Em: {new Date(solicitacao.dataReprovacao).toLocaleString('pt-BR')}
+							</div>
+						{/if}
+						{#if solicitacao.motivoReprovacao}
+							<div class="mt-2">
+								<div class="text-xs font-semibold">Motivo:</div>
+								<div class="text-xs">{solicitacao.motivoReprovacao}</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
 
-        <!-- Modal de Reprovação -->
-        {#if motivoReprovacao !== undefined}
-          <div class="mt-4">
-            <div class="form-control">
-              <label class="label" for="motivo-reprovacao">
-                <span class="label-text font-bold">Motivo da Reprovação</span>
-              </label>
-              <textarea
-                id="motivo-reprovacao"
-                class="textarea textarea-bordered h-24"
-                placeholder="Informe o motivo da reprovação..."
-                bind:value={motivoReprovacao}
-              ></textarea>
-            </div>
-          </div>
-        {/if}
-      {:else}
-        <div class="alert alert-info">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-current shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <span>Esta solicitação já foi processada.</span>
-        </div>
-      {/if}
+			<!-- Histórico de Alterações -->
+			{#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
+				<div class="mb-4">
+					<h3 class="text-primary mb-3 flex items-center gap-2 text-lg font-bold">
+						<div class="bg-primary/10 rounded-lg p-1.5">
+							<Clock class="text-primary h-5 w-5" strokeWidth={2} />
+						</div>
+						Histórico de Alterações
+					</h3>
+					<div class="card border-primary/10 bg-base-200/50 rounded-lg border-2 shadow-sm">
+						<div class="card-body p-3">
+							<div class="space-y-2">
+								{#each solicitacao.historicoAlteracoes as hist}
+									<div class="border-base-300 flex items-start gap-2 border-b pb-2 last:border-0 last:pb-0">
+										<Clock class="text-primary mt-0.5 h-3.5 w-3.5 shrink-0" strokeWidth={2} />
+										<div class="flex-1">
+											<div class="text-base-content text-xs font-semibold">{hist.acao}</div>
+											<div class="text-base-content/60 text-xs">
+												{new Date(hist.data).toLocaleString('pt-BR')}
+											</div>
+										</div>
+									</div>
+								{/each}
+							</div>
+						</div>
+					</div>
+				</div>
+			{/if}
 
-      <!-- Botão Cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Fechar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Erro -->
+			{#if erro}
+				<div class="alert alert-error mb-4 shadow-lg py-3">
+					<XCircle class="h-5 w-5 shrink-0 stroke-current" />
+					<span class="text-sm">{erro}</span>
+				</div>
+			{/if}
+
+			<!-- Ações -->
+			{#if solicitacao.status === 'aguardando_aprovacao'}
+				<div class="card-actions mt-4 justify-end gap-2 flex-wrap">
+					<button
+						type="button"
+						class="btn btn-error btn-sm md:btn-md gap-2"
+						onclick={reprovar}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{:else}
+							<X class="h-4 w-4" strokeWidth={2} />
+						{/if}
+						Reprovar
+					</button>
+					<button
+						type="button"
+						class="btn btn-success btn-sm md:btn-md gap-2"
+						onclick={aprovar}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{:else}
+							<Check class="h-4 w-4" strokeWidth={2} />
+						{/if}
+						Aprovar
+					</button>
+				</div>
+
+				<!-- Modal de Reprovação -->
+				{#if motivoReprovacao !== undefined}
+					<div class="border-error/20 bg-error/5 mt-4 rounded-lg border-2 p-3">
+						<div class="form-control">
+							<label class="label py-1" for="motivo-reprovacao">
+								<span class="label-text text-error text-sm font-bold">Motivo da Reprovação</span>
+							</label>
+							<textarea
+								id="motivo-reprovacao"
+								class="textarea textarea-bordered textarea-sm focus:border-error focus:outline-error h-20"
+								placeholder="Informe o motivo da reprovação..."
+								bind:value={motivoReprovacao}
+							></textarea>
+						</div>
+					</div>
+				{/if}
+			{:else}
+				<div class="alert alert-info shadow-lg py-3">
+					<Info class="h-5 w-5 shrink-0 stroke-current" strokeWidth={2} />
+					<span class="text-sm">Esta solicitação já foi processada.</span>
+				</div>
+			{/if}
+
+			<!-- Botão Cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn btn-ghost btn-sm"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Fechar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Erro de Permissão"
-  message={mensagemErroModal || "Você não tem permissão para realizar esta ação."}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Erro de Permissão"
+	message={mensagemErroModal || 'Você não tem permissão para realizar esta ação.'}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .aprovar-ausencia {
-    max-width: 900px;
-    margin: 0 auto;
-  }
+	.aprovar-ausencia {
+		max-width: 100%;
+		margin: 0 auto;
+	}
 </style>
-

apps/web/src/lib/components/AprovarFerias.svelte

@@ -1,384 +1,477 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-  
-  interface Periodo {
-    dataInicio: string;
-    dataFim: string;
-    diasCorridos: number;
-  }
-  
-  type SolicitacaoFerias = Doc<"solicitacoesFerias"> & {
-    funcionario?: Doc<"funcionarios"> | null;
-    gestor?: Doc<"usuarios"> | null;
-  };
-  
-  interface Props {
-    solicitacao: SolicitacaoFerias;
-    gestorId: Id<"usuarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
-  
-  let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
-  
-  const client = useConvexClient();
-  
-  let modoAjuste = $state(false);
-  let periodos = $state<Periodo[]>([]);
-  let motivoReprovacao = $state("");
-  let processando = $state(false);
-  let erro = $state("");
-  
-  $effect(() => {
-    if (modoAjuste && periodos.length === 0) {
-      periodos = solicitacao.periodos.map((p) => ({...p}));
-    }
-  });
-  
-  function calcularDias(periodo: Periodo) {
-    if (!periodo.dataInicio || !periodo.dataFim) {
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const inicio = new Date(periodo.dataInicio);
-    const fim = new Date(periodo.dataFim);
-    
-    if (fim < inicio) {
-      erro = "Data final não pode ser anterior à data inicial";
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const diff = fim.getTime() - inicio.getTime();
-    const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-    periodo.diasCorridos = dias;
-    erro = "";
-  }
-  
-  async function aprovar() {
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.aprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  async function reprovar() {
-    if (!motivoReprovacao.trim()) {
-      erro = "Informe o motivo da reprovação";
-      return;
-    }
-    
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.reprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        motivoReprovacao,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  async function ajustarEAprovar() {
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.ajustarEAprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        novosPeriodos: periodos,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-      data_ajustada_aprovada: "badge-info",
-    };
-    return badges[status] || "badge-neutral";
-  }
-  
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando Aprovação",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-      data_ajustada_aprovada: "Data Ajustada e Aprovada",
-    };
-    return textos[status] || status;
-  }
-  
-  function formatarData(data: number) {
-    return new Date(data).toLocaleString("pt-BR");
-  }
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import UserAvatar from './chat/UserAvatar.svelte';
+	import { Clock, Check, Edit, X, XCircle } from 'lucide-svelte';
+	import { useConvexClient } from 'convex-svelte';
+
+	type PeriodoFerias = Doc<'ferias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+		time?: Doc<'times'> | null;
+	};
+
+	interface Props {
+		periodo: PeriodoFerias;
+		gestorId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	const { periodo, gestorId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let modoAjuste = $state(false);
+	let novaDataInicio = $state(periodo.dataInicio);
+	let novaDataFim = $state(periodo.dataFim);
+	let motivoReprovacao = $state('');
+	let processando = $state(false);
+	let erro = $state('');
+
+	// Calcular dias do período ajustado
+	let diasAjustados = $derived.by(() => {
+		if (!novaDataInicio || !novaDataFim) return 0;
+		const inicio = new Date(novaDataInicio);
+		const fim = new Date(novaDataFim);
+		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+		return diffDays;
+	});
+
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		if (!dataInicio || !dataFim) return 0;
+
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+
+		if (fim < inicio) {
+			erro = 'Data final não pode ser anterior à data inicial';
+			return 0;
+		}
+
+		const diff = fim.getTime() - inicio.getTime();
+		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+		erro = '';
+		return dias;
+	}
+
+	async function aprovar() {
+		try {
+			processando = true;
+			erro = '';
+
+			// Validar se as datas e condições estão dentro do regime do funcionário
+			if (!periodo.funcionario?._id) {
+				erro = 'Funcionário não encontrado';
+				processando = false;
+				return;
+			}
+
+			const validacao = await client.query(api.saldoFerias.validarSolicitacao, {
+				funcionarioId: periodo.funcionario._id,
+				anoReferencia: periodo.anoReferencia,
+				periodos: [
+					{
+						dataInicio: periodo.dataInicio,
+						dataFim: periodo.dataFim
+					}
+				],
+				feriasIdExcluir: periodo._id // Excluir este período do cálculo de saldo pendente
+			});
+
+			if (!validacao.valido) {
+				erro = `Não é possível aprovar: ${validacao.erros.join('; ')}`;
+				processando = false;
+				return;
+			}
+
+			await client.mutation(api.ferias.aprovar, {
+				feriasId: periodo._id,
+				gestorId: gestorId
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function reprovar() {
+		if (!motivoReprovacao.trim()) {
+			erro = 'Informe o motivo da reprovação';
+			return;
+		}
+
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.reprovar, {
+				feriasId: periodo._id,
+				gestorId: gestorId,
+				motivoReprovacao
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function ajustarEAprovar() {
+		try {
+			processando = true;
+			erro = '';
+
+			// Validar se as datas ajustadas e condições estão dentro do regime do funcionário
+			if (!periodo.funcionario?._id) {
+				erro = 'Funcionário não encontrado';
+				processando = false;
+				return;
+			}
+
+			// Validar datas ajustadas
+			if (!novaDataInicio || !novaDataFim) {
+				erro = 'Informe as novas datas de início e fim';
+				processando = false;
+				return;
+			}
+
+			const validacao = await client.query(api.saldoFerias.validarSolicitacao, {
+				funcionarioId: periodo.funcionario._id,
+				anoReferencia: periodo.anoReferencia,
+				periodos: [
+					{
+						dataInicio: novaDataInicio,
+						dataFim: novaDataFim
+					}
+				],
+				feriasIdExcluir: periodo._id // Excluir o período original do cálculo de saldo
+			});
+
+			if (!validacao.valido) {
+				erro = `Não é possível aprovar com ajuste: ${validacao.erros.join('; ')}`;
+				processando = false;
+				return;
+			}
+
+			await client.mutation(api.ferias.ajustarEAprovar, {
+				feriasId: periodo._id,
+				gestorId: gestorId,
+				novaDataInicio,
+				novaDataFim
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info',
+			EmFérias: 'badge-info'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Data Ajustada e Aprovada',
+			EmFérias: 'Em Férias'
+		};
+		return textos[status] || status;
+	}
+
+	function formatarData(data: number) {
+		return new Date(data).toLocaleString('pt-BR');
+	}
+
+	// Função para formatar data sem problemas de timezone
+	function formatarDataString(dataString: string): string {
+		if (!dataString) return '';
+		// Dividir a string da data (formato YYYY-MM-DD)
+		const partes = dataString.split('-');
+		if (partes.length !== 3) return dataString;
+		// Retornar no formato DD/MM/YYYY
+		return `${partes[2]}/${partes[1]}/${partes[0]}`;
+	}
+
+	$effect(() => {
+		if (modoAjuste) {
+			novaDataInicio = periodo.dataInicio;
+			novaDataFim = periodo.dataFim;
+		}
+	});
 </script>
 
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <div class="flex items-start justify-between mb-4">
-      <div>
-        <h2 class="card-title text-2xl">
-          {solicitacao.funcionario?.nome || "Funcionário"}
-        </h2>
-        <p class="text-sm text-base-content/70 mt-1">
-          Ano de Referência: {solicitacao.anoReferencia}
-        </p>
-      </div>
-      <div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
-        {getStatusTexto(solicitacao.status)}
-      </div>
-    </div>
-    
-    <!-- Períodos Solicitados -->
-    <div class="mt-4">
-      <h3 class="font-semibold text-lg mb-3">Períodos Solicitados</h3>
-      <div class="space-y-2">
-        {#each solicitacao.periodos as periodo, index}
-          <div class="flex items-center gap-4 p-3 bg-base-200 rounded-lg">
-            <div class="badge badge-primary">{index + 1}</div>
-            <div class="flex-1 grid grid-cols-3 gap-2 text-sm">
-              <div>
-                <span class="text-base-content/70">Início:</span>
-                <span class="font-semibold ml-1">{new Date(periodo.dataInicio).toLocaleDateString("pt-BR")}</span>
-              </div>
-              <div>
-                <span class="text-base-content/70">Fim:</span>
-                <span class="font-semibold ml-1">{new Date(periodo.dataFim).toLocaleDateString("pt-BR")}</span>
-              </div>
-              <div>
-                <span class="text-base-content/70">Dias:</span>
-                <span class="font-bold ml-1 text-primary">{periodo.diasCorridos}</span>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-    
-    <!-- Observações -->
-    {#if solicitacao.observacao}
-      <div class="mt-4">
-        <h3 class="font-semibold mb-2">Observações</h3>
-        <div class="p-3 bg-base-200 rounded-lg text-sm">
-          {solicitacao.observacao}
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Histórico -->
-    {#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
-      <div class="mt-4">
-        <h3 class="font-semibold mb-2">Histórico</h3>
-        <div class="space-y-1">
-          {#each solicitacao.historicoAlteracoes as hist}
-            <div class="text-xs text-base-content/70 flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span>{formatarData(hist.data)}</span>
-              <span>-</span>
-              <span>{hist.acao}</span>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Ações (apenas para status aguardando_aprovacao) -->
-    {#if solicitacao.status === "aguardando_aprovacao"}
-      <div class="divider mt-6"></div>
-      
-      {#if !modoAjuste}
-        <!-- Modo Normal -->
-        <div class="space-y-4">
-          <div class="flex flex-wrap gap-2">
-            <button
-              type="button"
-              class="btn btn-success gap-2"
-              onclick={aprovar}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              Aprovar
-            </button>
-            
-            <button
-              type="button"
-              class="btn btn-info gap-2"
-              onclick={() => modoAjuste = true}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-              </svg>
-              Ajustar Datas e Aprovar
-            </button>
-          </div>
-          
-          <!-- Reprovar -->
-          <div class="card bg-base-200">
-            <div class="card-body p-4">
-              <h4 class="font-semibold text-sm mb-2">Reprovar Solicitação</h4>
-              <textarea
-                class="textarea textarea-bordered textarea-sm mb-2"
-                placeholder="Motivo da reprovação..."
-                bind:value={motivoReprovacao}
-                rows="2"
-              ></textarea>
-              <button
-                type="button"
-                class="btn btn-error btn-sm gap-2"
-                onclick={reprovar}
-                disabled={processando || !motivoReprovacao.trim()}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Reprovar
-              </button>
-            </div>
-          </div>
-        </div>
-      {:else}
-        <!-- Modo Ajuste -->
-        <div class="space-y-4">
-          <h4 class="font-semibold">Ajustar Períodos</h4>
-          {#each periodos as periodo, index}
-            <div class="card bg-base-200">
-              <div class="card-body p-4">
-                <h5 class="font-medium mb-2">Período {index + 1}</h5>
-                <div class="grid grid-cols-3 gap-3">
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-inicio-${index}`}>
-                      <span class="label-text text-xs">Início</span>
-                    </label>
-                    <input
-                      id={`ajuste-inicio-${index}`}
-                      type="date"
-                      class="input input-bordered input-sm"
-                      bind:value={periodo.dataInicio}
-                      onchange={() => calcularDias(periodo)}
-                    />
-                  </div>
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-fim-${index}`}>
-                      <span class="label-text text-xs">Fim</span>
-                    </label>
-                    <input
-                      id={`ajuste-fim-${index}`}
-                      type="date"
-                      class="input input-bordered input-sm"
-                      bind:value={periodo.dataFim}
-                      onchange={() => calcularDias(periodo)}
-                    />
-                  </div>
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-dias-${index}`}>
-                      <span class="label-text text-xs">Dias</span>
-                    </label>
-                    <div id={`ajuste-dias-${index}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
-                      <span class="font-bold">{periodo.diasCorridos}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/each}
-          
-          <div class="flex gap-2">
-            <button
-              type="button"
-              class="btn btn-ghost btn-sm"
-              onclick={() => modoAjuste = false}
-              disabled={processando}
-            >
-              Cancelar Ajuste
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary btn-sm gap-2"
-              onclick={ajustarEAprovar}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              Confirmar e Aprovar
-            </button>
-          </div>
-        </div>
-      {/if}
-    {/if}
-    
-    <!-- Motivo Reprovação (se reprovado) -->
-    {#if solicitacao.status === "reprovado" && solicitacao.motivoReprovacao}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <div>
-          <div class="font-bold">Motivo da Reprovação:</div>
-          <div class="text-sm">{solicitacao.motivoReprovacao}</div>
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Erro -->
-    {#if erro}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span>{erro}</span>
-      </div>
-    {/if}
-    
-    <!-- Botão Fechar -->
-    {#if onCancelar}
-      <div class="card-actions justify-end mt-4">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={onCancelar}
-          disabled={processando}
-        >
-          Fechar
-        </button>
-      </div>
-    {/if}
-  </div>
-</div>
+	<div class="card-body">
+		<div class="mb-4 flex items-start justify-between">
+			<div class="flex items-center gap-3">
+				<UserAvatar
+					fotoPerfilUrl={periodo.funcionario?.fotoPerfilUrl}
+					nome={periodo.funcionario?.nome || 'Funcionário'}
+					size="md"
+				/>
+				<div>
+					<h2 class="card-title text-2xl">
+						{periodo.funcionario?.nome || 'Funcionário'}
+					</h2>
+					<p class="text-base-content/70 mt-1 text-sm">
+						Ano de Referência: {periodo.anoReferencia}
+					</p>
+				</div>
+			</div>
+			<div class={`badge ${getStatusBadge(periodo.status)} badge-lg`}>
+				{getStatusTexto(periodo.status)}
+			</div>
+		</div>
 
+		<!-- Período Solicitado -->
+		<div class="mt-4">
+			<h3 class="mb-3 text-lg font-semibold">Período Solicitado</h3>
+			<div class="bg-base-200 rounded-lg p-4">
+				<div class="grid grid-cols-3 gap-4 text-sm">
+					<div>
+						<span class="text-base-content/70">Início:</span>
+						<span class="ml-1 font-semibold">{formatarDataString(periodo.dataInicio)}</span>
+					</div>
+					<div>
+						<span class="text-base-content/70">Fim:</span>
+						<span class="ml-1 font-semibold">{formatarDataString(periodo.dataFim)}</span>
+					</div>
+					<div>
+						<span class="text-base-content/70">Dias:</span>
+						<span class="text-primary ml-1 font-bold">{periodo.diasFerias}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Observações -->
+		{#if periodo.observacao}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Observações</h3>
+				<div class="bg-base-200 rounded-lg p-3 text-sm">
+					{periodo.observacao}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Histórico -->
+		{#if periodo.historicoAlteracoes && periodo.historicoAlteracoes.length > 0}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Histórico</h3>
+				<div class="space-y-1">
+					{#each periodo.historicoAlteracoes as hist}
+						<div class="text-base-content/70 flex items-center gap-2 text-xs">
+							<Clock class="h-3 w-3" strokeWidth={2} />
+							<span>{formatarData(hist.data)}</span>
+							<span>-</span>
+							<span>{hist.acao}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Ações (apenas para status aguardando_aprovacao) -->
+		{#if periodo.status === 'aguardando_aprovacao'}
+			<div class="divider mt-6"></div>
+
+			{#if !modoAjuste}
+				<!-- Modo Normal -->
+				<div class="space-y-4">
+					<div class="flex flex-wrap gap-2">
+						<button
+							type="button"
+							class="btn btn-success gap-2"
+							onclick={aprovar}
+							disabled={processando}
+						>
+							<Check class="h-5 w-5" strokeWidth={2} />
+							Aprovar
+						</button>
+
+						<button
+							type="button"
+							class="btn btn-info gap-2"
+							onclick={() => (modoAjuste = true)}
+							disabled={processando}
+						>
+							<Edit class="h-5 w-5" strokeWidth={2} />
+							Ajustar Datas e Aprovar
+						</button>
+					</div>
+
+					<!-- Reprovar -->
+					<div class="card bg-base-200">
+						<div class="card-body p-4">
+							<h4 class="mb-2 text-sm font-semibold">Reprovar Período</h4>
+							<textarea
+								class="textarea textarea-bordered textarea-sm mb-2"
+								placeholder="Motivo da reprovação..."
+								bind:value={motivoReprovacao}
+								rows="2"
+							></textarea>
+							<button
+								type="button"
+								class="btn btn-error btn-sm gap-2"
+								onclick={reprovar}
+								disabled={processando || !motivoReprovacao.trim()}
+							>
+								<X class="h-4 w-4" strokeWidth={2} />
+								Reprovar
+							</button>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<!-- Modo Ajuste -->
+				<div class="space-y-4">
+					<h4 class="font-semibold">Ajustar Período</h4>
+					<div class="card bg-base-200">
+						<div class="card-body p-4">
+							<div class="grid grid-cols-3 gap-3">
+								<div class="form-control">
+									<label class="label" for="ajuste-inicio">
+										<span class="label-text text-xs">Início</span>
+									</label>
+									<input
+										id="ajuste-inicio"
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={novaDataInicio}
+									/>
+								</div>
+								<div class="form-control">
+									<label class="label" for="ajuste-fim">
+										<span class="label-text text-xs">Fim</span>
+									</label>
+									<input
+										id="ajuste-fim"
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={novaDataFim}
+									/>
+								</div>
+								<div class="form-control">
+									<label class="label" for="ajuste-dias">
+										<span class="label-text text-xs">Dias</span>
+									</label>
+									<div
+										id="ajuste-dias"
+										class="bg-base-300 flex h-9 items-center rounded-lg px-3"
+										role="textbox"
+										aria-readonly="true"
+									>
+										<span class="font-bold">{diasAjustados}</span>
+										<span class="ml-2 text-xs opacity-70">dias</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex gap-2">
+						<button
+							type="button"
+							class="btn btn-sm"
+							onclick={() => (modoAjuste = false)}
+							disabled={processando}
+						>
+							Cancelar Ajuste
+						</button>
+						<button
+							type="button"
+							class="btn btn-primary btn-sm gap-2"
+							onclick={ajustarEAprovar}
+							disabled={processando || !novaDataInicio || !novaDataFim || diasAjustados <= 0}
+						>
+							<Check class="h-4 w-4" strokeWidth={2} />
+							Confirmar e Aprovar
+						</button>
+					</div>
+				</div>
+			{/if}
+		{/if}
+
+		<!-- Informações de Aprovação/Reprovação -->
+		{#if periodo.status === 'aprovado' || periodo.status === 'data_ajustada_aprovada' || periodo.status === 'EmFérias'}
+			<div class="alert alert-success mt-4">
+				<Check class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+				<div class="flex-1">
+					<div class="font-bold">Aprovado</div>
+					{#if periodo.gestor}
+						<div class="text-sm mt-1">
+							Por: <strong>{periodo.gestor.nome}</strong>
+						</div>
+					{/if}
+					{#if periodo.dataAprovacao}
+						<div class="text-xs mt-1 opacity-80">
+							Em: {formatarData(periodo.dataAprovacao)}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Motivo Reprovação (se reprovado) -->
+		{#if periodo.status === 'reprovado'}
+			<div class="alert alert-error mt-4">
+				<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+				<div class="flex-1">
+					<div class="font-bold">Reprovado</div>
+					{#if periodo.gestor}
+						<div class="text-sm mt-1">
+							Por: <strong>{periodo.gestor.nome}</strong>
+						</div>
+					{/if}
+					{#if periodo.dataReprovacao}
+						<div class="text-xs mt-1 opacity-80">
+							Em: {formatarData(periodo.dataReprovacao)}
+						</div>
+					{/if}
+					{#if periodo.motivoReprovacao}
+						<div class="mt-2">
+							<div class="text-sm font-semibold">Motivo:</div>
+					<div class="text-sm">{periodo.motivoReprovacao}</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<XCircle class="h-6 w-6 shrink-0 stroke-current" />
+				<span>{erro}</span>
+			</div>
+		{/if}
+
+		<!-- Botão Fechar -->
+		{#if onCancelar}
+			<div class="card-actions mt-4 justify-end">
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Fechar
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>

apps/web/src/lib/components/ConfirmModal.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { AlertTriangle, X } from 'lucide-svelte';
+
+	interface Props {
+		open: boolean;
+		title?: string;
+		message: string;
+		confirmText?: string;
+		cancelText?: string;
+		onConfirm: () => void;
+		onCancel: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title = 'Confirmar ação',
+		message,
+		confirmText = 'Confirmar',
+		cancelText = 'Cancelar',
+		onConfirm,
+		onCancel
+	}: Props = $props();
+
+	function handleConfirm() {
+		open = false;
+		onConfirm();
+	}
+
+	function handleCancel() {
+		open = false;
+		onCancel();
+	}
+</script>
+
+{#if open}
+	<div
+		class="pointer-events-none fixed inset-0 z-[9999]"
+		style="animation: fadeIn 0.2s ease-out;"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-confirm-title"
+	>
+		<!-- Backdrop -->
+		<div
+			class="pointer-events-auto absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-200"
+			onclick={handleCancel}
+		></div>
+
+		<!-- Modal Box -->
+		<div
+			class="bg-base-100 pointer-events-auto absolute left-1/2 top-1/2 z-10 flex max-h-[90vh] w-full max-w-md transform -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl shadow-2xl transition-all duration-300"
+			style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header -->
+			<div
+				class="border-base-300 from-warning/10 to-warning/5 flex flex-shrink-0 items-center justify-between border-b bg-linear-to-r px-6 py-4"
+			>
+				<h2 id="modal-confirm-title" class="text-warning flex items-center gap-2 text-xl font-bold">
+					<AlertTriangle class="h-6 w-6" strokeWidth={2.5} />
+					{title}
+				</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle btn-ghost hover:bg-base-300"
+					onclick={handleCancel}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="modal-scroll flex-1 overflow-y-auto px-6 py-6">
+				<p class="text-base-content text-base leading-relaxed">{message}</p>
+			</div>
+
+			<!-- Footer -->
+			<div class="border-base-300 flex flex-shrink-0 justify-end gap-3 border-t px-6 py-4">
+				<button class="btn btn-ghost" onclick={handleCancel}>{cancelText}</button>
+				<button class="btn btn-warning" onclick={handleConfirm}>{confirmText}</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -40%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>
+

apps/web/src/lib/components/ConfirmationModal.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { AlertTriangle, X } from 'lucide-svelte';
+
+	interface Props {
+		open: boolean;
+		title?: string;
+		message: string;
+		confirmText?: string;
+		cancelText?: string;
+		isDestructive?: boolean;
+		onConfirm: () => void;
+		onClose: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title = 'Confirmar Ação',
+		message,
+		confirmText = 'Confirmar',
+		cancelText = 'Cancelar',
+		isDestructive = false,
+		onConfirm,
+		onClose
+	}: Props = $props();
+
+	// Tenta centralizar, mas se tiver um contexto específico pode ser ajustado
+	// Por padrão, centralizado.
+	function getModalStyle() {
+		return 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 500px;';
+	}
+
+	function handleClose() {
+		open = false;
+		onClose();
+	}
+
+	function handleConfirm() {
+		open = false;
+		onConfirm();
+	}
+</script>
+
+{#if open}
+	<div
+		class="pointer-events-none fixed inset-0 z-50"
+		style="animation: fadeIn 0.2s ease-out;"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-confirm-title"
+	>
+		<!-- Backdrop leve -->
+		<div
+			class="pointer-events-auto absolute inset-0 bg-black/20 transition-opacity duration-200"
+			onclick={handleClose}
+			aria-hidden="true"
+		></div>
+
+		<!-- Modal Box -->
+		<div
+			class="pointer-events-auto absolute z-10 flex w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl transition-all duration-300"
+			style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); {getModalStyle()}"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header -->
+			<div class="flex shrink-0 items-center justify-between border-b border-gray-100 px-6 py-4">
+				<h2
+					id="modal-confirm-title"
+					class="flex items-center gap-2 text-xl font-bold {isDestructive
+						? 'text-red-600'
+						: 'text-gray-900'}"
+				>
+					{#if isDestructive}
+						<AlertTriangle class="h-6 w-6" strokeWidth={2.5} />
+					{/if}
+					{title}
+				</h2>
+				<button
+					type="button"
+					class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+					onclick={handleClose}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="flex-1 overflow-y-auto px-6 py-6">
+				<p class="text-base leading-relaxed font-medium text-gray-700">{message}</p>
+			</div>
+
+			<!-- Footer -->
+			<div class="flex shrink-0 justify-end gap-3 border-t border-gray-100 bg-gray-50 px-6 py-4">
+				<button
+					class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-200"
+					onclick={handleClose}
+				>
+					{cancelText}
+				</button>
+				<button
+					class="rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm {isDestructive
+						? 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
+						: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'}"
+					onclick={handleConfirm}
+				>
+					{confirmText}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+</style>

apps/web/src/lib/components/DecorativeTopLine.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div
+	class={[
+		'via-primary absolute top-0 left-0 h-1 w-full bg-linear-to-r from-transparent to-transparent opacity-50',
+		className
+	]}
+></div>

apps/web/src/lib/components/ErrorMessage.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { XCircle } from 'lucide-svelte';
+
+	interface Props {
+		message?: string | null;
+		class?: string;
+	}
+
+	let { message = null, class: className = '' }: Props = $props();
+</script>
+
+{#if message}
+	<div
+		class={[
+			'border-error/20 bg-error/10 text-error-content/90 mb-6 flex items-center gap-3 rounded-lg border p-4 backdrop-blur-md',
+			className
+		]}
+	>
+		<XCircle class="h-5 w-5 shrink-0" />
+		<span class="text-sm font-medium">{message}</span>
+	</div>
+{/if}

apps/web/src/lib/components/ErrorModal.svelte

@@ -1,82 +1,245 @@
 <script lang="ts">
-  import { AlertCircle, X } from "lucide-svelte";
-  
-  interface Props {
-    open: boolean;
-    title?: string;
-    message: string;
-    details?: string;
-    onClose: () => void;
-  }
+	import { AlertCircle, HelpCircle, X } from 'lucide-svelte';
 
-  let {
-    open = $bindable(false),
-    title = "Erro",
-    message,
-    details,
-    onClose,
-  }: Props = $props();
+	interface Props {
+		open: boolean;
+		title?: string;
+		message: string;
+		details?: string;
+		onClose: () => void;
+	}
 
-  let modalRef: HTMLDialogElement;
+	let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
 
-  function handleClose() {
-    open = false;
-    onClose();
-  }
+	let modalPosition = $state<{ top: number; left: number } | null>(null);
 
-  $effect(() => {
-    if (open && modalRef) {
-      modalRef.showModal();
-    } else if (!open && modalRef) {
-      modalRef.close();
-    }
-  });
+	// Função para calcular a posição baseada no card de registro de ponto
+	function calcularPosicaoModal() {
+		// Procurar pelo elemento do card de registro de ponto
+		const cardRef = document.getElementById('card-registro-ponto-ref');
+
+		if (cardRef) {
+			const rect = cardRef.getBoundingClientRect();
+			const viewportHeight = window.innerHeight;
+
+			// Posicionar o modal na mesma altura Y do card (top do card) - mesma posição do texto "Registrar Ponto"
+			const top = rect.top;
+
+			// Garantir que o modal não saia da viewport
+			// Considerar uma altura mínima do modal (aproximadamente 300px)
+			const minTop = 20;
+			const maxTop = viewportHeight - 350; // Deixar espaço para o modal
+			const finalTop = Math.max(minTop, Math.min(top, maxTop));
+
+			// Centralizar horizontalmente
+			return {
+				top: finalTop,
+				left: window.innerWidth / 2
+			};
+		}
+
+		// Se não encontrar, usar posição padrão (centro da tela)
+		return null;
+	}
+
+	$effect(() => {
+		if (open) {
+			// Usar requestAnimationFrame para garantir que o DOM está completamente renderizado
+			const updatePosition = () => {
+				requestAnimationFrame(() => {
+					const pos = calcularPosicaoModal();
+					if (pos) {
+						modalPosition = pos;
+					}
+				});
+			};
+
+			// Aguardar um pouco mais para garantir que o DOM está atualizado
+			setTimeout(updatePosition, 50);
+
+			// Adicionar listener de scroll para atualizar posição
+			const handleScroll = () => {
+				updatePosition();
+			};
+
+			window.addEventListener('scroll', handleScroll, true);
+			window.addEventListener('resize', handleScroll);
+
+			return () => {
+				window.removeEventListener('scroll', handleScroll, true);
+				window.removeEventListener('resize', handleScroll);
+			};
+		} else {
+			// Limpar posição quando o modal for fechado
+			modalPosition = null;
+		}
+	});
+
+	// Função para obter estilo do modal baseado na posição calculada
+	function getModalStyle() {
+		if (modalPosition) {
+			// Posicionar na altura do card, centralizado horizontalmente
+			// position: fixed já é relativo à viewport, então podemos usar diretamente
+			return `position: fixed; top: ${modalPosition.top}px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 700px;`;
+		}
+		// Se não houver posição calculada, centralizar na tela
+		return 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 700px;';
+	}
+
+	// Verificar se details contém instruções ou apenas detalhes técnicos
+	let temInstrucoes = $derived.by(() => {
+		if (!details) return false;
+		// Se contém palavras-chave de instruções, é uma instrução
+		return (
+			details.includes('Por favor') ||
+			details.includes('aguarde') ||
+			details.includes('recarregue') ||
+			details.includes('Verifique') ||
+			details.includes('tente novamente') ||
+			details.match(/^\d+\./)
+		); // Começa com número (lista numerada)
+	});
+
+	function handleClose() {
+		open = false;
+		onClose();
+	}
 </script>
 
 {#if open}
-  <dialog 
-    bind:this={modalRef} 
-    class="modal" 
-    onclick={(e) => e.target === e.currentTarget && handleClose()}
-  >
-    <div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
-      <!-- Header -->
-      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
-          <AlertCircle class="w-5 h-5" strokeWidth={2} />
-          {title}
-        </h2>
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle"
-          onclick={handleClose}
-          aria-label="Fechar"
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+	<div
+		class="pointer-events-none fixed inset-0 z-50"
+		style="animation: fadeIn 0.2s ease-out;"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-error-title"
+	>
+		<!-- Backdrop leve -->
+		<div
+			class="pointer-events-auto absolute inset-0 bg-black/20 transition-opacity duration-200"
+			onclick={handleClose}
+		></div>
 
-      <!-- Content -->
-      <div class="px-6 py-6">
-        <p class="text-base-content mb-4">{message}</p>
-        {#if details}
-          <div class="bg-base-200 rounded-lg p-4 mb-4">
-            <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
-          </div>
-        {/if}
-      </div>
+		<!-- Modal Box -->
+		<div
+			class="bg-base-100 pointer-events-auto absolute z-10 flex max-h-[90vh] w-full max-w-2xl transform flex-col overflow-hidden rounded-2xl shadow-2xl transition-all duration-300"
+			style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); {getModalStyle()}"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header fixo -->
+			<div
+				class="border-base-300 flex flex-shrink-0 items-center justify-between border-b px-6 py-4"
+			>
+				<h2 id="modal-error-title" class="text-error flex items-center gap-2 text-xl font-bold">
+					<AlertCircle class="h-6 w-6" strokeWidth={2.5} />
+					{title}
+				</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle btn-ghost hover:bg-base-300"
+					onclick={handleClose}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
 
-      <!-- Footer -->
-      <div class="modal-action px-6 pb-6">
-        <button class="btn btn-primary" onclick={handleClose}>
-          Fechar
-        </button>
-      </div>
-    </div>
+			<!-- Content com rolagem -->
+			<div class="modal-scroll flex-1 overflow-y-auto px-6 py-6">
+				<!-- Mensagem principal -->
+				<div class="mb-6">
+					<p class="text-base-content text-base leading-relaxed font-medium">{message}</p>
+				</div>
 
-    <form method="dialog" class="modal-backdrop">
-      <button type="button" onclick={handleClose}>fechar</button>
-    </form>
-  </dialog>
+				<!-- Instruções ou detalhes (se houver) -->
+				{#if details}
+					<div class="bg-info/10 border-info/30 mb-4 rounded-lg border-l-4 p-4">
+						<div class="flex items-start gap-3">
+							<HelpCircle class="text-info mt-0.5 h-5 w-5 shrink-0" strokeWidth={2} />
+							<div class="flex-1">
+								<p class="text-base-content/90 mb-2 text-sm font-semibold">
+									{temInstrucoes ? 'Como resolver:' : 'Informação adicional:'}
+								</p>
+								<div class="text-base-content/80 space-y-2 text-sm">
+									{#each details
+										.split('\n')
+										.filter((line) => line.trim().length > 0) as linha (linha)}
+										{#if linha.trim().match(/^\d+\./)}
+											<div class="flex items-start gap-2">
+												<span class="text-info shrink-0 font-semibold"
+													>{linha.trim().split('.')[0]}.</span
+												>
+												<span class="flex-1 leading-relaxed"
+													>{linha
+														.trim()
+														.substring(linha.trim().indexOf('.') + 1)
+														.trim()}</span
+												>
+											</div>
+										{:else}
+											<p class="leading-relaxed">{linha.trim()}</p>
+										{/if}
+									{/each}
+								</div>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Footer fixo -->
+			<div class="border-base-300 flex flex-shrink-0 justify-end border-t px-6 py-4">
+				<button class="btn btn-primary" onclick={handleClose}>Entendi, obrigado</button>
+			</div>
+		</div>
+	</div>
 {/if}
 
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada para os modais */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>

apps/web/src/lib/components/FileUpload.svelte

@@ -1,265 +1,342 @@
-<script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { ExternalLink, FileText, File, Upload, Trash2, Eye, RefreshCw } from "lucide-svelte";
-  
-  interface Props {
-    label: string;
-    helpUrl?: string;
-    value?: string; // storageId
-    disabled?: boolean;
-    required?: boolean;
-    onUpload: (file: File) => Promise<void>;
-    onRemove: () => Promise<void>;
-  }
-
-  let {
-    label,
-    helpUrl,
-    value = $bindable(),
-    disabled = false,
-    required = false,
-    onUpload,
-    onRemove,
-  }: Props = $props();
-  
-  const client = useConvexClient();
-  
-  let fileInput: HTMLInputElement;
-  let uploading = $state(false);
-  let error = $state<string | null>(null);
-  let fileName = $state<string>("");
-  let fileType = $state<string>("");
-  let previewUrl = $state<string | null>(null);
-  let fileUrl = $state<string | null>(null);
-  
-  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-  const ALLOWED_TYPES = [
-    "application/pdf",
-    "image/jpeg",
-    "image/jpg",
-    "image/png",
-  ];
-  
-  // Buscar URL do arquivo quando houver um storageId
-  $effect(() => {
-    if (value && !fileName) {
-      // Tem storageId mas não é um upload recente
-      loadExistingFile(value);
-    }
-  });
-  
-  async function loadExistingFile(storageId: string) {
-    try {
-      const url = await client.storage.getUrl(storageId as any);
-      if (url) {
-        fileUrl = url;
-        fileName = "Documento anexado";
-        // Detectar tipo pelo URL ou assumir PDF
-        if (url.includes(".pdf") || url.includes("application/pdf")) {
-          fileType = "application/pdf";
-        } else {
-          fileType = "image/jpeg";
-          previewUrl = url; // Para imagens, a URL serve como preview
-        }
-      }
-    } catch (err) {
-      console.error("Erro ao carregar arquivo existente:", err);
-    }
-  }
-  
-  async function handleFileSelect(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const file = target.files?.[0];
-    
-    if (!file) return;
-    
-    error = null;
-    
-    // Validate file size
-    if (file.size > MAX_FILE_SIZE) {
-      error = "Arquivo muito grande. Tamanho máximo: 10MB";
-      target.value = "";
-      return;
-    }
-    
-    // Validate file type
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      error = "Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)";
-      target.value = "";
-      return;
-    }
-    
-    try {
-      uploading = true;
-      fileName = file.name;
-      fileType = file.type;
-      
-      // Create preview for images
-      if (file.type.startsWith("image/")) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          previewUrl = e.target?.result as string;
-        };
-        reader.readAsDataURL(file);
-      }
-      
-      await onUpload(file);
-      
-    } catch (err: any) {
-      error = err?.message || "Erro ao fazer upload do arquivo";
-      previewUrl = null;
-    } finally {
-      uploading = false;
-      target.value = "";
-    }
-  }
-  
-  async function handleRemove() {
-    if (!confirm("Tem certeza que deseja remover este arquivo?")) {
-      return;
-    }
-    
-    try {
-      uploading = true;
-      await onRemove();
-      fileName = "";
-      fileType = "";
-      previewUrl = null;
-      fileUrl = null;
-    } catch (err: any) {
-      error = err?.message || "Erro ao remover arquivo";
-    } finally {
-      uploading = false;
-    }
-  }
-  
-  function handleView() {
-    if (fileUrl) {
-      window.open(fileUrl, '_blank');
-    }
-  }
-  
-  function openFileDialog() {
-    fileInput?.click();
-  }
-</script>
-
-<div class="form-control w-full">
-  <label class="label" for="file-upload-input">
-    <span class="label-text font-medium flex items-center gap-2">
-      {label}
-      {#if required}
-        <span class="text-error">*</span>
-      {/if}
-      {#if helpUrl}
-        <div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
-          <a 
-            href={helpUrl} 
-            target="_blank" 
-            rel="noopener noreferrer"
-            class="text-primary hover:text-primary-focus transition-colors"
-            aria-label="Acessar link"
-          >
-            <ExternalLink class="h-4 w-4" strokeWidth={2} />
-          </a>
-        </div>
-      {/if}
-    </span>
-  </label>
-  
-  <input
-    id="file-upload-input"
-    type="file"
-    bind:this={fileInput}
-    onchange={handleFileSelect}
-    accept=".pdf,.jpg,.jpeg,.png"
-    class="hidden"
-    {disabled}
-  />
-  
-  {#if value || fileName}
-    <div class="flex items-center gap-2 p-3 border border-base-300 rounded-lg bg-base-100">
-      <!-- Preview -->
-      <div class="flex-shrink-0">
-        {#if previewUrl}
-          <img src={previewUrl} alt="Preview" class="w-12 h-12 object-cover rounded" />
-        {:else if fileType === "application/pdf" || fileName.endsWith(".pdf")}
-          <div class="w-12 h-12 bg-error/10 rounded flex items-center justify-center">
-            <FileText class="h-6 w-6 text-error" strokeWidth={2} />
-          </div>
-        {:else}
-          <div class="w-12 h-12 bg-success/10 rounded flex items-center justify-center">
-            <File class="h-6 w-6 text-success" strokeWidth={2} />
-          </div>
-        {/if}
-      </div>
-      
-      <!-- File info -->
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium truncate">{fileName || "Arquivo anexado"}</p>
-        <p class="text-xs text-base-content/60">
-          {#if uploading}
-            Carregando...
-          {:else}
-            Enviado com sucesso
-          {/if}
-        </p>
-      </div>
-      
-      <!-- Actions -->
-      <div class="flex gap-2">
-        {#if fileUrl}
-          <button
-            type="button"
-            onclick={handleView}
-            class="btn btn-sm btn-ghost text-info"
-            disabled={uploading || disabled}
-            title="Visualizar arquivo"
-          >
-            <Eye class="h-4 w-4" strokeWidth={2} />
-          </button>
-        {/if}
-        <button
-          type="button"
-          onclick={openFileDialog}
-          class="btn btn-sm btn-ghost"
-          disabled={uploading || disabled}
-          title="Substituir arquivo"
-        >
-          <RefreshCw class="h-4 w-4" strokeWidth={2} />
-        </button>
-        <button
-          type="button"
-          onclick={handleRemove}
-          class="btn btn-sm btn-ghost text-error"
-          disabled={uploading || disabled}
-          title="Remover arquivo"
-        >
-          <Trash2 class="h-4 w-4" strokeWidth={2} />
-        </button>
-      </div>
-    </div>
-  {:else}
-    <button
-      type="button"
-      onclick={openFileDialog}
-      class="btn btn-outline btn-block justify-start gap-2"
-      disabled={uploading || disabled}
-    >
-      {#if uploading}
-        <span class="loading loading-spinner loading-sm"></span>
-        Carregando...
-      {:else}
-        <Upload class="h-5 w-5" strokeWidth={2} />
-        Selecionar arquivo (PDF ou imagem, máx. 10MB)
-      {/if}
-    </button>
-  {/if}
-  
-  {#if error}
-    <div class="label">
-      <span class="label-text-alt text-error">{error}</span>
-    </div>
-  {/if}
-</div>
-
+<script lang="ts">
+	import { useConvexClient } from 'convex-svelte';
+	import {
+		ExternalLink,
+		FileText,
+		File as FileIcon,
+		Upload,
+		Trash2,
+		Eye,
+		RefreshCw
+	} from 'lucide-svelte';
+
+	interface Props {
+		label: string;
+		helpUrl?: string;
+		value?: string; // storageId
+		disabled?: boolean;
+		required?: boolean;
+		onUpload: (file: globalThis.File) => Promise<void>;
+		onRemove: () => Promise<void>;
+	}
+
+	let {
+		label,
+		helpUrl,
+		value = $bindable(),
+		disabled = false,
+		required = false,
+		onUpload,
+		onRemove
+	}: Props = $props();
+
+	const client = useConvexClient() as unknown as {
+		storage: {
+			getUrl: (id: string) => Promise<string | null>;
+		};
+	};
+
+	let fileInput: HTMLInputElement | null = null;
+	let uploading = $state(false);
+	let error = $state<string | null>(null);
+	let fileName = $state<string>('');
+	let fileType = $state<string>('');
+	let previewUrl = $state<string | null>(null);
+	let fileUrl = $state<string | null>(null);
+
+	const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+	const ALLOWED_TYPES = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
+
+	// Buscar URL do arquivo quando houver um storageId
+	$effect(() => {
+		if (value && !fileName) {
+			// Tem storageId mas não é um upload recente
+			void loadExistingFile(value);
+		}
+
+		let cancelled = false;
+		const storageId = value;
+
+		if (!storageId) {
+			return;
+		}
+
+		(async () => {
+			try {
+				const url = await client.storage.getUrl(storageId);
+				if (!url || cancelled) {
+					return;
+				}
+
+				fileUrl = url;
+
+				const path = url.split('?')[0] ?? '';
+				const nameFromUrl = path.split('/').pop() ?? 'arquivo';
+				fileName = decodeURIComponent(nameFromUrl);
+
+				const extension = fileName.toLowerCase().split('.').pop();
+				const isPdf =
+					extension === 'pdf' || url.includes('.pdf') || url.includes('application/pdf');
+
+				if (isPdf) {
+					fileType = 'application/pdf';
+					previewUrl = null;
+				} else {
+					fileType = 'image/jpeg';
+					previewUrl = url;
+				}
+			} catch (err) {
+				if (!cancelled) {
+					console.error('Erro ao carregar arquivo existente:', err);
+				}
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	async function loadExistingFile(storageId: string) {
+		try {
+			const url = await client.storage.getUrl(storageId);
+			if (url) {
+				fileUrl = url;
+
+				// Detectar tipo pelo URL ou assumir PDF
+				if (url.includes('.pdf') || url.includes('application/pdf')) {
+					fileType = 'application/pdf';
+				} else {
+					fileType = 'image/jpeg';
+					// Para imagens, a URL serve como preview
+					previewUrl = url;
+				}
+			}
+		} catch (err) {
+			console.error('Erro ao carregar arquivo existente:', err);
+		}
+	}
+
+	async function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
+
+		if (!file) {
+			return;
+		}
+
+		error = null;
+
+		// Validate file size
+		if (file.size > MAX_FILE_SIZE) {
+			error = 'Arquivo muito grande. Tamanho máximo: 10MB';
+			target.value = '';
+			return;
+		}
+
+		// Validate file type
+		if (!ALLOWED_TYPES.includes(file.type)) {
+			error = 'Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)';
+			target.value = '';
+			return;
+		}
+
+		try {
+			uploading = true;
+			fileName = file.name;
+			fileType = file.type;
+
+			// Create preview for images
+			if (file.type.startsWith('image/')) {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					const result = e.target?.result;
+					if (typeof result === 'string') {
+						previewUrl = result;
+					}
+				};
+				reader.readAsDataURL(file);
+			} else {
+				previewUrl = null;
+			}
+
+			await onUpload(file);
+		} catch (err: unknown) {
+			if (err instanceof Error) {
+				error = err.message || 'Erro ao fazer upload do arquivo';
+			} else {
+				error = 'Erro ao fazer upload do arquivo';
+			}
+			previewUrl = null;
+		} finally {
+			uploading = false;
+			target.value = '';
+		}
+	}
+
+	async function handleRemove() {
+		if (!confirm('Tem certeza que deseja remover este arquivo?')) {
+			return;
+		}
+
+		try {
+			uploading = true;
+			await onRemove();
+			fileName = '';
+			fileType = '';
+			previewUrl = null;
+			fileUrl = null;
+			error = null;
+		} catch (err: unknown) {
+			if (err instanceof Error) {
+				error = err.message || 'Erro ao remover arquivo';
+			} else {
+				error = 'Erro ao remover arquivo';
+			}
+		} finally {
+			uploading = false;
+		}
+	}
+
+	function handleView() {
+		if (fileUrl) {
+			window.open(fileUrl, '_blank');
+		}
+	}
+
+	function openFileDialog() {
+		fileInput?.click();
+	}
+
+	function setFileInput(node: HTMLInputElement) {
+		fileInput = node;
+		return {
+			destroy() {
+				if (fileInput === node) {
+					fileInput = null;
+				}
+			}
+		};
+	}
+</script>
+
+<div class="form-control w-full">
+	<label class="label" for="file-upload-input">
+		<span class="label-text flex items-center gap-2 font-medium">
+			{label}
+			{#if required}
+				<span class="text-error">*</span>
+			{/if}
+			{#if helpUrl}
+				<div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
+					<a
+						href={helpUrl ?? '/'}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-primary hover:text-primary-focus transition-colors"
+						aria-label="Acessar link"
+					>
+						<ExternalLink class="h-4 w-4" strokeWidth={2} />
+					</a>
+				</div>
+			{/if}
+		</span>
+	</label>
+
+	<input
+		id="file-upload-input"
+		type="file"
+		use:setFileInput
+		onchange={handleFileSelect}
+		accept=".pdf,.jpg,.jpeg,.png"
+		class="hidden"
+		{disabled}
+	/>
+
+	{#if value || fileName}
+		<div class="border-base-300 bg-base-100 flex items-center gap-2 rounded-lg border p-3">
+			<!-- Preview -->
+			<div class="shrink-0">
+				{#if previewUrl}
+					<img src={previewUrl} alt="Preview" class="h-12 w-12 rounded object-cover" />
+				{:else if fileType === 'application/pdf' || fileName.endsWith('.pdf')}
+					<div class="bg-error/10 flex h-12 w-12 items-center justify-center rounded">
+						<FileText class="text-error h-6 w-6" strokeWidth={2} />
+					</div>
+				{:else}
+					<div class="bg-success/10 flex h-12 w-12 items-center justify-center rounded">
+						<FileIcon class="text-success h-6 w-6" strokeWidth={2} />
+					</div>
+				{/if}
+			</div>
+
+			<!-- File info -->
+			<div class="min-w-0 flex-1">
+				<p class="truncate text-sm font-medium">
+					{fileName || 'Arquivo anexado'}
+				</p>
+				<p class="text-base-content/60 text-xs">
+					{#if uploading}
+						Carregando...
+					{:else}
+						Enviado com sucesso
+					{/if}
+				</p>
+			</div>
+
+			<!-- Actions -->
+			<div class="flex gap-2">
+				{#if fileUrl}
+					<button
+						type="button"
+						onclick={handleView}
+						class="btn btn-sm btn-ghost text-info"
+						disabled={uploading || disabled}
+						title="Visualizar arquivo"
+					>
+						<Eye class="h-4 w-4" strokeWidth={2} />
+					</button>
+				{/if}
+				<button
+					type="button"
+					onclick={openFileDialog}
+					class="btn btn-sm btn-ghost"
+					disabled={uploading || disabled}
+					title="Substituir arquivo"
+				>
+					<RefreshCw class="h-4 w-4" strokeWidth={2} />
+				</button>
+				<button
+					type="button"
+					onclick={handleRemove}
+					class="btn btn-sm btn-ghost text-error"
+					disabled={uploading || disabled}
+					title="Remover arquivo"
+				>
+					<Trash2 class="h-4 w-4" strokeWidth={2} />
+				</button>
+			</div>
+		</div>
+	{:else}
+		<button
+			type="button"
+			onclick={openFileDialog}
+			class="btn btn-outline btn-block justify-start gap-2"
+			disabled={uploading || disabled}
+		>
+			{#if uploading}
+				<span class="loading loading-spinner loading-sm"></span>
+				Carregando...
+			{:else}
+				<Upload class="h-5 w-5" strokeWidth={2} />
+				Selecionar arquivo (PDF ou imagem, máx. 10MB)
+			{/if}
+		</button>
+	{/if}
+
+	{#if error}
+		<div class="label">
+			<span class="label-text-alt text-error">{error}</span>
+		</div>
+	{/if}
+</div>

apps/web/src/lib/components/Footer.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+
+	const currentYear = new Date().getFullYear();
+</script>
+
+<footer class="bg-base-200 text-base-content border-base-300 mt-16 border-t">
+	<div class="container mx-auto px-4 py-8">
+		<div class="grid grid-cols-1 gap-8 text-center md:grid-cols-3 md:text-left">
+			<div>
+				<h3 class="text-primary mb-4 text-lg font-bold">SGSE</h3>
+				<p class="mx-auto max-w-xs text-sm opacity-75 md:mx-0">
+					Sistema de Gestão de Secretaria<br />
+					Simplificando processos e conectando pessoas.
+				</p>
+			</div>
+
+			<div>
+				<h3 class="mb-4 text-lg font-bold">Links Úteis</h3>
+				<ul class="space-y-2 text-sm opacity-75">
+					<li>
+						<a
+							href="https://www.pe.gov.br/"
+							target="_blank"
+							class="hover:text-primary transition-colors">Portal do Governo</a
+						>
+					</li>
+					<li>
+						<a href={resolve('/privacidade')} class="hover:text-primary transition-colors"
+							>Política de Privacidade</a
+						>
+					</li>
+					<li>
+						<a href={resolve('/abrir-chamado')} class="hover:text-primary transition-colors"
+							>Suporte</a
+						>
+					</li>
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="mb-4 text-lg font-bold">Contato</h3>
+				<p class="text-sm opacity-75">
+					Secretaria de Educação<br />
+					Recife - PE
+				</p>
+			</div>
+		</div>
+
+		<div class="divider mt-8 mb-4"></div>
+
+		<div class="flex flex-col items-center justify-between text-sm opacity-60 md:flex-row">
+			<p>&copy; {currentYear} Governo de Pernambuco. Todos os direitos reservados.</p>
+			<p class="mt-2 md:mt-0">Desenvolvido com tecnologia de ponta.</p>
+		</div>
+	</div>
+</footer>

apps/web/src/lib/components/FuncionarioMatriculaAutocomplete.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { useQuery } from 'convex-svelte';
+
+	interface Props {
+		value?: string; // Matrícula do funcionário
+		placeholder?: string;
+		disabled?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Digite a matrícula do funcionário',
+		disabled = false
+	}: Props = $props();
+
+	// Usar value diretamente como busca para evitar conflitos de sincronização
+	let mostrarDropdown = $state(false);
+
+	// Buscar funcionários
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+
+	let funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);
+
+	// Filtrar funcionários baseado na busca (por matrícula ou nome)
+	let funcionariosFiltrados = $derived.by(() => {
+		if (!value || !value.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio
+
+		const termo = value.toLowerCase().trim();
+		return funcionarios
+			.filter((f) => {
+				const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
+				const nomeMatch = f.nome?.toLowerCase().includes(termo);
+				return matriculaMatch || nomeMatch;
+			})
+			.slice(0, 20); // Limitar resultados
+	});
+
+	function selecionarFuncionario(matricula: string) {
+		value = matricula;
+		mostrarDropdown = false;
+	}
+
+	function handleFocus() {
+		if (!disabled) {
+			mostrarDropdown = true;
+		}
+	}
+
+	function handleBlur() {
+		// Delay para permitir click no dropdown
+		setTimeout(() => {
+			mostrarDropdown = false;
+		}, 200);
+	}
+
+	function handleInput() {
+		mostrarDropdown = true;
+	}
+</script>
+
+<div class="relative w-full">
+	<input
+		type="text"
+		bind:value
+		oninput={handleInput}
+		{placeholder}
+		{disabled}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		class="input input-bordered w-full pr-10"
+		autocomplete="off"
+	/>
+
+	<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="text-base-content/40 h-5 w-5"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/>
+		</svg>
+	</div>
+
+	{#if mostrarDropdown && funcionariosFiltrados.length > 0}
+		<div
+			class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
+		>
+			{#each funcionariosFiltrados as funcionario}
+				<button
+					type="button"
+					onclick={() => selecionarFuncionario(funcionario.matricula || '')}
+					class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
+				>
+					<div class="font-medium">
+						{#if funcionario.matricula}
+							Matrícula: {funcionario.matricula}
+						{:else}
+							Sem matrícula
+						{/if}
+					</div>
+					<div class="text-base-content/60 text-sm">
+						{funcionario.nome}
+						{#if funcionario.descricaoCargo}
+							{funcionario.nome ? ' • ' : ''}
+							{funcionario.descricaoCargo}
+						{/if}
+					</div>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
+		<div
+			class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
+		>
+			<div class="text-sm">Nenhum funcionário encontrado</div>
+			<div class="mt-1 text-xs opacity-70">
+				Você pode continuar digitando para buscar livremente
+			</div>
+		</div>
+	{/if}
+</div>

apps/web/src/lib/components/FuncionarioNomeAutocomplete.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { useQuery } from 'convex-svelte';
+
+	interface Props {
+		value?: string; // Nome do funcionário
+		placeholder?: string;
+		disabled?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Digite o nome do funcionário',
+		disabled = false
+	}: Props = $props();
+
+	// Usar value diretamente como busca para evitar conflitos de sincronização
+	let mostrarDropdown = $state(false);
+
+	// Buscar funcionários
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+
+	let funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);
+
+	// Filtrar funcionários baseado na busca (por nome ou matrícula)
+	let funcionariosFiltrados = $derived.by(() => {
+		if (!value || !value.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio
+
+		const termo = value.toLowerCase().trim();
+		return funcionarios
+			.filter((f) => {
+				const nomeMatch = f.nome?.toLowerCase().includes(termo);
+				const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
+				return nomeMatch || matriculaMatch;
+			})
+			.slice(0, 20); // Limitar resultados
+	});
+
+	function selecionarFuncionario(nome: string) {
+		value = nome;
+		mostrarDropdown = false;
+	}
+
+	function handleFocus() {
+		if (!disabled) {
+			mostrarDropdown = true;
+		}
+	}
+
+	function handleBlur() {
+		// Delay para permitir click no dropdown
+		setTimeout(() => {
+			mostrarDropdown = false;
+		}, 200);
+	}
+
+	function handleInput() {
+		mostrarDropdown = true;
+	}
+</script>
+
+<div class="relative w-full">
+	<input
+		type="text"
+		bind:value
+		oninput={handleInput}
+		{placeholder}
+		{disabled}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		class="input input-bordered w-full pr-10"
+		autocomplete="off"
+	/>
+
+	<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="text-base-content/40 h-5 w-5"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/>
+		</svg>
+	</div>
+
+	{#if mostrarDropdown && funcionariosFiltrados.length > 0}
+		<div
+			class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
+		>
+			{#each funcionariosFiltrados as funcionario}
+				<button
+					type="button"
+					onclick={() => selecionarFuncionario(funcionario.nome || '')}
+					class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
+				>
+					<div class="font-medium">{funcionario.nome}</div>
+					<div class="text-base-content/60 text-sm">
+						{#if funcionario.matricula}
+							Matrícula: {funcionario.matricula}
+						{/if}
+						{#if funcionario.descricaoCargo}
+							{funcionario.matricula ? ' • ' : ''}
+							{funcionario.descricaoCargo}
+						{/if}
+					</div>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
+		<div
+			class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
+		>
+			<div class="text-sm">Nenhum funcionário encontrado</div>
+			<div class="mt-1 text-xs opacity-70">
+				Você pode continuar digitando para buscar livremente
+			</div>
+		</div>
+	{/if}
+</div>

apps/web/src/lib/components/FuncionarioSelect.svelte

@@ -1,189 +1,187 @@
 <script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { useQuery } from 'convex-svelte';
 
-  interface Props {
-    value?: string; // Id do funcionário selecionado
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-  }
+	interface Props {
+		value?: string; // Id do funcionário selecionado
+		placeholder?: string;
+		disabled?: boolean;
+		required?: boolean;
+	}
 
-  let {
-    value = $bindable(),
-    placeholder = "Selecione um funcionário",
-    disabled = false,
-    required = false,
-  }: Props = $props();
+	let {
+		value = $bindable(),
+		placeholder = 'Selecione um funcionário',
+		disabled = false,
+		required = false
+	}: Props = $props();
 
-  let busca = $state("");
-  let mostrarDropdown = $state(false);
+	let busca = $state('');
+	let mostrarDropdown = $state(false);
 
-  // Buscar funcionários
-  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	// Buscar funcionários
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
 
-  const funcionarios = $derived(
-    funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []
-  );
+	let funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);
 
-  // Filtrar funcionários baseado na busca
-  const funcionariosFiltrados = $derived.by(() => {
-    if (!busca.trim()) return funcionarios;
+	// Filtrar funcionários baseado na busca
+	let funcionariosFiltrados = $derived.by(() => {
+		if (!busca.trim()) return funcionarios;
 
-    const termo = busca.toLowerCase().trim();
-    return funcionarios.filter((f) => {
-      const nomeMatch = f.nome?.toLowerCase().includes(termo);
-      const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
-      const cpfMatch = f.cpf?.replace(/\D/g, "").includes(termo.replace(/\D/g, ""));
-      return nomeMatch || matriculaMatch || cpfMatch;
-    });
-  });
+		const termo = busca.toLowerCase().trim();
+		return funcionarios.filter((f) => {
+			const nomeMatch = f.nome?.toLowerCase().includes(termo);
+			const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
+			const cpfMatch = f.cpf?.replace(/\D/g, '').includes(termo.replace(/\D/g, ''));
+			return nomeMatch || matriculaMatch || cpfMatch;
+		});
+	});
 
-  // Funcionário selecionado
-  const funcionarioSelecionado = $derived.by(() => {
-    if (!value) return null;
-    return funcionarios.find((f) => f._id === value);
-  });
+	// Funcionário selecionado
+	let funcionarioSelecionado = $derived.by(() => {
+		if (!value) return null;
+		return funcionarios.find((f) => f._id === value);
+	});
 
-  function selecionarFuncionario(funcionarioId: string) {
-    value = funcionarioId;
-    const funcionario = funcionarios.find((f) => f._id === funcionarioId);
-    busca = funcionario?.nome || "";
-    mostrarDropdown = false;
-  }
+	function selecionarFuncionario(funcionarioId: string) {
+		value = funcionarioId;
+		const funcionario = funcionarios.find((f) => f._id === funcionarioId);
+		busca = funcionario?.nome || '';
+		mostrarDropdown = false;
+	}
 
-  function limpar() {
-    value = undefined;
-    busca = "";
-    mostrarDropdown = false;
-  }
+	function limpar() {
+		value = undefined;
+		busca = '';
+		mostrarDropdown = false;
+	}
 
-  // Atualizar busca quando funcionário selecionado mudar externamente
-  $effect(() => {
-    if (value && !busca) {
-      const funcionario = funcionarios.find((f) => f._id === value);
-      busca = funcionario?.nome || "";
-    }
-  });
+	// Atualizar busca quando funcionário selecionado mudar externamente
+	$effect(() => {
+		if (value && !busca) {
+			const funcionario = funcionarios.find((f) => f._id === value);
+			busca = funcionario?.nome || '';
+		}
+	});
 
-  function handleFocus() {
-    if (!disabled) {
-      mostrarDropdown = true;
-    }
-  }
+	function handleFocus() {
+		if (!disabled) {
+			mostrarDropdown = true;
+		}
+	}
 
-  function handleBlur() {
-    // Delay para permitir click no dropdown
-    setTimeout(() => {
-      mostrarDropdown = false;
-    }, 200);
-  }
+	function handleBlur() {
+		// Delay para permitir click no dropdown
+		setTimeout(() => {
+			mostrarDropdown = false;
+		}, 200);
+	}
 </script>
 
-<div class="form-control w-full relative">
-  <label class="label">
-    <span class="label-text font-medium">
-      Funcionário
-      {#if required}
-        <span class="text-error">*</span>
-      {/if}
-    </span>
-  </label>
+<div class="form-control relative w-full">
+	<label class="label">
+		<span class="label-text font-medium">
+			Funcionário
+			{#if required}
+				<span class="text-error">*</span>
+			{/if}
+		</span>
+	</label>
 
-  <div class="relative">
-    <input
-      type="text"
-      bind:value={busca}
-      {placeholder}
-      {disabled}
-      onfocus={handleFocus}
-      onblur={handleBlur}
-      class="input input-bordered w-full pr-10"
-      autocomplete="off"
-    />
+	<div class="relative">
+		<input
+			type="text"
+			bind:value={busca}
+			{placeholder}
+			{disabled}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+			class="input input-bordered w-full pr-10"
+			autocomplete="off"
+		/>
 
-    {#if value}
-      <button
-        type="button"
-        onclick={limpar}
-        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle"
-        disabled={disabled}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-    {:else}
-      <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5 text-base-content/40"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          />
-        </svg>
-      </div>
-    {/if}
+		{#if value}
+			<button
+				type="button"
+				onclick={limpar}
+				class="btn btn-xs btn-circle absolute top-1/2 right-2 -translate-y-1/2"
+				{disabled}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{:else}
+			<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/40 h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+			</div>
+		{/if}
 
-    {#if mostrarDropdown && funcionariosFiltrados.length > 0}
-      <div
-        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto"
-      >
-        {#each funcionariosFiltrados as funcionario}
-          <button
-            type="button"
-            onclick={() => selecionarFuncionario(funcionario._id)}
-            class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors border-b border-base-200 last:border-b-0"
-          >
-            <div class="font-medium">{funcionario.nome}</div>
-            <div class="text-sm text-base-content/60">
-              {#if funcionario.matricula}
-                Matrícula: {funcionario.matricula}
-              {/if}
-              {#if funcionario.descricaoCargo}
-                {funcionario.matricula ? " • " : ""}
-                {funcionario.descricaoCargo}
-              {/if}
-            </div>
-          </button>
-        {/each}
-      </div>
-    {/if}
+		{#if mostrarDropdown && funcionariosFiltrados.length > 0}
+			<div
+				class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
+			>
+				{#each funcionariosFiltrados as funcionario}
+					<button
+						type="button"
+						onclick={() => selecionarFuncionario(funcionario._id)}
+						class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
+					>
+						<div class="font-medium">{funcionario.nome}</div>
+						<div class="text-base-content/60 text-sm">
+							{#if funcionario.matricula}
+								Matrícula: {funcionario.matricula}
+							{/if}
+							{#if funcionario.descricaoCargo}
+								{funcionario.matricula ? ' • ' : ''}
+								{funcionario.descricaoCargo}
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
 
-    {#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
-      <div
-        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg p-4 text-center text-base-content/60"
-      >
-        Nenhum funcionário encontrado
-      </div>
-    {/if}
-  </div>
+		{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
+			<div
+				class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
+			>
+				Nenhum funcionário encontrado
+			</div>
+		{/if}
+	</div>
 
-  {#if funcionarioSelecionado}
-    <div class="text-xs text-base-content/60 mt-1">
-      Selecionado: {funcionarioSelecionado.nome}
-      {#if funcionarioSelecionado.matricula}
-        - {funcionarioSelecionado.matricula}
-      {/if}
-    </div>
-  {/if}
+	{#if funcionarioSelecionado}
+		<div class="text-base-content/60 mt-1 text-xs">
+			Selecionado: {funcionarioSelecionado.nome}
+			{#if funcionarioSelecionado.matricula}
+				- {funcionarioSelecionado.matricula}
+			{/if}
+		</div>
+	{/if}
 </div>

apps/web/src/lib/components/GlassCard.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class={[
+		'border-base-content/10 bg-base-content/5 ring-base-content/10 relative overflow-hidden rounded-2xl border p-8 shadow-2xl ring-1 backdrop-blur-xl transition-all duration-300',
+		className
+	]}
+>
+	{@render children?.()}
+</div>

apps/web/src/lib/components/Header.svelte

@@ -1,7 +1,101 @@
 <script lang="ts">
-  import logo from "$lib/assets/logo_governo_PE.png";
+	import { resolve } from '$app/paths';
+	import logo from '$lib/assets/logo_governo_PE.png';
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+	import { aplicarTemaDaisyUI } from '$lib/utils/temas';
+
+	type HeaderProps = {
+		left?: Snippet;
+		right?: Snippet;
+	};
+
+	const { left, right }: HeaderProps = $props();
+
+	let themeSelectEl: HTMLSelectElement | null = null;
+
+	function safeGetThemeLS(): string | null {
+		try {
+			const t = localStorage.getItem('theme');
+			return t && t.trim() ? t : null;
+		} catch {
+			return null;
+		}
+	}
+
+	onMount(() => {
+		const persisted = safeGetThemeLS();
+		if (persisted) {
+			// Sincroniza UI + HTML com o valor persistido (evita select ficar "aqua" indevido)
+			if (themeSelectEl && themeSelectEl.value !== persisted) {
+				themeSelectEl.value = persisted;
+			}
+			aplicarTemaDaisyUI(persisted);
+		}
+	});
+
+	function onThemeChange(e: Event) {
+		const nextValue = (e.currentTarget as HTMLSelectElement | null)?.value ?? null;
+
+		// Se o theme-change não atualizar (caso comum após login/logout),
+		// garantimos aqui a persistência + aplicação imediata.
+		if (nextValue) {
+			try {
+				localStorage.setItem('theme', nextValue);
+			} catch {
+				// ignore
+			}
+			aplicarTemaDaisyUI(nextValue);
+		}
+	}
 </script>
 
-<div class="navbar bg-base-200 shadow-sm p-4 w-76">
-  <img src={logo} alt="Logo" class="" />
-</div>
+<header
+	class="bg-base-200 border-base-100 sticky top-0 z-50 w-full border-b py-3 shadow-sm backdrop-blur-md transition-all duration-300"
+>
+	<div class=" flex h-16 w-full items-center justify-between px-4">
+		<div class="flex items-center gap-3">
+			{#if left}
+				{@render left()}
+			{/if}
+
+			<a
+				href={resolve('/')}
+				class="group flex items-center gap-3 transition-transform hover:scale-[1.02]"
+			>
+				<img src={logo} alt="Logo Governo PE" class="h-10 w-auto object-contain drop-shadow-sm" />
+				<div class="hidden flex-col sm:flex">
+					<span class="text-primary text-2xl font-bold tracking-wider uppercase">SGSE</span>
+					<span class="text-base-content -mt-1 text-lg leading-none font-extrabold tracking-tight"
+						>Sistema de Gestão da Secretaria de Esportes</span
+					>
+				</div>
+			</a>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<select
+				bind:this={themeSelectEl}
+				class="select select-sm bg-base-100 border-base-300 w-40"
+				aria-label="Selecionar tema"
+				data-choose-theme
+				onchange={onThemeChange}
+			>
+				<option value="aqua">Aqua</option>
+				<option value="sgse-blue">Azul</option>
+				<option value="sgse-green">Verde</option>
+				<option value="sgse-orange">Laranja</option>
+				<option value="sgse-red">Vermelho</option>
+				<option value="sgse-pink">Rosa</option>
+				<option value="sgse-teal">Verde-água</option>
+				<option value="sgse-corporate">Corporativo</option>
+				<option value="light">Claro</option>
+				<option value="dark">Escuro</option>
+			</select>
+
+			{#if right}
+				{@render right()}
+			{/if}
+		</div>
+	</div>
+</header>

apps/web/src/lib/components/MenuProtection.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import { loginModalStore } from "$lib/stores/loginModal.svelte";
-  import { onMount } from "svelte";
-  import { goto } from "$app/navigation";
-
-  interface MenuProtectionProps {
-    menuPath: string;
-    requireGravar?: boolean;
-    children?: any;
-    redirectTo?: string;
-  }
-
-  let {
-    menuPath,
-    requireGravar = false,
-    children,
-    redirectTo = "/",
-  }: MenuProtectionProps = $props();
-
-  let verificando = $state(true);
-  let temPermissao = $state(false);
-  let motivoNegacao = $state("");
-
-  // Query para verificar permissões (só executa se o usuário estiver autenticado)
-  const permissaoQuery = $derived(
-    authStore.usuario
-      ? useQuery(api.menuPermissoes.verificarAcesso, {
-          usuarioId: authStore.usuario._id as Id<"usuarios">,
-          menuPath: menuPath,
-        })
-      : null
-  );
-
-  onMount(() => {
-    verificarPermissoes();
-  });
-
-  $effect(() => {
-    // Re-verificar quando o status de autenticação mudar
-    if (authStore.autenticado !== undefined) {
-      verificarPermissoes();
-    }
-  });
-
-  $effect(() => {
-    // Re-verificar quando a query carregar
-    if (permissaoQuery?.data) {
-      verificarPermissoes();
-    }
-  });
-
-  function verificarPermissoes() {
-    // Dashboard e Solicitar Acesso são públicos
-    if (menuPath === "/" || menuPath === "/solicitar-acesso") {
-      verificando = false;
-      temPermissao = true;
-      return;
-    }
-
-    // Se não está autenticado
-    if (!authStore.autenticado) {
-      verificando = false;
-      temPermissao = false;
-      motivoNegacao = "auth_required";
-      
-      // Abrir modal de login e salvar rota de redirecionamento
-      const currentPath = window.location.pathname;
-      loginModalStore.open(currentPath);
-      
-      // NÃO redirecionar, apenas mostrar o modal
-      // O usuário verá a mensagem "Verificando permissões..." enquanto o modal está aberto
-      return;
-    }
-
-    // Se está autenticado, verificar permissões
-    if (permissaoQuery?.data) {
-      const permissao = permissaoQuery.data;
-
-      // Se não pode acessar
-      if (!permissao.podeAcessar) {
-        verificando = false;
-        temPermissao = false;
-        motivoNegacao = "access_denied";
-        return;
-      }
-
-      // Se requer gravação mas não tem permissão
-      if (requireGravar && !permissao.podeGravar) {
-        verificando = false;
-        temPermissao = false;
-        motivoNegacao = "write_denied";
-        return;
-      }
-
-      // Tem permissão!
-      verificando = false;
-      temPermissao = true;
-    } else if (permissaoQuery?.error) {
-      verificando = false;
-      temPermissao = false;
-      motivoNegacao = "error";
-    }
-  }
-</script>
-
-{#if verificando}
-  <div class="flex items-center justify-center min-h-screen">
-    <div class="text-center">
-      {#if motivoNegacao === "auth_required"}
-        <div class="p-4 bg-warning/10 rounded-full inline-block mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Restrito</h2>
-        <p class="text-base-content/70 mb-4">
-          Esta área requer autenticação.<br />
-          Por favor, faça login para continuar.
-        </p>
-      {:else}
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-        <p class="mt-4 text-base-content/70">Verificando permissões...</p>
-      {/if}
-    </div>
-  </div>
-{:else if temPermissao}
-  {@render children?.()}
-{:else}
-  <div class="flex items-center justify-center min-h-screen">
-    <div class="text-center">
-      <div class="p-4 bg-error/10 rounded-full inline-block mb-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-        </svg>
-      </div>
-      <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
-      <p class="text-base-content/70">Você não tem permissão para acessar esta página.</p>
-    </div>
-  </div>
-{/if}
-

apps/web/src/lib/components/MenuToggleIcon.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { prefersReducedMotion, Spring } from 'svelte/motion';
+
+	interface Props {
+		open: boolean;
+		class?: string;
+		stroke?: number;
+	}
+
+	let { open, class: className = '', stroke = 2 }: Props = $props();
+
+	const progress = Spring.of(() => (open ? 1 : 0), {
+		stiffness: 0.25,
+		damping: 0.65,
+		precision: 0.001
+	});
+
+	const clamp01 = (n: number) => Math.max(0, Math.min(1, n));
+	const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+	let t = $derived(prefersReducedMotion.current ? (open ? 1 : 0) : progress.current);
+	let tFast = $derived(clamp01(t * 1.15));
+
+	// Fechado: hambúrguer. Aberto: "outro menu" (linhas deslocadas + comprimentos diferentes).
+	// Continua sendo ícone de menu (não vira X).
+	let topY = $derived(lerp(-6, -7, tFast));
+	let botY = $derived(lerp(6, 7, tFast));
+
+	let topX = $derived(lerp(0, 3.25, t));
+	let midX = $derived(lerp(0, -2.75, t));
+	let botX = $derived(lerp(0, 1.75, t));
+
+	// micro-inclinação só pra dar “vida”, sem cruzar em X
+	let topR = $derived(lerp(0, 2.5, tFast));
+	let botR = $derived(lerp(0, -2.5, tFast));
+
+	let topScaleX = $derived(lerp(1, 0.62, tFast));
+	let midScaleX = $derived(lerp(1, 0.92, tFast));
+	let botScaleX = $derived(lerp(1, 0.72, tFast));
+
+	let topOpacity = $derived(1);
+	let midOpacity = $derived(1);
+	let botOpacity = $derived(1);
+</script>
+
+<span class="menu-toggle-icon {className}" aria-hidden="true" style="--stroke: {stroke}px">
+	<span
+		class="line"
+		style="--x: {topX}px; --y: {topY}px; --r: {topR}deg; --o: {topOpacity}; --sx: {topScaleX}"
+	></span>
+	<span
+		class="line"
+		style="--x: {midX}px; --y: 0px; --r: 0deg; --o: {midOpacity}; --sx: {midScaleX}"
+	></span>
+	<span
+		class="line"
+		style="--x: {botX}px; --y: {botY}px; --r: {botR}deg; --o: {botOpacity}; --sx: {botScaleX}"
+	></span>
+</span>
+
+<style>
+	.menu-toggle-icon {
+		position: relative;
+		display: inline-block;
+		width: 1.25rem;
+		height: 1.25rem;
+		color: currentColor;
+	}
+
+	.line {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		margin-top: calc(var(--stroke) / -2);
+		height: var(--stroke);
+		border-radius: 9999px;
+		background: currentColor;
+		opacity: var(--o, 1);
+		transform-origin: center;
+		transform: translateX(var(--x, 0px)) translateY(var(--y, 0px)) rotate(var(--r, 0deg))
+			scaleX(var(--sx, 1));
+		will-change: transform, opacity;
+	}
+</style>

apps/web/src/lib/components/ModelosDeclaracoes.svelte

@@ -1,159 +1,201 @@
-<script lang="ts">
-  import { modelosDeclaracoes } from "$lib/utils/modelosDeclaracoes";
-  import {
-    gerarDeclaracaoAcumulacaoCargo,
-    gerarDeclaracaoDependentesIR,
-    gerarDeclaracaoIdoneidade,
-    gerarTermoNepotismo,
-    gerarTermoOpcaoRemuneracao,
-    downloadBlob
-  } from "$lib/utils/declaracoesGenerator";
-  import { FileText, Info } from "lucide-svelte";
-
-  interface Props {
-    funcionario?: any;
-    showPreencherButton?: boolean;
-  }
-
-  let { funcionario, showPreencherButton = false }: Props = $props();
-  let generating = $state(false);
-
-  function baixarModelo(arquivoUrl: string, nomeModelo: string) {
-    const link = document.createElement('a');
-    link.href = arquivoUrl;
-    link.download = nomeModelo + '.pdf';
-    link.target = '_blank';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-
-  async function gerarPreenchido(modeloId: string) {
-    if (!funcionario) {
-      alert('Dados do funcionário não disponíveis');
-      return;
-    }
-
-    try {
-      generating = true;
-      let blob: Blob;
-      let nomeArquivo: string;
-
-      switch (modeloId) {
-        case 'acumulacao_cargo':
-          blob = await gerarDeclaracaoAcumulacaoCargo(funcionario);
-          nomeArquivo = `Declaracao_Acumulacao_Cargo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'dependentes_ir':
-          blob = await gerarDeclaracaoDependentesIR(funcionario);
-          nomeArquivo = `Declaracao_Dependentes_IR_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'idoneidade':
-          blob = await gerarDeclaracaoIdoneidade(funcionario);
-          nomeArquivo = `Declaracao_Idoneidade_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'nepotismo':
-          blob = await gerarTermoNepotismo(funcionario);
-          nomeArquivo = `Termo_Nepotismo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'opcao_remuneracao':
-          blob = await gerarTermoOpcaoRemuneracao(funcionario);
-          nomeArquivo = `Termo_Opcao_Remuneracao_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        default:
-          alert('Modelo não encontrado');
-          return;
-      }
-
-      downloadBlob(blob, nomeArquivo);
-    } catch (error) {
-      console.error('Erro ao gerar declaração:', error);
-      alert('Erro ao gerar declaração preenchida');
-    } finally {
-      generating = false;
-    }
-  }
-</script>
-
-<div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <h2 class="card-title text-xl border-b pb-3">
-      <FileText class="h-5 w-5" strokeWidth={2} />
-      Modelos de Declarações
-    </h2>
-
-    <div class="alert alert-info shadow-sm mb-4">
-      <Info class="stroke-current shrink-0 h-5 w-5" strokeWidth={2} />
-      <div class="text-sm">
-        <p class="font-semibold">Baixe os modelos, preencha, assine e faça upload no sistema</p>
-        <p class="text-xs opacity-80 mt-1">Estes documentos são necessários para completar o cadastro do funcionário</p>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {#each modelosDeclaracoes as modelo}
-        <div class="card bg-base-200 shadow-sm hover:shadow-md transition-shadow">
-          <div class="card-body p-4">
-            <div class="flex items-start gap-3">
-              <!-- Ícone PDF -->
-              <div class="flex-shrink-0 w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                </svg>
-              </div>
-
-              <!-- Conteúdo -->
-              <div class="flex-1 min-w-0">
-                <h3 class="font-semibold text-sm mb-1 line-clamp-2">{modelo.nome}</h3>
-                <p class="text-xs text-base-content/70 mb-3 line-clamp-2">{modelo.descricao}</p>
-
-                <!-- Ações -->
-                <div class="flex flex-col gap-2">
-                  <button
-                    type="button"
-                    class="btn btn-primary btn-xs gap-1"
-                    onclick={() => baixarModelo(modelo.arquivo, modelo.nome)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                    </svg>
-                    Baixar Modelo
-                  </button>
-
-                  {#if showPreencherButton && modelo.podePreencherAutomaticamente && funcionario}
-                    <button
-                      type="button"
-                      class="btn btn-outline btn-xs gap-1"
-                      onclick={() => gerarPreenchido(modelo.id)}
-                      disabled={generating}
-                    >
-                      {#if generating}
-                        <span class="loading loading-spinner loading-xs"></span>
-                        Gerando...
-                      {:else}
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                        </svg>
-                        Gerar Preenchido
-                      {/if}
-                    </button>
-                  {/if}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      {/each}
-    </div>
-
-    <div class="mt-4 text-xs text-base-content/60 text-center">
-      <p>💡 Dica: Após preencher e assinar os documentos, faça upload na seção "Documentação Anexa"</p>
-    </div>
-  </div>
-</div>
-
+<script lang="ts">
+	import { modelosDeclaracoes } from '$lib/utils/modelosDeclaracoes';
+	import {
+		gerarDeclaracaoAcumulacaoCargo,
+		gerarDeclaracaoDependentesIR,
+		gerarDeclaracaoIdoneidade,
+		gerarTermoNepotismo,
+		gerarTermoOpcaoRemuneracao,
+		downloadBlob
+	} from '$lib/utils/declaracoesGenerator';
+	import { FileText, Info } from 'lucide-svelte';
+
+	interface Props {
+		funcionario?: any;
+		showPreencherButton?: boolean;
+	}
+
+	let { funcionario, showPreencherButton = false }: Props = $props();
+	let generating = $state(false);
+
+	function baixarModelo(arquivoUrl: string, nomeModelo: string) {
+		const link = document.createElement('a');
+		link.href = arquivoUrl;
+		link.download = nomeModelo + '.pdf';
+		link.target = '_blank';
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
+
+	async function gerarPreenchido(modeloId: string) {
+		if (!funcionario) {
+			alert('Dados do funcionário não disponíveis');
+			return;
+		}
+
+		try {
+			generating = true;
+			let blob: Blob;
+			let nomeArquivo: string;
+
+			switch (modeloId) {
+				case 'acumulacao_cargo':
+					blob = await gerarDeclaracaoAcumulacaoCargo(funcionario);
+					nomeArquivo = `Declaracao_Acumulacao_Cargo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+					break;
+
+				case 'dependentes_ir':
+					blob = await gerarDeclaracaoDependentesIR(funcionario);
+					nomeArquivo = `Declaracao_Dependentes_IR_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+					break;
+
+				case 'idoneidade':
+					blob = await gerarDeclaracaoIdoneidade(funcionario);
+					nomeArquivo = `Declaracao_Idoneidade_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+					break;
+
+				case 'nepotismo':
+					blob = await gerarTermoNepotismo(funcionario);
+					nomeArquivo = `Termo_Nepotismo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+					break;
+
+				case 'opcao_remuneracao':
+					blob = await gerarTermoOpcaoRemuneracao(funcionario);
+					nomeArquivo = `Termo_Opcao_Remuneracao_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+					break;
+
+				default:
+					alert('Modelo não encontrado');
+					return;
+			}
+
+			downloadBlob(blob, nomeArquivo);
+		} catch (error) {
+			console.error('Erro ao gerar declaração:', error);
+			alert('Erro ao gerar declaração preenchida');
+		} finally {
+			generating = false;
+		}
+	}
+</script>
+
+<div class="card bg-base-100 shadow-xl">
+	<div class="card-body">
+		<h2 class="card-title border-b pb-3 text-xl">
+			<FileText class="h-5 w-5" strokeWidth={2} />
+			Modelos de Declarações
+		</h2>
+
+		<div class="alert alert-info mb-4 shadow-sm">
+			<Info class="h-5 w-5 shrink-0 stroke-current" strokeWidth={2} />
+			<div class="text-sm">
+				<p class="font-semibold">Baixe os modelos, preencha, assine e faça upload no sistema</p>
+				<p class="mt-1 text-xs opacity-80">
+					Estes documentos são necessários para completar o cadastro do funcionário
+				</p>
+			</div>
+		</div>
+
+		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+			{#each modelosDeclaracoes as modelo}
+				<div class="card bg-base-200 shadow-sm transition-shadow hover:shadow-md">
+					<div class="card-body p-4">
+						<div class="flex items-start gap-3">
+							<!-- Ícone PDF -->
+							<div
+								class="bg-error/10 flex h-12 w-12 shrink-0 items-center justify-center rounded-lg"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-error h-6 w-6"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+									/>
+								</svg>
+							</div>
+
+							<!-- Conteúdo -->
+							<div class="min-w-0 flex-1">
+								<h3 class="mb-1 line-clamp-2 text-sm font-semibold">
+									{modelo.nome}
+								</h3>
+								<p class="text-base-content/70 mb-3 line-clamp-2 text-xs">
+									{modelo.descricao}
+								</p>
+
+								<!-- Ações -->
+								<div class="flex flex-col gap-2">
+									<button
+										type="button"
+										class="btn btn-primary btn-xs gap-1"
+										onclick={() => baixarModelo(modelo.arquivo, modelo.nome)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-3 w-3"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+											/>
+										</svg>
+										Baixar Modelo
+									</button>
+
+									{#if showPreencherButton && modelo.podePreencherAutomaticamente && funcionario}
+										<button
+											type="button"
+											class="btn btn-outline btn-xs gap-1"
+											onclick={() => gerarPreenchido(modelo.id)}
+											disabled={generating}
+										>
+											{#if generating}
+												<span class="loading loading-spinner loading-xs"></span>
+												Gerando...
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-3 w-3"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+													/>
+												</svg>
+												Gerar Preenchido
+											{/if}
+										</button>
+									{/if}
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<div class="text-base-content/60 mt-4 text-center text-xs">
+			<p>
+				💡 Dica: Após preencher e assinar os documentos, faça upload na seção "Documentação Anexa"
+			</p>
+		</div>
+	</div>
+</div>

apps/web/src/lib/components/ProtectedRoute.svelte

@@ -1,74 +1,121 @@
 <script lang="ts">
-  import { authStore } from "$lib/stores/auth.svelte";
-  import { goto } from "$app/navigation";
-  import { onMount } from "svelte";
-  import { page } from "$app/stores";
-  import type { Snippet } from "svelte";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { useQuery } from 'convex-svelte';
+	import type { Snippet } from 'svelte';
 
-  let { 
-    children,
-    requireAuth = true,
-    allowedRoles = [],
-    maxLevel = 3,
-    redirectTo = "/"
-  }: {
-    children: Snippet;
-    requireAuth?: boolean;
-    allowedRoles?: string[];
-    maxLevel?: number;
-    redirectTo?: string;
-  } = $props();
+	const {
+		children,
+		requireAuth = true,
+		allowedRoles = [],
+		redirectTo = '/'
+	}: {
+		children: Snippet;
+		requireAuth?: boolean;
+		allowedRoles?: string[];
+		redirectTo?: string;
+	} = $props();
 
-  let isChecking = $state(true);
-  let hasAccess = $state(false);
+	let isChecking = $state(true);
+	let hasAccess = $state(false);
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+	let hasCheckedOnce = $state(false);
+	let lastUserState = $state<typeof currentUser | undefined>(undefined);
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  onMount(() => {
-    checkAccess();
-  });
+	// Usar $effect para reagir apenas às mudanças na query currentUser
+	$effect(() => {
+		// Não verificar novamente se já tem acesso concedido e usuário está autenticado
+		if (hasAccess && currentUser?.data) {
+			lastUserState = currentUser;
+			return;
+		}
 
-  function checkAccess() {
-    isChecking = true;
+		// Evitar loop: só verificar se currentUser realmente mudou
+		// Comparar dados, não o objeto proxy
+		const currentData = currentUser?.data;
+		const lastData = lastUserState?.data;
+		if (currentData !== lastData || (currentUser === undefined) !== (lastUserState === undefined)) {
+			lastUserState = currentUser;
+			checkAccess();
+		}
+	});
 
-    // Aguardar um pouco para o authStore carregar do localStorage
-    setTimeout(() => {
-      // Verificar autenticação
-      if (requireAuth && !authStore.autenticado) {
-        const currentPath = window.location.pathname;
-        window.location.href = `${redirectTo}?error=auth_required&redirect=${encodeURIComponent(currentPath)}`;
-        return;
-      }
+	function checkAccess() {
+		// Limpar timeout anterior se existir
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
 
-      // Verificar roles
-      if (allowedRoles.length > 0 && authStore.usuario) {
-        const hasRole = allowedRoles.includes(authStore.usuario.role.nome);
-        if (!hasRole) {
-          const currentPath = window.location.pathname;
-          window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
-          return;
-        }
-      }
+		// Se a query ainda está carregando (undefined), aguardar
+		if (currentUser === undefined) {
+			isChecking = true;
+			hasAccess = false;
+			return;
+		}
 
-      // Verificar nível
-      if (authStore.usuario && authStore.usuario.role.nivel > maxLevel) {
-        const currentPath = window.location.pathname;
-        window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
-        return;
-      }
+		// Marcar que já verificou pelo menos uma vez
+		hasCheckedOnce = true;
 
-      hasAccess = true;
-      isChecking = false;
-    }, 100);
-  }
+		// Se a query retornou dados, verificar autenticação
+		if (currentUser?.data) {
+			// Verificar roles
+			if (allowedRoles.length > 0) {
+				const hasRole = allowedRoles.includes(currentUser.data.role?.nome ?? '');
+				if (!hasRole) {
+					const currentPath = window.location.pathname;
+					window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
+					return;
+				}
+			}
+
+			// Se chegou aqui, permitir acesso
+			hasAccess = true;
+			isChecking = false;
+			return;
+		}
+
+		// Se não tem dados e requer autenticação
+		if (requireAuth && !currentUser?.data) {
+			// Se a query já retornou (não está mais undefined), finalizar estado
+			if (currentUser !== undefined) {
+				const currentPath = window.location.pathname;
+				// Evitar redirecionamento em loop - verificar se já está na URL de erro
+				const urlParams = new URLSearchParams(window.location.search);
+				if (!urlParams.has('error')) {
+					// Só redirecionar se não estiver em loop
+					if (!hasCheckedOnce || currentUser === null) {
+						window.location.href = `${redirectTo}?error=auth_required&redirect=${encodeURIComponent(currentPath)}`;
+						return;
+					}
+				}
+				// Se já tem erro na URL, permitir renderização para mostrar o alerta
+				isChecking = false;
+				hasAccess = true;
+				return;
+			}
+
+			// Se ainda está carregando (undefined), aguardar
+			isChecking = true;
+			hasAccess = false;
+			return;
+		}
+
+		// Se não requer autenticação, permitir acesso
+		if (!requireAuth) {
+			hasAccess = true;
+			isChecking = false;
+		}
+	}
 </script>
 
 {#if isChecking}
-  <div class="flex justify-center items-center min-h-screen">
-    <div class="text-center">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-      <p class="mt-4 text-base-content/70">Verificando permissões...</p>
-    </div>
-  </div>
+	<div class="flex min-h-screen items-center justify-center">
+		<div class="text-center">
+			<span class="loading loading-spinner loading-lg text-primary"></span>
+			<p class="text-base-content/70 mt-4">Verificando permissões...</p>
+		</div>
+	</div>
 {:else if hasAccess}
-  {@render children()}
+	{@render children()}
 {/if}
-

apps/web/src/lib/components/PushNotificationManager.svelte

@@ -1,140 +1,136 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import {
-    registrarServiceWorker,
-    solicitarPushSubscription,
-    subscriptionToJSON,
-    removerPushSubscription,
-  } from "$lib/utils/notifications";
+	import { onMount } from 'svelte';
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { useQuery } from 'convex-svelte';
+	import {
+		solicitarPushSubscription,
+		subscriptionToJSON,
+		removerPushSubscription
+	} from '$lib/utils/notifications';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Capturar erros de Promise não tratados relacionados a message channel
-  // Este erro geralmente vem de extensões do Chrome ou comunicação com Service Worker
-  if (typeof window !== "undefined") {
-    window.addEventListener(
-      "unhandledrejection",
-      (event: PromiseRejectionEvent) => {
-        const reason = event.reason;
-        const errorMessage =
-          reason?.message || reason?.toString() || "";
-        
-        // Filtrar apenas erros relacionados a message channel fechado
-        if (
-          errorMessage.includes("message channel closed") ||
-          errorMessage.includes("asynchronous response") ||
-          (errorMessage.includes("message channel") && 
-           errorMessage.includes("closed"))
-        ) {
-          // Prevenir que o erro apareça no console
-          event.preventDefault();
-          // Silenciar o erro - é geralmente causado por extensões do Chrome
-          return false;
-        }
-      },
-      { capture: true }
-    );
-  }
+	// Capturar erros de Promise não tratados relacionados a message channel
+	// Este erro geralmente vem de extensões do Chrome ou comunicação com Service Worker
+	if (typeof window !== 'undefined') {
+		window.addEventListener(
+			'unhandledrejection',
+			(event: PromiseRejectionEvent) => {
+				const reason = event.reason;
+				const errorMessage = reason?.message || reason?.toString() || '';
 
-  onMount(async () => {
-    let checkAuth: ReturnType<typeof setInterval> | null = null;
-    let mounted = true;
+				// Filtrar apenas erros relacionados a message channel fechado
+				if (
+					errorMessage.includes('message channel closed') ||
+					errorMessage.includes('asynchronous response') ||
+					(errorMessage.includes('message channel') && errorMessage.includes('closed'))
+				) {
+					// Prevenir que o erro apareça no console
+					event.preventDefault();
+					// Silenciar o erro - é geralmente causado por extensões do Chrome
+					return false;
+				}
+			},
+			{ capture: true }
+		);
+	}
 
-    // Aguardar usuário estar autenticado
-    checkAuth = setInterval(async () => {
-      if (authStore.usuario && mounted) {
-        clearInterval(checkAuth!);
-        checkAuth = null;
-        try {
-          await registrarPushSubscription();
-        } catch (error) {
-          // Silenciar erros de push subscription para evitar spam no console
-          if (error instanceof Error && !error.message.includes("message channel")) {
-            console.error("Erro ao configurar push notifications:", error);
-          }
-        }
-      }
-    }, 500);
+	onMount(async () => {
+		let checkAuth: ReturnType<typeof setInterval> | null = null;
+		let mounted = true;
 
-    // Limpar intervalo após 30 segundos (timeout)
-    const timeout = setTimeout(() => {
-      if (checkAuth) {
-        clearInterval(checkAuth);
-        checkAuth = null;
-      }
-    }, 30000);
+		// Aguardar usuário estar autenticado
+		checkAuth = setInterval(async () => {
+			if (currentUser?.data && mounted) {
+				clearInterval(checkAuth!);
+				checkAuth = null;
+				try {
+					await registrarPushSubscription();
+				} catch (error) {
+					// Silenciar erros de push subscription para evitar spam no console
+					if (error instanceof Error && !error.message.includes('message channel')) {
+						console.error('Erro ao configurar push notifications:', error);
+					}
+				}
+			}
+		}, 500);
 
-    return () => {
-      mounted = false;
-      if (checkAuth) {
-        clearInterval(checkAuth);
-      }
-      clearTimeout(timeout);
-    };
-  });
+		// Limpar intervalo após 30 segundos (timeout)
+		const timeout = setTimeout(() => {
+			if (checkAuth) {
+				clearInterval(checkAuth);
+				checkAuth = null;
+			}
+		}, 30000);
 
-  async function registrarPushSubscription() {
-    try {
-      // Verificar se Service Worker está disponível antes de tentar
-      if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
-        return;
-      }
+		return () => {
+			mounted = false;
+			if (checkAuth) {
+				clearInterval(checkAuth);
+			}
+			clearTimeout(timeout);
+		};
+	});
 
-      // Solicitar subscription com timeout para evitar travamentos
-      const subscriptionPromise = solicitarPushSubscription();
-      const timeoutPromise = new Promise<null>((resolve) => 
-        setTimeout(() => resolve(null), 5000)
-      );
+	async function registrarPushSubscription() {
+		try {
+			// Verificar se Service Worker está disponível antes de tentar
+			if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+				return;
+			}
 
-      const subscription = await Promise.race([subscriptionPromise, timeoutPromise]);
+			// Solicitar subscription com timeout para evitar travamentos
+			const subscriptionPromise = solicitarPushSubscription();
+			const timeoutPromise = new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000));
 
-      if (!subscription) {
-        // Não logar para evitar spam no console quando VAPID key não está configurada
-        return;
-      }
+			const subscription = await Promise.race([subscriptionPromise, timeoutPromise]);
 
-      // Converter para formato serializável
-      const subscriptionData = subscriptionToJSON(subscription);
+			if (!subscription) {
+				// Não logar para evitar spam no console quando VAPID key não está configurada
+				return;
+			}
 
-      // Registrar no backend com timeout
-      const mutationPromise = client.mutation(api.pushNotifications.registrarPushSubscription, {
-        endpoint: subscriptionData.endpoint,
-        keys: subscriptionData.keys,
-        userAgent: navigator.userAgent,
-      });
+			// Converter para formato serializável
+			const subscriptionData = subscriptionToJSON(subscription);
 
-      const timeoutMutationPromise = new Promise<{ sucesso: false; erro: string }>((resolve) =>
-        setTimeout(() => resolve({ sucesso: false, erro: "Timeout" }), 5000)
-      );
+			// Registrar no backend com timeout
+			const mutationPromise = client.mutation(api.pushNotifications.registrarPushSubscription, {
+				endpoint: subscriptionData.endpoint,
+				keys: subscriptionData.keys,
+				userAgent: navigator.userAgent
+			});
 
-      const resultado = await Promise.race([mutationPromise, timeoutMutationPromise]);
+			const timeoutMutationPromise = new Promise<{
+				sucesso: false;
+				erro: string;
+			}>((resolve) => setTimeout(() => resolve({ sucesso: false, erro: 'Timeout' }), 5000));
 
-      if (resultado.sucesso) {
-        console.log("✅ Push subscription registrada com sucesso");
-      } else if (resultado.erro && !resultado.erro.includes("Timeout")) {
-        console.error("❌ Erro ao registrar push subscription:", resultado.erro);
-      }
-    } catch (error) {
-      // Ignorar erros relacionados a message channel fechado
-      if (error instanceof Error && error.message.includes("message channel")) {
-        return;
-      }
-      console.error("❌ Erro ao configurar push notifications:", error);
-    }
-  }
+			const resultado = await Promise.race([mutationPromise, timeoutMutationPromise]);
 
-  // Remover subscription ao fazer logout
-  $effect(() => {
-    if (!authStore.usuario) {
-      removerPushSubscription().then(() => {
-        console.log("Push subscription removida");
-      });
-    }
-  });
+			if (resultado.sucesso) {
+				console.log('✅ Push subscription registrada com sucesso');
+			} else if (resultado.erro && !resultado.erro.includes('Timeout')) {
+				console.error('❌ Erro ao registrar push subscription:', resultado.erro);
+			}
+		} catch (error) {
+			// Ignorar erros relacionados a message channel fechado
+			if (error instanceof Error && error.message.includes('message channel')) {
+				return;
+			}
+			console.error('❌ Erro ao configurar push notifications:', error);
+		}
+	}
+
+	// Remover subscription ao fazer logout
+	$effect(() => {
+		if (!currentUser?.data) {
+			removerPushSubscription().then(() => {
+				console.log('Push subscription removida');
+			});
+		}
+	});
 </script>
 
 <!-- Componente invisível - apenas lógica -->
-

apps/web/src/lib/components/RelogioPrazo.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	const { dueDate, startedAt, finishedAt, status, expectedDuration } = $props<{
+		dueDate: number | undefined;
+		startedAt: number | undefined;
+		finishedAt: number | undefined;
+		status: 'pending' | 'in_progress' | 'completed' | 'blocked';
+		expectedDuration: number | undefined;
+	}>();
+
+	let now = $state(Date.now());
+
+	// Atualizar a cada minuto
+	$effect(() => {
+		const interval = setInterval(() => {
+			now = Date.now();
+		}, 60000); // Atualizar a cada minuto
+
+		return () => clearInterval(interval);
+	});
+
+	let tempoInfo = $derived.by(() => {
+		// Para etapas concluídas
+		if (status === 'completed' && finishedAt && startedAt) {
+			const tempoExecucao = finishedAt - startedAt;
+			const diasExecucao = Math.floor(tempoExecucao / (1000 * 60 * 60 * 24));
+			const horasExecucao = Math.floor((tempoExecucao % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+
+			// Verificar se foi dentro ou fora do prazo
+			const dentroDoPrazo = dueDate ? finishedAt <= dueDate : true;
+			const diasAtrasado =
+				!dentroDoPrazo && dueDate ? Math.floor((finishedAt - dueDate) / (1000 * 60 * 60 * 24)) : 0;
+
+			return {
+				tipo: 'concluida',
+				dias: diasExecucao,
+				horas: horasExecucao,
+				dentroDoPrazo,
+				diasAtrasado
+			};
+		}
+
+		// Para etapas em andamento
+		if (status === 'in_progress' && startedAt && expectedDuration) {
+			// Calcular prazo baseado em startedAt + expectedDuration
+			const prazoCalculado = startedAt + expectedDuration * 24 * 60 * 60 * 1000;
+			const diff = prazoCalculado - now;
+			const dias = Math.floor(Math.abs(diff) / (1000 * 60 * 60 * 24));
+			const horas = Math.floor((Math.abs(diff) % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+
+			return {
+				tipo: 'andamento',
+				atrasado: diff < 0,
+				dias,
+				horas
+			};
+		}
+
+		// Para etapas pendentes ou bloqueadas, não mostrar nada
+		return null;
+	});
+</script>
+
+{#if tempoInfo}
+	{@const info = tempoInfo}
+	<div class="flex items-center gap-2">
+		{#if info.tipo === 'concluida'}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4 {info.dentroDoPrazo ? 'text-info' : 'text-error'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			<span class="text-sm font-medium {info.dentroDoPrazo ? 'text-info' : 'text-error'}">
+				Concluída em {info.dias > 0 ? `${info.dias} ${info.dias === 1 ? 'dia' : 'dias'} e ` : ''}
+				{info.horas}
+				{info.horas === 1 ? 'hora' : 'horas'}
+				{#if !info.dentroDoPrazo && info.diasAtrasado > 0}
+					<span>
+						({info.diasAtrasado} {info.diasAtrasado === 1 ? 'dia' : 'dias'} fora do prazo)</span
+					>
+				{/if}
+			</span>
+		{:else if info.tipo === 'andamento'}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4 {info.atrasado ? 'text-error' : 'text-success'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			<span class="text-sm font-medium {info.atrasado ? 'text-error' : 'text-success'}">
+				{#if info.atrasado}
+					{info.dias > 0 ? `${info.dias} ${info.dias === 1 ? 'dia' : 'dias'} e ` : ''}
+					{info.horas}
+					{info.horas === 1 ? 'hora' : 'horas'} atrasado
+				{:else}
+					{info.dias > 0 ? `${info.dias} ${info.dias === 1 ? 'dia' : 'dias'} e ` : ''}
+					{info.horas}
+					{info.horas === 1 ? 'hora' : 'horas'} para concluir
+				{/if}
+			</span>
+		{/if}
+	</div>
+{/if}

apps/web/src/lib/components/ShineEffect.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div
+	class={[
+		'via-base-content/20 absolute inset-0 -translate-x-full bg-linear-to-r from-transparent to-transparent transition-transform duration-1000 group-hover:translate-x-full',
+		className
+	]}
+></div>

apps/web/src/lib/components/SolicitarFerias.svelte

@@ -1,304 +1,353 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  
-  interface Periodo {
-    id: string;
-    dataInicio: string;
-    dataFim: string;
-    diasCorridos: number;
-  }
-  
-  interface Props {
-    funcionarioId: string;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
-  
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
-  
-  const client = useConvexClient();
-  
-  let anoReferencia = $state(new Date().getFullYear());
-  let observacao = $state("");
-  let periodos = $state<Periodo[]>([]);
-  let processando = $state(false);
-  let erro = $state("");
-  
-  // Adicionar primeiro período ao carregar
-  $effect(() => {
-    if (periodos.length === 0) {
-      adicionarPeriodo();
-    }
-  });
-  
-  function adicionarPeriodo() {
-    if (periodos.length >= 3) {
-      erro = "Máximo de 3 períodos permitidos";
-      return;
-    }
-    
-    periodos.push({
-      id: crypto.randomUUID(),
-      dataInicio: "",
-      dataFim: "",
-      diasCorridos: 0,
-    });
-  }
-  
-  function removerPeriodo(id: string) {
-    periodos = periodos.filter(p => p.id !== id);
-  }
-  
-  function calcularDias(periodo: Periodo) {
-    if (!periodo.dataInicio || !periodo.dataFim) {
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const inicio = new Date(periodo.dataInicio);
-    const fim = new Date(periodo.dataFim);
-    
-    if (fim < inicio) {
-      erro = "Data final não pode ser anterior à data inicial";
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const diff = fim.getTime() - inicio.getTime();
-    const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-    periodo.diasCorridos = dias;
-    erro = "";
-  }
-  
-  function validarPeriodos(): boolean {
-    if (periodos.length === 0) {
-      erro = "Adicione pelo menos 1 período";
-      return false;
-    }
-    
-    for (const periodo of periodos) {
-      if (!periodo.dataInicio || !periodo.dataFim) {
-        erro = "Preencha as datas de todos os períodos";
-        return false;
-      }
-      
-      if (periodo.diasCorridos <= 0) {
-        erro = "Todos os períodos devem ter pelo menos 1 dia";
-        return false;
-      }
-    }
-    
-    // Verificar sobreposição de períodos
-    for (let i = 0; i < periodos.length; i++) {
-      for (let j = i + 1; j < periodos.length; j++) {
-        const p1Inicio = new Date(periodos[i].dataInicio);
-        const p1Fim = new Date(periodos[i].dataFim);
-        const p2Inicio = new Date(periodos[j].dataInicio);
-        const p2Fim = new Date(periodos[j].dataFim);
-        
-        if (
-          (p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
-          (p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
-          (p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
-        ) {
-          erro = "Os períodos não podem se sobrepor";
-          return false;
-        }
-      }
-    }
-    
-    return true;
-  }
-  
-  async function enviarSolicitacao() {
-    if (!validarPeriodos()) return;
-    
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.criarSolicitacao, {
-        funcionarioId: funcionarioId as any,
-        anoReferencia,
-        periodos: periodos.map(p => ({
-          dataInicio: p.dataInicio,
-          dataFim: p.dataFim,
-          diasCorridos: p.diasCorridos,
-        })),
-        observacao: observacao || undefined,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e: any) {
-      erro = e.message || "Erro ao enviar solicitação";
-    } finally {
-      processando = false;
-    }
-  }
-  
-  $effect(() => {
-    periodos.forEach(p => calcularDias(p));
-  });
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { useConvexClient } from 'convex-svelte';
+
+	interface Periodo {
+		id: string;
+		dataInicio: string;
+		dataFim: string;
+		diasCorridos: number;
+	}
+
+	interface Props {
+		funcionarioId: string;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	const { funcionarioId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let anoReferencia = $state(new Date().getFullYear());
+	let observacao = $state('');
+	let periodos = $state<Periodo[]>([]);
+	let processando = $state(false);
+	let erro = $state('');
+
+	// Adicionar primeiro período ao carregar
+	$effect(() => {
+		if (periodos.length === 0) {
+			adicionarPeriodo();
+		}
+	});
+
+	function adicionarPeriodo() {
+		if (periodos.length >= 3) {
+			erro = 'Máximo de 3 períodos permitidos';
+			return;
+		}
+
+		periodos.push({
+			id: crypto.randomUUID(),
+			dataInicio: '',
+			dataFim: '',
+			diasCorridos: 0
+		});
+	}
+
+	function removerPeriodo(id: string) {
+		periodos = periodos.filter((p) => p.id !== id);
+	}
+
+	function calcularDias(periodo: Periodo) {
+		if (!periodo.dataInicio || !periodo.dataFim) {
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const inicio = new Date(periodo.dataInicio);
+		const fim = new Date(periodo.dataFim);
+
+		if (fim < inicio) {
+			erro = 'Data final não pode ser anterior à data inicial';
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const diff = fim.getTime() - inicio.getTime();
+		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+		periodo.diasCorridos = dias;
+		erro = '';
+	}
+
+	function validarPeriodos(): boolean {
+		if (periodos.length === 0) {
+			erro = 'Adicione pelo menos 1 período';
+			return false;
+		}
+
+		for (const periodo of periodos) {
+			if (!periodo.dataInicio || !periodo.dataFim) {
+				erro = 'Preencha as datas de todos os períodos';
+				return false;
+			}
+
+			if (periodo.diasCorridos <= 0) {
+				erro = 'Todos os períodos devem ter pelo menos 1 dia';
+				return false;
+			}
+		}
+
+		// Verificar sobreposição de períodos
+		for (let i = 0; i < periodos.length; i++) {
+			for (let j = i + 1; j < periodos.length; j++) {
+				const p1Inicio = new Date(periodos[i].dataInicio);
+				const p1Fim = new Date(periodos[i].dataFim);
+				const p2Inicio = new Date(periodos[j].dataInicio);
+				const p2Fim = new Date(periodos[j].dataFim);
+
+				if (
+					(p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
+					(p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
+					(p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
+				) {
+					erro = 'Os períodos não podem se sobrepor';
+					return false;
+				}
+			}
+		}
+
+		return true;
+	}
+
+	async function enviarSolicitacao() {
+		if (!validarPeriodos()) return;
+
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.criarSolicitacao, {
+				funcionarioId: funcionarioId as any,
+				anoReferencia,
+				periodos: periodos.map((p) => ({
+					dataInicio: p.dataInicio,
+					dataFim: p.dataFim,
+					diasCorridos: p.diasCorridos
+				})),
+				observacao: observacao || undefined
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e: any) {
+			erro = e.message || 'Erro ao enviar solicitação';
+		} finally {
+			processando = false;
+		}
+	}
+
+	$effect(() => {
+		periodos.forEach((p) => calcularDias(p));
+	});
 </script>
 
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <h2 class="card-title text-2xl mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-      </svg>
-      Solicitar Férias
-    </h2>
-    
-    <!-- Ano de Referência -->
-    <div class="form-control">
-      <label class="label" for="ano-referencia">
-        <span class="label-text font-semibold">Ano de Referência</span>
-      </label>
-      <input
-        id="ano-referencia"
-        type="number"
-        class="input input-bordered w-full max-w-xs"
-        bind:value={anoReferencia}
-        min={new Date().getFullYear()}
-        max={new Date().getFullYear() + 2}
-      />
-    </div>
-    
-    <!-- Períodos -->
-    <div class="mt-6">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-semibold text-lg">Períodos ({periodos.length}/3)</h3>
-        {#if periodos.length < 3}
-          <button
-            type="button"
-            class="btn btn-sm btn-primary gap-2"
-            onclick={adicionarPeriodo}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
-            Adicionar Período
-          </button>
-        {/if}
-      </div>
-      
-      <div class="space-y-4">
-        {#each periodos as periodo, index}
-          <div class="card bg-base-200 border border-base-300">
-            <div class="card-body p-4">
-              <div class="flex items-center justify-between mb-3">
-                <h4 class="font-medium">Período {index + 1}</h4>
-                {#if periodos.length > 1}
-                  <button
-                    type="button"
-                    class="btn btn-xs btn-error btn-square"
-                    aria-label="Remover período"
-                    onclick={() => removerPeriodo(periodo.id)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                {/if}
-              </div>
-              
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="form-control">
-                  <label class="label" for={`inicio-${periodo.id}`}>
-                    <span class="label-text">Data Início</span>
-                  </label>
-                  <input
-                    id={`inicio-${periodo.id}`}
-                    type="date"
-                    class="input input-bordered input-sm"
-                    bind:value={periodo.dataInicio}
-                    onchange={() => calcularDias(periodo)}
-                  />
-                </div>
-                
-                <div class="form-control">
-                  <label class="label" for={`fim-${periodo.id}`}>
-                    <span class="label-text">Data Fim</span>
-                  </label>
-                  <input
-                    id={`fim-${periodo.id}`}
-                    type="date"
-                    class="input input-bordered input-sm"
-                    bind:value={periodo.dataFim}
-                    onchange={() => calcularDias(periodo)}
-                  />
-                </div>
-                
-                <div class="form-control">
-                  <label class="label" for={`dias-${periodo.id}`}>
-                    <span class="label-text">Dias Corridos</span>
-                  </label>
-                  <div id={`dias-${periodo.id}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
-                    <span class="font-bold text-lg">{periodo.diasCorridos}</span>
-                    <span class="ml-1 text-sm">dias</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-    
-    <!-- Observações -->
-    <div class="form-control mt-6">
-      <label class="label" for="observacao">
-        <span class="label-text font-semibold">Observações (opcional)</span>
-      </label>
-      <textarea
-        id="observacao"
-        class="textarea textarea-bordered h-24"
-        placeholder="Adicione observações sobre sua solicitação..."
-        bind:value={observacao}
-      ></textarea>
-    </div>
-    
-    <!-- Erro -->
-    {#if erro}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span>{erro}</span>
-      </div>
-    {/if}
-    
-    <!-- Ações -->
-    <div class="card-actions justify-end mt-6">
-      {#if onCancelar}
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={onCancelar}
-          disabled={processando}
-        >
-          Cancelar
-        </button>
-      {/if}
-      <button
-        type="button"
-        class="btn btn-primary gap-2"
-        onclick={enviarSolicitacao}
-        disabled={processando}
-      >
-        {#if processando}
-          <span class="loading loading-spinner loading-sm"></span>
-          Enviando...
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg>
-          Enviar Solicitação
-        {/if}
-      </button>
-    </div>
-  </div>
-</div>
+	<div class="card-body">
+		<h2 class="card-title mb-4 text-2xl">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+				/>
+			</svg>
+			Solicitar Férias
+		</h2>
 
+		<!-- Ano de Referência -->
+		<div class="form-control">
+			<label class="label" for="ano-referencia">
+				<span class="label-text font-semibold">Ano de Referência</span>
+			</label>
+			<input
+				id="ano-referencia"
+				type="number"
+				class="input input-bordered w-full max-w-xs"
+				bind:value={anoReferencia}
+				min={new Date().getFullYear()}
+				max={new Date().getFullYear() + 2}
+			/>
+		</div>
+
+		<!-- Períodos -->
+		<div class="mt-6">
+			<div class="mb-3 flex items-center justify-between">
+				<h3 class="text-lg font-semibold">Períodos ({periodos.length}/3)</h3>
+				{#if periodos.length < 3}
+					<button type="button" class="btn btn-sm btn-primary gap-2" onclick={adicionarPeriodo}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Adicionar Período
+					</button>
+				{/if}
+			</div>
+
+			<div class="space-y-4">
+				{#each periodos as periodo, index}
+					<div class="card bg-base-200 border-base-300 border">
+						<div class="card-body p-4">
+							<div class="mb-3 flex items-center justify-between">
+								<h4 class="font-medium">Período {index + 1}</h4>
+								{#if periodos.length > 1}
+									<button
+										type="button"
+										class="btn btn-xs btn-error"
+										aria-label="Remover período"
+										onclick={() => removerPeriodo(periodo.id)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-3 w-3"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/>
+										</svg>
+									</button>
+								{/if}
+							</div>
+
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+								<div class="form-control">
+									<label class="label" for={`inicio-${periodo.id}`}>
+										<span class="label-text">Data Início</span>
+									</label>
+									<input
+										id={`inicio-${periodo.id}`}
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={periodo.dataInicio}
+										onchange={() => calcularDias(periodo)}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for={`fim-${periodo.id}`}>
+										<span class="label-text">Data Fim</span>
+									</label>
+									<input
+										id={`fim-${periodo.id}`}
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={periodo.dataFim}
+										onchange={() => calcularDias(periodo)}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for={`dias-${periodo.id}`}>
+										<span class="label-text">Dias Corridos</span>
+									</label>
+									<div
+										id={`dias-${periodo.id}`}
+										class="bg-base-300 flex h-9 items-center rounded-lg px-3"
+										role="textbox"
+										aria-readonly="true"
+									>
+										<span class="text-lg font-bold">{periodo.diasCorridos}</span>
+										<span class="ml-1 text-sm">dias</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Observações -->
+		<div class="form-control mt-6">
+			<label class="label" for="observacao">
+				<span class="label-text font-semibold">Observações (opcional)</span>
+			</label>
+			<textarea
+				id="observacao"
+				class="textarea textarea-bordered h-24"
+				placeholder="Adicione observações sobre sua solicitação..."
+				bind:value={observacao}
+			></textarea>
+		</div>
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>{erro}</span>
+			</div>
+		{/if}
+
+		<!-- Ações -->
+		<div class="card-actions mt-6 justify-end">
+			{#if onCancelar}
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Cancelar
+				</button>
+			{/if}
+			<button
+				type="button"
+				class="btn btn-primary gap-2"
+				onclick={enviarSolicitacao}
+				disabled={processando}
+			>
+				{#if processando}
+					<span class="loading loading-spinner loading-sm"></span>
+					Enviando...
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+					Enviar Solicitação
+				{/if}
+			</button>
+		</div>
+	</div>
+</div>

apps/web/src/lib/components/almoxarifado/AlertaCard.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { AlertTriangle, Package } from 'lucide-svelte';
+
+	interface Props {
+		alerta: {
+			_id: Id<'alertasEstoque'>;
+			materialId: Id<'materiais'>;
+			tipo: 'estoque_minimo' | 'estoque_zerado' | 'reposicao_necessaria';
+			quantidadeAtual: number;
+			quantidadeMinima: number;
+			status: 'ativo' | 'resolvido' | 'ignorado';
+			criadoEm: number;
+		};
+		materialNome?: string;
+		materialCodigo?: string;
+	}
+
+	let { alerta, materialNome = 'Carregando...', materialCodigo = '' }: Props = $props();
+
+	function getTipoBadge(tipo: string) {
+		switch (tipo) {
+			case 'estoque_zerado':
+				return 'badge-error';
+			case 'estoque_minimo':
+				return 'badge-warning';
+			case 'reposicao_necessaria':
+				return 'badge-info';
+			default:
+				return 'badge-ghost';
+		}
+	}
+
+	function getTipoLabel(tipo: string) {
+		switch (tipo) {
+			case 'estoque_zerado':
+				return 'Estoque Zerado';
+			case 'estoque_minimo':
+				return 'Estoque Mínimo';
+			case 'reposicao_necessaria':
+				return 'Reposição Necessária';
+			default:
+				return tipo;
+		}
+	}
+
+	{@const diferenca = alerta.quantidadeMinima - alerta.quantidadeAtual}
+</script>
+
+<div class="card bg-base-100 shadow-lg border-2 {alerta.status === 'ativo' ? 'border-warning' : 'border-base-300'}">
+	<div class="card-body">
+		<div class="flex items-start justify-between mb-2">
+			<div class="flex-1">
+				<div class="flex items-center gap-2 mb-1">
+					<AlertTriangle class="h-5 w-5 text-warning" />
+					<h3 class="card-title text-lg">{materialNome}</h3>
+				</div>
+				{#if materialCodigo}
+					<p class="text-sm text-base-content/60 font-mono mb-2">Código: {materialCodigo}</p>
+				{/if}
+			</div>
+			<span class="badge {getTipoBadge(alerta.tipo)}">{getTipoLabel(alerta.tipo)}</span>
+		</div>
+
+		<div class="divider my-2"></div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<p class="text-xs text-base-content/60 mb-1">Quantidade Atual</p>
+				<p class="text-2xl font-bold text-error">{alerta.quantidadeAtual}</p>
+			</div>
+			<div>
+				<p class="text-xs text-base-content/60 mb-1">Quantidade Mínima</p>
+				<p class="text-xl font-medium">{alerta.quantidadeMinima}</p>
+			</div>
+		</div>
+
+		<div class="mt-2">
+			<p class="text-xs text-base-content/60 mb-1">Faltam</p>
+			<p class="text-lg font-bold text-warning">{diferenca} unidades</p>
+		</div>
+
+		<div class="mt-2 text-xs text-base-content/60">
+			Criado em: {new Date(alerta.criadoEm).toLocaleString('pt-BR')}
+		</div>
+	</div>
+</div>
+
+

apps/web/src/lib/components/almoxarifado/BarcodeScanner.svelte

@@ -0,0 +1,349 @@
+<script lang="ts">
+	import { onMount, onDestroy, tick } from 'svelte';
+	import { Html5Qrcode, type Html5QrcodeResult } from 'html5-qrcode';
+	import { Camera, X, Scan } from 'lucide-svelte';
+
+	interface Props {
+		onScan: (code: string) => void;
+		onError?: (error: string) => void;
+		enabled?: boolean;
+	}
+
+	let { onScan, onError, enabled = $bindable(false) }: Props = $props();
+
+	let scanner: Html5Qrcode | null = $state(null);
+	let scanning = $state(false);
+	let error = $state<string | null>(null);
+	let scannerElement = $state<HTMLDivElement | null>(null);
+	let inputBuffer = $state('');
+	let inputTimeout: ReturnType<typeof setTimeout> | null = null;
+	const scannerId = `barcode-scanner-${Math.random().toString(36).substring(7)}`;
+
+	// Configuração do scanner
+	const config = {
+		fps: 10,
+		qrbox: { width: 250, height: 250 },
+		aspectRatio: 1.0
+		// A biblioteca html5-qrcode suporta automaticamente vários formatos:
+		// EAN-13, EAN-8, UPC-A, UPC-E, Code 128, Code 39, Code 93, QR Code, etc.
+	};
+
+	async function startScanning() {
+		// Aguardar o DOM ser atualizado
+		await tick();
+		
+		// Verificar se o elemento existe no DOM
+		const element = document.getElementById(scannerId);
+		if (!element) {
+			// Tentar novamente após um pequeno delay
+			setTimeout(async () => {
+				const retryElement = document.getElementById(scannerId);
+				if (!retryElement) {
+					const errorMsg = 'Elemento do scanner não encontrado no DOM';
+					error = errorMsg;
+					scanning = false;
+					if (onError) {
+						onError(errorMsg);
+					}
+					return;
+				}
+				await startScanningInternal();
+			}, 100);
+			return;
+		}
+
+		await startScanningInternal();
+	}
+
+	async function startScanningInternal() {
+		const element = document.getElementById(scannerId);
+		if (!element) {
+			const errorMsg = 'Elemento do scanner não encontrado';
+			error = errorMsg;
+			scanning = false;
+			if (onError) {
+				onError(errorMsg);
+			}
+			return;
+		}
+
+		try {
+			error = null;
+			scanning = true;
+
+			scanner = new Html5Qrcode(scannerId);
+
+			// Tentar primeiro com câmera traseira (environment), depois frontal (user)
+			let cameraConfig = { facingMode: 'environment' as const };
+			
+			try {
+				await scanner.start(
+					cameraConfig,
+					config,
+					(decodedText: string, decodedResult: Html5QrcodeResult) => {
+						handleScannedCode(decodedText);
+					},
+					(errorMessage: string) => {
+						// Ignorar erros de leitura contínua
+						if (errorMessage.includes('No MultiFormat Readers')) {
+							return;
+						}
+					}
+				);
+			} catch (cameraError) {
+				// Se falhar com câmera traseira, tentar com frontal (útil para PC)
+				if (cameraConfig.facingMode === 'environment') {
+					console.log('Tentando câmera frontal...');
+					cameraConfig = { facingMode: 'user' };
+					await scanner.start(
+						cameraConfig,
+						config,
+						(decodedText: string, decodedResult: Html5QrcodeResult) => {
+							handleScannedCode(decodedText);
+						},
+						(errorMessage: string) => {
+							if (errorMessage.includes('No MultiFormat Readers')) {
+								return;
+							}
+						}
+					);
+				} else {
+					throw cameraError;
+				}
+			}
+		} catch (err) {
+			let errorMessage = 'Erro ao iniciar scanner';
+			
+			if (err instanceof Error) {
+				errorMessage = err.message;
+				
+				// Mensagens de erro mais amigáveis
+				if (errorMessage.includes('Permission denied') || errorMessage.includes('NotAllowedError')) {
+					errorMessage = 'Permissão de câmera negada. Por favor, permita o acesso à câmera nas configurações do navegador.';
+				} else if (errorMessage.includes('NotFoundError') || errorMessage.includes('No camera found')) {
+					errorMessage = 'Nenhuma câmera encontrada. Verifique se há uma câmera conectada ao dispositivo.';
+				} else if (errorMessage.includes('NotReadableError') || errorMessage.includes('TrackStartError')) {
+					errorMessage = 'Câmera está sendo usada por outro aplicativo. Feche outros aplicativos que possam estar usando a câmera.';
+				} else if (errorMessage.includes('OverconstrainedError')) {
+					errorMessage = 'Câmera não suporta as configurações necessárias.';
+				}
+			}
+			
+			error = errorMessage;
+			scanning = false;
+			
+			// Limpar scanner em caso de erro
+			if (scanner) {
+				try {
+					await scanner.clear();
+				} catch (clearErr) {
+					console.error('Erro ao limpar scanner:', clearErr);
+				}
+				scanner = null;
+			}
+			
+			if (onError) {
+				onError(errorMessage);
+			}
+			
+			console.error('Erro ao iniciar scanner:', err);
+		}
+	}
+
+	async function stopScanning() {
+		if (scanner) {
+			try {
+				await scanner.stop();
+				await scanner.clear();
+			} catch (err) {
+				console.error('Erro ao parar scanner:', err);
+			}
+			scanner = null;
+		}
+		scanning = false;
+		error = null;
+	}
+
+	function handleScannedCode(code: string) {
+		if (code && code.trim()) {
+			stopScanning();
+			enabled = false;
+			onScan(code.trim());
+		}
+	}
+
+	// Suporte para leitores USB/Bluetooth (captura de eventos de teclado)
+	function handleKeyPress(event: KeyboardEvent) {
+		// Ignorar se estiver digitando em um input
+		if (
+			event.target instanceof HTMLInputElement ||
+			event.target instanceof HTMLTextAreaElement ||
+			event.target instanceof HTMLSelectElement
+		) {
+			return;
+		}
+
+		// Leitores de código de barras geralmente enviam caracteres rapidamente
+		if (event.key === 'Enter' && inputBuffer.trim()) {
+			event.preventDefault();
+			handleScannedCode(inputBuffer.trim());
+			inputBuffer = '';
+			if (inputTimeout) {
+				clearTimeout(inputTimeout);
+				inputTimeout = null;
+			}
+			return;
+		}
+
+		// Acumular caracteres digitados rapidamente
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			inputBuffer += event.key;
+			if (inputTimeout) {
+				clearTimeout(inputTimeout);
+			}
+			inputTimeout = setTimeout(() => {
+				inputBuffer = '';
+			}, 100);
+		}
+	}
+
+	function toggleScanner() {
+		if (scanning) {
+			stopScanning();
+			enabled = false;
+		} else {
+			enabled = true;
+		}
+	}
+
+	$effect(() => {
+		if (enabled && !scanning) {
+			// Aguardar um pouco para garantir que o DOM foi atualizado
+			setTimeout(() => {
+				if (enabled && !scanning) {
+					startScanning();
+				}
+			}, 50);
+		} else if (!enabled && scanning) {
+			stopScanning();
+		}
+	});
+
+	onMount(() => {
+		window.addEventListener('keydown', handleKeyPress);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', handleKeyPress);
+		if (inputTimeout) {
+			clearTimeout(inputTimeout);
+		}
+		stopScanning();
+	});
+</script>
+
+<div class="barcode-scanner">
+	{#if enabled}
+		<div class="card bg-base-100 border border-base-300 shadow-xl">
+			<div class="card-body">
+				<div class="flex items-center justify-between mb-4">
+					<h3 class="text-lg font-semibold flex items-center gap-2">
+						<Scan class="h-5 w-5" />
+						Leitor de Código de Barras
+					</h3>
+					<button
+						type="button"
+						class="btn btn-sm btn-ghost"
+						onclick={() => {
+							enabled = false;
+						}}
+						aria-label="Fechar scanner"
+					>
+						<X class="h-5 w-5" />
+					</button>
+				</div>
+
+				{#if error}
+					<div class="alert alert-error mb-4">
+						<span>{error}</span>
+						<button
+							type="button"
+							class="btn btn-sm btn-ghost mt-2"
+							onclick={async () => {
+								error = null;
+								scanning = false;
+								// Limpar scanner anterior se existir
+								if (scanner) {
+									try {
+										await scanner.clear();
+									} catch (err) {
+										console.error('Erro ao limpar scanner:', err);
+									}
+									scanner = null;
+								}
+								// Aguardar um pouco antes de tentar novamente
+								await tick();
+								setTimeout(() => {
+									if (enabled && !scanning) {
+										startScanning();
+									}
+								}, 100);
+							}}
+						>
+							Tentar novamente
+						</button>
+					</div>
+				{/if}
+
+				<!-- Sempre renderizar o elemento quando enabled for true -->
+				<div class="relative">
+					<div id={scannerId} bind:this={scannerElement}></div>
+					{#if scanning}
+						<div class="mt-4 text-center">
+							<p class="text-sm text-base-content/70">
+								Posicione o código de barras dentro da área de leitura
+							</p>
+							<p class="text-xs text-base-content/50 mt-2">
+								Ou use um leitor USB/Bluetooth para escanear
+							</p>
+						</div>
+					{:else if !error}
+						<div class="text-center py-8">
+							<Camera class="h-16 w-16 mx-auto mb-4 text-base-content/30" />
+							<p class="text-base-content/70">Iniciando scanner...</p>
+						</div>
+					{/if}
+				</div>
+
+				<div class="card-actions justify-end mt-4">
+					<button type="button" class="btn btn-ghost" onclick={() => { enabled = false; }}>
+						Cancelar
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else}
+		<button
+			type="button"
+			class="btn btn-outline btn-primary"
+			onclick={toggleScanner}
+			aria-label="Abrir leitor de código de barras"
+		>
+			<Scan class="h-5 w-5" />
+			Ler Código de Barras
+		</button>
+	{/if}
+</div>
+
+<style>
+	.barcode-scanner {
+		position: relative;
+	}
+
+	[id^='barcode-scanner-'] {
+		width: 100%;
+		max-width: 500px;
+		margin: 0 auto;
+	}
+</style>
+

apps/web/src/lib/components/almoxarifado/EstoqueGauge.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	interface Props {
+		estoqueAtual: number;
+		estoqueMinimo: number;
+		estoqueMaximo?: number;
+		unidadeMedida: string;
+	}
+
+	let { estoqueAtual, estoqueMinimo, estoqueMaximo, unidadeMedida }: Props = $props();
+
+	{@const porcentagem = estoqueMaximo
+		? Math.min(100, (estoqueAtual / estoqueMaximo) * 100)
+		: estoqueAtual > estoqueMinimo
+			? 100
+			: Math.max(0, (estoqueAtual / estoqueMinimo) * 100)}
+
+	{@const cor = estoqueAtual <= estoqueMinimo
+		? 'text-error'
+		: estoqueMaximo && estoqueAtual >= estoqueMaximo * 0.8
+			? 'text-warning'
+			: 'text-success'}
+
+	{@const corBarra = estoqueAtual <= estoqueMinimo
+		? 'bg-error'
+		: estoqueMaximo && estoqueAtual >= estoqueMaximo * 0.8
+			? 'bg-warning'
+			: 'bg-success'}
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="flex items-center justify-between">
+		<span class="text-sm font-medium">Estoque</span>
+		<span class="text-sm font-bold {cor}">
+			{estoqueAtual} {unidadeMedida}
+		</span>
+	</div>
+	<div class="w-full bg-base-300 rounded-full h-3 overflow-hidden">
+		<div
+			class="h-full {corBarra} transition-all duration-500"
+			style="width: {porcentagem}%"
+		></div>
+	</div>
+	<div class="flex items-center justify-between text-xs text-base-content/60">
+		<span>Mín: {estoqueMinimo}</span>
+		{#if estoqueMaximo}
+			<span>Máx: {estoqueMaximo}</span>
+		{/if}
+	</div>
+</div>
+
+

apps/web/src/lib/components/almoxarifado/HistoricoTimeline.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Clock, User, FileText } from 'lucide-svelte';
+
+	interface HistoricoItem {
+		acao: string;
+		usuarioId: string;
+		usuarioNome?: string;
+		timestamp: number;
+		observacoes?: string;
+		dadosAnteriores?: string;
+		dadosNovos?: string;
+	}
+
+	interface Props {
+		historico: HistoricoItem[];
+	}
+
+	let { historico }: Props = $props();
+
+	function getAcaoLabel(acao: string) {
+		switch (acao) {
+			case 'criacao':
+				return 'Criação';
+			case 'edicao':
+				return 'Edição';
+			case 'exclusao':
+				return 'Exclusão';
+			case 'movimentacao':
+				return 'Movimentação';
+			default:
+				return acao;
+		}
+	}
+
+	function getAcaoColor(acao: string) {
+		switch (acao) {
+			case 'criacao':
+				return 'text-success';
+			case 'edicao':
+				return 'text-info';
+			case 'exclusao':
+				return 'text-error';
+			case 'movimentacao':
+				return 'text-warning';
+			default:
+				return 'text-base-content';
+		}
+	}
+</script>
+
+<div class="space-y-4">
+	{#each historico as item, index}
+		<div class="flex gap-4">
+			<!-- Linha vertical -->
+			{#if index < historico.length - 1}
+				<div class="flex flex-col items-center">
+					<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+						<Clock class="h-6 w-6 text-primary" />
+					</div>
+					<div class="w-0.5 h-full bg-base-300 my-2"></div>
+				</div>
+			{:else}
+				<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+					<Clock class="h-6 w-6 text-primary" />
+				</div>
+			{/if}
+
+			<!-- Conteúdo -->
+			<div class="flex-1 pb-4">
+				<div class="card bg-base-100 shadow">
+					<div class="card-body p-4">
+						<div class="flex items-center justify-between mb-2">
+							<div class="flex items-center gap-2">
+								<User class="h-4 w-4 text-base-content/60" />
+								<span class="font-medium">{item.usuarioNome || 'Usuário'}</span>
+							</div>
+							<span class="badge {getAcaoColor(item.acao)} badge-outline">
+								{getAcaoLabel(item.acao)}
+							</span>
+						</div>
+						<p class="text-sm text-base-content/60 mb-2">
+							{new Date(item.timestamp).toLocaleString('pt-BR')}
+						</p>
+						{#if item.observacoes}
+							<div class="flex items-start gap-2 mt-2">
+								<FileText class="h-4 w-4 text-base-content/60 mt-0.5" />
+								<p class="text-sm text-base-content/70">{item.observacoes}</p>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	{/each}
+</div>
+
+

apps/web/src/lib/components/almoxarifado/ImageUpload.svelte

@@ -0,0 +1,442 @@
+<script lang="ts">
+	import { Image as ImageIcon, Upload, X, Camera } from 'lucide-svelte';
+
+	interface Props {
+		value?: string | null;
+		onChange?: (base64: string | null) => void;
+		maxSizeMB?: number;
+		maxWidth?: number;
+		maxHeight?: number;
+	}
+
+	let {
+		value = $bindable(null),
+		onChange,
+		maxSizeMB = 5,
+		maxWidth = 1200,
+		maxHeight = 1200
+	}: Props = $props();
+
+	let preview = $state<string | null>(value);
+	let error = $state<string | null>(null);
+	let inputElement: HTMLInputElement | null = null;
+	let showCamera = $state(false);
+	let videoElement: HTMLVideoElement | null = null;
+	let stream: MediaStream | null = null;
+	let capturing = $state(false);
+
+	function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
+		if (!file) return;
+
+		error = null;
+
+		// Validar tamanho
+		if (file.size > maxSizeMB * 1024 * 1024) {
+			error = `Arquivo muito grande. Tamanho máximo: ${maxSizeMB}MB`;
+			return;
+		}
+
+		// Validar tipo
+		if (!file.type.startsWith('image/')) {
+			error = 'Por favor, selecione um arquivo de imagem';
+			return;
+		}
+
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			const result = e.target?.result as string;
+			if (result) {
+				// Redimensionar imagem se necessário
+				resizeImage(result, maxWidth, maxHeight)
+					.then((resized) => {
+						preview = resized;
+						value = resized;
+						if (onChange) {
+							onChange(resized);
+						}
+					})
+					.catch((err) => {
+						error = err instanceof Error ? err.message : 'Erro ao processar imagem';
+					});
+			}
+		};
+
+		reader.onerror = () => {
+			error = 'Erro ao ler arquivo';
+		};
+
+		reader.readAsDataURL(file);
+	}
+
+	function resizeImage(dataUrl: string, maxWidth: number, maxHeight: number): Promise<string> {
+		// Verificar se estamos no browser (não durante SSR)
+		if (typeof window === 'undefined') {
+			return Promise.reject(new Error('resizeImage não pode ser executada durante SSR'));
+		}
+
+		return new Promise((resolve, reject) => {
+			const img = new window.Image();
+			img.onload = () => {
+				let width = img.width;
+				let height = img.height;
+
+				// Calcular novas dimensões mantendo proporção
+				if (width > maxWidth || height > maxHeight) {
+					const ratio = Math.min(maxWidth / width, maxHeight / height);
+					width = width * ratio;
+					height = height * ratio;
+				}
+
+				const canvas = document.createElement('canvas');
+				canvas.width = width;
+				canvas.height = height;
+
+				const ctx = canvas.getContext('2d');
+				if (!ctx) {
+					reject(new Error('Não foi possível criar contexto do canvas'));
+					return;
+				}
+
+				ctx.drawImage(img, 0, 0, width, height);
+				const resizedDataUrl = canvas.toDataURL('image/jpeg', 0.85);
+				resolve(resizedDataUrl);
+			};
+
+			img.onerror = () => {
+				reject(new Error('Erro ao carregar imagem'));
+			};
+
+			img.src = dataUrl;
+		});
+	}
+
+	function removeImage() {
+		preview = null;
+		value = null;
+		if (inputElement) {
+			inputElement.value = '';
+		}
+		if (onChange) {
+			onChange(null);
+		}
+	}
+
+	function triggerFileInput() {
+		inputElement?.click();
+	}
+
+	async function openCamera() {
+		// Se já estiver inicializando ou já tiver stream, não fazer nada
+		if (stream) {
+			return;
+		}
+
+		// Primeiro, abrir o modal
+		showCamera = true;
+		capturing = false;
+		error = null;
+
+		// Aguardar o próximo tick para garantir que o DOM foi atualizado
+		await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+		try {
+			// Verificar se a API está disponível
+			if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+				error = 'Câmera não disponível neste dispositivo ou navegador não suporta acesso à câmera';
+				showCamera = false;
+				return;
+			}
+
+			// Aguardar o elemento de vídeo estar disponível no DOM
+			let attempts = 0;
+			while (!videoElement && attempts < 30) {
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				attempts++;
+			}
+
+			if (!videoElement) {
+				throw new Error('Elemento de vídeo não encontrado no DOM');
+			}
+
+			// Solicitar acesso à câmera
+			stream = await navigator.mediaDevices.getUserMedia({
+				video: {
+					facingMode: 'environment', // Câmera traseira por padrão
+					width: { ideal: 1280 },
+					height: { ideal: 720 }
+				}
+			});
+
+			// Atribuir stream ao vídeo
+			videoElement.srcObject = stream;
+
+			// Aguardar o vídeo estar pronto e começar a reproduzir
+			await videoElement.play();
+
+			// Aguardar metadata estar carregado
+			if (videoElement.readyState < 2) {
+				await new Promise<void>((resolve, reject) => {
+					if (!videoElement) {
+						reject(new Error('Elemento de vídeo não encontrado'));
+						return;
+					}
+
+					const onLoadedMetadata = () => {
+						videoElement?.removeEventListener('loadedmetadata', onLoadedMetadata);
+						videoElement?.removeEventListener('error', onError);
+						resolve();
+					};
+
+					const onError = () => {
+						videoElement?.removeEventListener('loadedmetadata', onLoadedMetadata);
+						videoElement?.removeEventListener('error', onError);
+						reject(new Error('Erro ao carregar vídeo'));
+					};
+
+					videoElement.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
+					videoElement.addEventListener('error', onError, { once: true });
+				});
+			}
+
+			capturing = true;
+		} catch (err) {
+			console.error('Erro ao acessar câmera:', err);
+			let errorMessage = 'Erro ao acessar câmera';
+
+			if (err instanceof Error) {
+				if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+					errorMessage =
+						'Permissão de acesso à câmera negada. Por favor, permita o acesso à câmera nas configurações do navegador.';
+				} else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
+					errorMessage = 'Nenhuma câmera encontrada no dispositivo.';
+				} else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
+					errorMessage = 'Câmera está sendo usada por outro aplicativo.';
+				} else {
+					errorMessage = err.message || errorMessage;
+				}
+			}
+
+			error = errorMessage;
+			showCamera = false;
+			capturing = false;
+			stopCamera();
+		}
+	}
+
+	function stopCamera() {
+		if (stream) {
+			stream.getTracks().forEach((track) => track.stop());
+			stream = null;
+		}
+		if (videoElement) {
+			videoElement.srcObject = null;
+		}
+		capturing = false;
+	}
+
+	function closeCamera() {
+		stopCamera();
+		showCamera = false;
+		error = null;
+	}
+
+	async function capturePhoto() {
+		if (!videoElement) return;
+
+		try {
+			// Criar canvas para capturar o frame
+			const canvas = document.createElement('canvas');
+			canvas.width = videoElement.videoWidth;
+			canvas.height = videoElement.videoHeight;
+
+			const ctx = canvas.getContext('2d');
+			if (!ctx) {
+				error = 'Não foi possível criar contexto do canvas';
+				return;
+			}
+
+			// Desenhar o frame atual do vídeo no canvas
+			ctx.drawImage(videoElement, 0, 0);
+
+			// Converter para base64
+			const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
+
+			// Redimensionar e processar
+			const resized = await resizeImage(dataUrl, maxWidth, maxHeight);
+			preview = resized;
+			value = resized;
+			if (onChange) {
+				onChange(resized);
+			}
+
+			// Fechar câmera
+			closeCamera();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Erro ao capturar foto';
+			console.error('Erro ao capturar foto:', err);
+		}
+	}
+
+	// Sincronizar preview com value sempre que value mudar
+	$effect(() => {
+		// Acessar value para criar dependência reativa
+		const currentValue = value;
+		// Sempre sincronizar quando value mudar
+		if (currentValue !== preview) {
+			preview = currentValue;
+		}
+	});
+
+	// Limpar stream quando o componente for desmontado
+	$effect(() => {
+		return () => {
+			stopCamera();
+		};
+	});
+</script>
+
+<div class="image-upload">
+	<input
+		type="file"
+		accept="image/*"
+		class="hidden"
+		bind:this={inputElement}
+		onchange={handleFileSelect}
+		aria-label="Selecionar imagem do produto"
+	/>
+
+	{#if preview}
+		<div class="relative inline-block">
+			<img
+				src={preview}
+				alt="Preview da imagem do produto"
+				class="max-h-64 max-w-full rounded-lg"
+			/>
+			<button
+				type="button"
+				class="btn btn-sm btn-circle btn-error absolute top-2 right-2"
+				onclick={removeImage}
+				aria-label="Remover imagem"
+			>
+				<X class="h-4 w-4" />
+			</button>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-4">
+			<div
+				class="border-base-300 hover:border-primary cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors"
+				onclick={triggerFileInput}
+				role="button"
+				tabindex="0"
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault();
+						triggerFileInput();
+					}
+				}}
+			>
+				<Upload class="text-base-content/40 mx-auto mb-4 h-12 w-12" />
+				<p class="text-base-content/70 mb-2 font-medium">Clique para fazer upload da imagem</p>
+				<p class="text-base-content/50 text-sm">
+					PNG, JPG ou GIF até {maxSizeMB}MB
+				</p>
+			</div>
+			<div class="divider text-sm">ou</div>
+			<button type="button" class="btn btn-outline btn-primary w-full" onclick={openCamera}>
+				<Camera class="h-5 w-5" />
+				Capturar da Câmera
+			</button>
+		</div>
+	{/if}
+
+	{#if error}
+		<div class="alert alert-error mt-4">
+			<span>{error}</span>
+		</div>
+	{/if}
+
+	{#if preview}
+		<div class="mt-4 flex gap-2">
+			<button
+				type="button"
+				class="btn btn-sm btn-outline btn-primary flex-1"
+				onclick={triggerFileInput}
+			>
+				<ImageIcon class="h-4 w-4" />
+				Alterar Imagem
+			</button>
+			<button type="button" class="btn btn-sm btn-outline btn-primary flex-1" onclick={openCamera}>
+				<Camera class="h-4 w-4" />
+				Capturar Foto
+			</button>
+		</div>
+	{/if}
+</div>
+
+<!-- Modal da Câmera -->
+{#if showCamera}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+		onclick={closeCamera}
+	>
+		<div
+			class="bg-base-100 mx-4 w-full max-w-2xl rounded-lg p-6 shadow-2xl"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<div class="mb-4 flex items-center justify-between">
+				<h3 class="text-xl font-bold">Capturar Foto</h3>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle btn-ghost"
+					onclick={closeCamera}
+					aria-label="Fechar câmera"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
+
+			<div
+				class="relative mb-4 overflow-hidden rounded-lg bg-black"
+				style="aspect-ratio: 4/3; min-height: 300px;"
+			>
+				{#if showCamera}
+					<video
+						bind:this={videoElement}
+						autoplay
+						playsinline
+						muted
+						class="h-full w-full object-cover"
+						style="transform: scaleX(-1); opacity: {capturing
+							? '1'
+							: '0'}; transition: opacity 0.3s;"
+					></video>
+				{/if}
+				{#if !capturing}
+					<div class="absolute inset-0 z-10 flex h-full items-center justify-center">
+						<div class="text-center">
+							<span class="loading loading-spinner loading-lg text-primary mb-2"></span>
+							<p class="text-base-content/70 text-sm">Iniciando câmera...</p>
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<div class="flex justify-end gap-2">
+				<button type="button" class="btn btn-ghost" onclick={closeCamera}> Cancelar </button>
+				<button type="button" class="btn btn-primary" onclick={capturePhoto} disabled={!capturing}>
+					<Camera class="h-5 w-5" />
+					Capturar Foto
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.image-upload {
+		width: 100%;
+	}
+</style>

apps/web/src/lib/components/almoxarifado/MaterialCard.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { Package, AlertTriangle } from 'lucide-svelte';
+
+	interface Props {
+		material: {
+			_id: Id<'materiais'>;
+			codigo: string;
+			nome: string;
+			descricao?: string;
+			categoria: string;
+			estoqueAtual: number;
+			estoqueMinimo: number;
+			unidadeMedida: string;
+			ativo: boolean;
+		};
+	}
+
+	let { material }: Props = $props();
+</script>
+
+<div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
+	<div class="card-body">
+		<div class="flex items-start justify-between">
+			<div class="flex-1">
+				<div class="flex items-center gap-2 mb-2">
+					<Package class="h-5 w-5 text-primary" />
+					<h3 class="card-title text-lg">{material.nome}</h3>
+				</div>
+				<p class="text-sm text-base-content/60 font-mono mb-1">Código: {material.codigo}</p>
+				{#if material.descricao}
+					<p class="text-sm text-base-content/70 mb-2">{material.descricao}</p>
+				{/if}
+				<div class="flex items-center gap-2 mb-2">
+					<span class="badge badge-outline">{material.categoria}</span>
+					{#if material.ativo}
+						<span class="badge badge-success">Ativo</span>
+					{:else}
+						<span class="badge badge-error">Inativo</span>
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<div class="divider my-2"></div>
+
+		<div class="flex items-center justify-between">
+			<div>
+				<p class="text-xs text-base-content/60">Estoque Atual</p>
+				<div class="flex items-center gap-2">
+					<p class="text-2xl font-bold {material.estoqueAtual <= material.estoqueMinimo ? 'text-error' : 'text-success'}">
+						{material.estoqueAtual}
+					</p>
+					<span class="text-sm text-base-content/60">{material.unidadeMedida}</span>
+					{#if material.estoqueAtual <= material.estoqueMinimo}
+						<AlertTriangle class="h-5 w-5 text-warning" />
+					{/if}
+				</div>
+			</div>
+			<div class="text-right">
+				<p class="text-xs text-base-content/60">Mínimo</p>
+				<p class="text-lg font-medium">{material.estoqueMinimo} {material.unidadeMedida}</p>
+			</div>
+		</div>
+	</div>
+</div>
+
+

apps/web/src/lib/components/almoxarifado/MovimentacaoForm.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { ArrowDown, ArrowUp, Settings } from 'lucide-svelte';
+
+	interface Props {
+		tipo: 'entrada' | 'saida' | 'ajuste';
+		materialId?: Id<'materiais'> | '';
+		onSubmit: (data: {
+			materialId: Id<'materiais'>;
+			quantidade: number;
+			motivo: string;
+			documento?: string;
+			funcionarioId?: Id<'funcionarios'>;
+			setorId?: Id<'setores'>;
+			observacoes?: string;
+			quantidadeNova?: number;
+		}) => Promise<void>;
+		materiais?: Array<{
+			_id: Id<'materiais'>;
+			codigo: string;
+			nome: string;
+			estoqueAtual: number;
+			unidadeMedida: string;
+		}>;
+		funcionarios?: Array<{
+			_id: Id<'funcionarios'>;
+			nome: string;
+		}>;
+		setores?: Array<{
+			_id: Id<'setores'>;
+			nome: string;
+		}>;
+		loading?: boolean;
+	}
+
+	let {
+		tipo,
+		materialId = '',
+		onSubmit,
+		materiais = [],
+		funcionarios = [],
+		setores = [],
+		loading = false
+	}: Props = $props();
+
+	let quantidade = $state(0);
+	let quantidadeNova = $state(0);
+	let motivo = $state('');
+	let documento = $state('');
+	let funcionarioId = $state<Id<'funcionarios'> | ''>('');
+	let setorId = $state<Id<'setores'> | ''>('');
+	let observacoes = $state('');
+
+	async function handleSubmit() {
+		if (!materialId || !motivo.trim()) {
+			return;
+		}
+
+		if (tipo === 'ajuste') {
+			if (quantidadeNova < 0) {
+				return;
+			}
+			await onSubmit({
+				materialId: materialId as Id<'materiais'>,
+				quantidadeNova,
+				motivo: motivo.trim(),
+				observacoes: observacoes.trim() || undefined
+			});
+		} else {
+			if (quantidade <= 0) {
+				return;
+			}
+			await onSubmit({
+				materialId: materialId as Id<'materiais'>,
+				quantidade,
+				motivo: motivo.trim(),
+				documento: documento.trim() || undefined,
+				funcionarioId: funcionarioId ? (funcionarioId as Id<'funcionarios'>) : undefined,
+				setorId: setorId ? (setorId as Id<'setores'>) : undefined,
+				observacoes: observacoes.trim() || undefined
+			});
+		}
+
+		// Limpar formulário
+		quantidade = 0;
+		quantidadeNova = 0;
+		motivo = '';
+		documento = '';
+		funcionarioId = '';
+		setorId = '';
+		observacoes = '';
+	}
+</script>
+
+<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+		<div class="form-control md:col-span-2">
+			<label class="label">
+				<span class="label-text font-bold">Material *</span>
+			</label>
+			<select class="select select-bordered" bind:value={materialId} required>
+				<option value="">Selecione um material</option>
+				{#each materiais as material}
+					<option value={material._id}>
+						{material.codigo} - {material.nome} (Estoque: {material.estoqueAtual}{material.unidadeMedida})
+					</option>
+				{/each}
+			</select>
+		</div>
+
+		{#if tipo === 'ajuste'}
+			<div class="form-control">
+				<label class="label">
+					<span class="label-text font-bold">Nova Quantidade *</span>
+				</label>
+				<input
+					type="number"
+					class="input input-bordered"
+					min="0"
+					bind:value={quantidadeNova}
+					required
+				/>
+			</div>
+		{:else}
+			<div class="form-control">
+				<label class="label">
+					<span class="label-text font-bold">Quantidade *</span>
+				</label>
+				<input
+					type="number"
+					class="input input-bordered"
+					min="0.01"
+					step="0.01"
+					bind:value={quantidade}
+					required
+				/>
+			</div>
+		{/if}
+
+		{#if tipo === 'entrada'}
+			<div class="form-control">
+				<label class="label">
+					<span class="label-text">Documento (NF, etc.)</span>
+				</label>
+				<input
+					type="text"
+					class="input input-bordered"
+					placeholder="Número da nota fiscal"
+					bind:value={documento}
+				/>
+			</div>
+		{:else if tipo === 'saida'}
+			<div class="form-control">
+				<label class="label">
+					<span class="label-text">Funcionário</span>
+				</label>
+				<select class="select select-bordered" bind:value={funcionarioId}>
+					<option value="">Selecione (opcional)</option>
+					{#each funcionarios as funcionario}
+						<option value={funcionario._id}>{funcionario.nome}</option>
+					{/each}
+				</select>
+			</div>
+			<div class="form-control">
+				<label class="label">
+					<span class="label-text">Setor</span>
+				</label>
+				<select class="select select-bordered" bind:value={setorId}>
+					<option value="">Selecione (opcional)</option>
+					{#each setores as setor}
+						<option value={setor._id}>{setor.nome}</option>
+					{/each}
+				</select>
+			</div>
+		{/if}
+
+		<div class="form-control md:col-span-2">
+			<label class="label">
+				<span class="label-text font-bold">Motivo *</span>
+			</label>
+			<input
+				type="text"
+				class="input input-bordered"
+				placeholder={tipo === 'entrada' ? 'Ex: Compra, Doação' : tipo === 'saida' ? 'Ex: Uso interno' : 'Ex: Inventário físico'}
+				bind:value={motivo}
+				required
+			/>
+		</div>
+
+		<div class="form-control md:col-span-2">
+			<label class="label">
+				<span class="label-text">Observações</span>
+			</label>
+			<textarea
+				class="textarea textarea-bordered"
+				placeholder="Observações adicionais (opcional)"
+				bind:value={observacoes}
+				rows="3"
+			></textarea>
+		</div>
+	</div>
+
+	<div class="card-actions mt-6 justify-end">
+		<button type="submit" class="btn {tipo === 'ajuste' ? 'btn-warning' : tipo === 'entrada' ? 'btn-success' : 'btn-error'}" disabled={loading}>
+			{#if loading}
+				<span class="loading loading-spinner loading-sm"></span>
+			{:else if tipo === 'entrada'}
+				<ArrowDown class="h-5 w-5" />
+			{:else if tipo === 'saida'}
+				<ArrowUp class="h-5 w-5" />
+			{:else}
+				<Settings class="h-5 w-5" />
+			{/if}
+			Registrar {tipo === 'entrada' ? 'Entrada' : tipo === 'saida' ? 'Saída' : 'Ajuste'}
+		</button>
+	</div>
+</form>
+
+

apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte

@@ -1,481 +1,385 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import CalendarioAusencias from "./CalendarioAusencias.svelte";
-  import ErrorModal from "../ErrorModal.svelte";
-  import { toast } from "svelte-sonner";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { SvelteDate } from 'svelte/reactivity';
+	import { Check, ChevronLeft, ChevronRight, Calendar, AlertTriangle, CheckCircle } from 'lucide-svelte';
+	import { parseLocalDate } from '$lib/utils/datas';
+	import type { toast } from 'svelte-sonner';
+	import ErrorModal from '../ErrorModal.svelte';
+	import CalendarioAusencias from './CalendarioAusencias.svelte';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+	const { funcionarioId, onSucesso, onCancelar }: Props = $props();
 
-  // Cliente Convex
-  const client = useConvexClient();
+	// Cliente Convex
+	const client = useConvexClient();
 
-  // Estado do wizard
-  let passoAtual = $state(1);
-  const totalPassos = 2;
+	// Estado do wizard
+	let passoAtual = $state(1);
+	const totalPassos = 2;
 
-  // Dados da solicitação
-  let dataInicio = $state<string>("");
-  let dataFim = $state<string>("");
-  let motivo = $state("");
-  let processando = $state(false);
-  
-  // Estados para modal de erro
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
-  let detalhesErroModal = $state("");
+	// Dados da solicitação
+	let dataInicio = $state<string>('');
+	let dataFim = $state<string>('');
+	let motivo = $state('');
+	let processando = $state(false);
 
-  // Buscar ausências existentes para exibir no calendário
-  const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
-    funcionarioId,
-  });
+	// Estados para modal de erro
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
+	let detalhesErroModal = $state('');
 
-  // Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
-  const ausenciasExistentes = $derived(
-    (ausenciasExistentesQuery?.data || [])
-      .filter((a) => a.status === "aprovado" || a.status === "aguardando_aprovacao")
-      .map((a) => ({
-      dataInicio: a.dataInicio,
-      dataFim: a.dataFim,
-        status: a.status as "aguardando_aprovacao" | "aprovado",
-    }))
-  );
+	// Buscar ausências existentes para exibir no calendário
+	const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
+		funcionarioId
+	});
 
-  // Calcular dias selecionados
-  function calcularDias(inicio: string, fim: string): number {
-    if (!inicio || !fim) return 0;
-    const dInicio = new Date(inicio);
-    const dFim = new Date(fim);
-    const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-  }
+	// Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
+	let ausenciasExistentes = $derived(
+		(ausenciasExistentesQuery?.data || [])
+			.filter((a) => a.status === 'aprovado' || a.status === 'aguardando_aprovacao')
+			.map((a) => ({
+				dataInicio: a.dataInicio,
+				dataFim: a.dataFim,
+				status: a.status as 'aguardando_aprovacao' | 'aprovado'
+			}))
+	);
 
-  const totalDias = $derived(calcularDias(dataInicio, dataFim));
+	// Calcular dias selecionados
+	function calcularDias(inicio: string, fim: string): number {
+		if (!inicio || !fim) return 0;
+		const dInicio = new Date(inicio);
+		const dFim = new Date(fim);
+		const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
+		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  // Funções de navegação
-  function proximoPasso() {
-    if (passoAtual === 1) {
-      if (!dataInicio || !dataFim) {
-        toast.error("Selecione o período de ausência no calendário");
-        return;
-      }
+	let totalDias = $derived(calcularDias(dataInicio, dataFim));
 
-      const hoje = new Date();
-      hoje.setHours(0, 0, 0, 0);
-      const inicio = new Date(dataInicio);
+	// Funções de navegação
+	function proximoPasso() {
+		if (passoAtual === 1) {
+			if (!dataInicio || !dataFim) {
+				toast.error('Selecione o período de ausência no calendário');
+				return;
+			}
 
-      if (inicio < hoje) {
-        toast.error("A data de início não pode ser no passado");
-        return;
-      }
+			const hoje = new SvelteDate();
+			hoje.setHours(0, 0, 0, 0);
+			const inicio = parseLocalDate(dataInicio);
 
-      if (new Date(dataFim) < new Date(dataInicio)) {
-        toast.error("A data de fim deve ser maior ou igual à data de início");
-        return;
-      }
-    }
+			if (inicio < hoje) {
+				toast.error('A data de início não pode ser no passado');
+				return;
+			}
 
-    if (passoAtual < totalPassos) {
-      passoAtual++;
-    }
-  }
+			if (parseLocalDate(dataFim) < parseLocalDate(dataInicio)) {
+				toast.error('A data de fim deve ser maior ou igual à data de início');
+				return;
+			}
+		}
 
-  function passoAnterior() {
-    if (passoAtual > 1) {
-      passoAtual--;
-    }
-  }
+		if (passoAtual < totalPassos) {
+			passoAtual++;
+		}
+	}
 
-  async function enviarSolicitacao() {
-    if (!dataInicio || !dataFim) {
-      toast.error("Selecione o período de ausência");
-      return;
-    }
+	function passoAnterior() {
+		if (passoAtual > 1) {
+			passoAtual--;
+		}
+	}
 
-    if (!motivo.trim() || motivo.trim().length < 10) {
-      toast.error("O motivo deve ter no mínimo 10 caracteres");
-      return;
-    }
+	async function enviarSolicitacao() {
+		if (!dataInicio || !dataFim) {
+			toast.error('Selecione o período de ausência');
+			return;
+		}
 
-    try {
-      processando = true;
-      mostrarModalErro = false;
-      mensagemErroModal = "";
+		if (!motivo.trim() || motivo.trim().length < 10) {
+			toast.error('O motivo deve ter no mínimo 10 caracteres');
+			return;
+		}
 
-      await client.mutation(api.ausencias.criarSolicitacao, {
-        funcionarioId,
-        dataInicio,
-        dataFim,
-        motivo: motivo.trim(),
-      });
+		try {
+			processando = true;
+			mostrarModalErro = false;
+			mensagemErroModal = '';
 
-      toast.success("Solicitação de ausência criada com sucesso!");
-      
-      if (onSucesso) {
-        onSucesso();
-      }
-    } catch (error) {
-      console.error("Erro ao criar solicitação:", error);
-      const mensagemErro = error instanceof Error ? error.message : String(error);
-      
-      // Verificar se é erro de sobreposição de período
-      if (
-        mensagemErro.includes("Já existe uma solicitação") ||
-        mensagemErro.includes("já existe") ||
-        mensagemErro.includes("solicitação aprovada ou pendente")
-      ) {
-        mensagemErroModal = "Não é possível criar esta solicitação.";
-        detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString("pt-BR")} até ${new Date(dataFim).toLocaleDateString("pt-BR")}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
-        mostrarModalErro = true;
-      } else {
-        // Outros erros continuam usando toast
-        toast.error(mensagemErro);
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			await client.mutation(api.ausencias.criarSolicitacao, {
+				funcionarioId,
+				dataInicio,
+				dataFim,
+				motivo: motivo.trim()
+			});
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-    detalhesErroModal = "";
-  }
+			toast.success('Solicitação de ausência criada com sucesso!');
 
-  function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
-    dataInicio = periodo.dataInicio;
-    dataFim = periodo.dataFim;
-  }
+			if (onSucesso) {
+				onSucesso();
+			}
+		} catch (error) {
+			console.error('Erro ao criar solicitação:', error);
+			const mensagemErro = error instanceof Error ? error.message : String(error);
+
+			// Verificar se é erro de sobreposição de período
+			if (
+				mensagemErro.includes('Já existe uma solicitação') ||
+				mensagemErro.includes('já existe') ||
+				mensagemErro.includes('solicitação aprovada ou pendente')
+			) {
+				mensagemErroModal = 'Não é possível criar esta solicitação.';
+				detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${parseLocalDate(dataInicio).toLocaleDateString('pt-BR')} até ${parseLocalDate(dataFim).toLocaleDateString('pt-BR')}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
+				mostrarModalErro = true;
+			} else {
+				// Outros erros continuam usando toast
+				toast.error(mensagemErro);
+			}
+		} finally {
+			processando = false;
+		}
+	}
+
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+		detalhesErroModal = '';
+	}
+
+	function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
+		dataInicio = periodo.dataInicio;
+		dataFim = periodo.dataFim;
+	}
 </script>
 
 <div class="wizard-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
+	</div>
 
-  <!-- Indicador de progresso -->
-  <div class="steps mb-8">
-    <div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 1}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            {passoAtual}
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Selecionar Período</div>
-          <div class="step-description">Escolha as datas no calendário</div>
-        </div>
-      </div>
-    </div>
-    <div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 2}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            2
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Informar Motivo</div>
-          <div class="step-description">Descreva o motivo da ausência</div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Indicador de progresso -->
+	<div class="steps mb-8">
+		<div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 1}
+						<Check class="h-6 w-6" strokeWidth={2} />
+					{:else}
+						{passoAtual}
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Selecionar Período</div>
+					<div class="step-description">Escolha as datas no calendário</div>
+				</div>
+			</div>
+		</div>
+		<div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 2}
+						<Check class="h-6 w-6" strokeWidth={2} />
+					{:else}
+						2
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Informar Motivo</div>
+					<div class="step-description">Descreva o motivo da ausência</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Conteúdo dos passos -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      {#if passoAtual === 1}
-        <!-- Passo 1: Selecionar Período -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Selecione o Período</h3>
-            <p class="text-base-content/70">
-              Clique e arraste no calendário para selecionar o período de ausência
-            </p>
-          </div>
+	<!-- Conteúdo dos passos -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body">
+			{#if passoAtual === 1}
+				<!-- Passo 1: Selecionar Período -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Selecione o Período</h3>
+						<p class="text-base-content/70">
+							Clique e arraste no calendário para selecionar o período de ausência
+						</p>
+					</div>
 
-          {#if ausenciasExistentesQuery === undefined}
-            <div class="flex items-center justify-center py-12">
-              <span class="loading loading-spinner loading-lg"></span>
-              <span class="ml-4 text-base-content/70">Carregando ausências existentes...</span>
-            </div>
-          {:else}
-          <CalendarioAusencias
-            dataInicio={dataInicio}
-            dataFim={dataFim}
-            ausenciasExistentes={ausenciasExistentes}
-            onPeriodoSelecionado={handlePeriodoSelecionado}
-          />
-          {/if}
+					{#if ausenciasExistentesQuery === undefined}
+						<div class="flex items-center justify-center py-12">
+							<span class="loading loading-spinner loading-lg"></span>
+							<span class="text-base-content/70 ml-4">Carregando ausências existentes...</span>
+						</div>
+					{:else}
+						<CalendarioAusencias
+							{dataInicio}
+							{dataFim}
+							{ausenciasExistentes}
+							onPeriodoSelecionado={handlePeriodoSelecionado}
+						/>
+					{/if}
 
-          {#if dataInicio && dataFim}
-            <div class="alert alert-success shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <div>
-                <h4 class="font-bold">Período selecionado!</h4>
-                <p>
-                  De {new Date(dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                  {new Date(dataFim).toLocaleDateString("pt-BR")} ({totalDias} dias)
-                </p>
-              </div>
-            </div>
-          {/if}
-        </div>
-      {:else if passoAtual === 2}
-        <!-- Passo 2: Informar Motivo -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Informe o Motivo</h3>
-            <p class="text-base-content/70">
-              Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
-            </p>
-          </div>
+					{#if dataInicio && dataFim}
+						<div class="alert alert-success shadow-lg">
+							<CheckCircle class="h-6 w-6 shrink-0 stroke-current" />
+							<div>
+								<h4 class="font-bold">Período selecionado!</h4>
+								<p>
+									De {parseLocalDate(dataInicio).toLocaleDateString('pt-BR')} até
+									{parseLocalDate(dataFim).toLocaleDateString('pt-BR')} ({totalDias} dias)
+								</p>
+							</div>
+						</div>
+					{/if}
+				</div>
+			{:else if passoAtual === 2}
+				<!-- Passo 2: Informar Motivo -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Informe o Motivo</h3>
+						<p class="text-base-content/70">
+							Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
+						</p>
+					</div>
 
-          <!-- Resumo do período -->
-          {#if dataInicio && dataFim}
-            <div class="card bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30">
-              <div class="card-body">
-                <h4 class="card-title text-orange-700 dark:text-orange-400">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                  Resumo do Período
-                </h4>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Início</p>
-                    <p class="font-bold">{new Date(dataInicio).toLocaleDateString("pt-BR")}</p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Fim</p>
-                    <p class="font-bold">{new Date(dataFim).toLocaleDateString("pt-BR")}</p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Total de Dias</p>
-                    <p class="font-bold text-xl text-orange-600 dark:text-orange-400">
-                      {totalDias} dias
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/if}
+					<!-- Resumo do período -->
+					{#if dataInicio && dataFim}
+						<div class="card border-base-content/20 border-2">
+							<div class="card-body">
+								<h4 class="card-title text-orange-700 dark:text-orange-400">
+									<Calendar class="h-5 w-5" strokeWidth={2} />
+									Resumo do Período
+								</h4>
+								<div class="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
+									<div>
+										<p class="text-base-content/70 text-sm">Data Início</p>
+										<p class="font-bold">
+											{parseLocalDate(dataInicio).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Data Fim</p>
+										<p class="font-bold">
+											{parseLocalDate(dataFim).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Total de Dias</p>
+										<p class="text-xl font-bold text-orange-600 dark:text-orange-400">
+											{totalDias} dias
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/if}
 
-          <!-- Campo de motivo -->
-          <div class="form-control">
-            <label class="label" for="motivo">
-              <span class="label-text font-bold">Motivo da Ausência</span>
-              <span class="label-text-alt">
-                {motivo.trim().length}/10 caracteres mínimos
-              </span>
-            </label>
-            <textarea
-              id="motivo"
-              class="textarea textarea-bordered h-32 text-lg"
-              placeholder="Descreva o motivo da sua solicitação de ausência..."
-              bind:value={motivo}
-              maxlength={500}
-            ></textarea>
-            <label class="label">
-              <span class="label-text-alt text-base-content/70">
-                Mínimo 10 caracteres. Seja claro e objetivo.
-              </span>
-            </label>
-          </div>
+					<!-- Campo de motivo -->
+					<div class="form-control">
+						<label class="label" for="motivo">
+							<span class="label-text font-bold">Motivo da Ausência</span>
+							<span class="label-text-alt">
+								{motivo.trim().length}/10 caracteres mínimos
+							</span>
+						</label>
+						<textarea
+							id="motivo"
+							class="textarea textarea-bordered h-32 text-lg"
+							placeholder="Descreva o motivo da sua solicitação de ausência..."
+							bind:value={motivo}
+							maxlength={500}
+						></textarea>
+						<label class="label" for="motivo">
+							<span class="label-text-alt text-base-content/70">
+								Mínimo 10 caracteres. Seja claro e objetivo.
+							</span>
+						</label>
+					</div>
 
-          {#if motivo.trim().length > 0 && motivo.trim().length < 10}
-            <div class="alert alert-warning shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-              <span>O motivo deve ter no mínimo 10 caracteres</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
+					{#if motivo.trim().length > 0 && motivo.trim().length < 10}
+						<div class="alert alert-warning shadow-lg">
+							<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" />
+							<span>O motivo deve ter no mínimo 10 caracteres</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
 
-      <!-- Botões de navegação -->
-      <div class="card-actions justify-between mt-6">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={passoAnterior}
-          disabled={passoAtual === 1 || processando}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 mr-2"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          Voltar
-        </button>
+			<!-- Botões de navegação -->
+			<div class="card-actions mt-6 justify-between">
+				<button
+					type="button"
+					class="btn"
+					onclick={passoAnterior}
+					disabled={passoAtual === 1 || processando}
+				>
+					<ChevronLeft class="mr-2 h-5 w-5" strokeWidth={2} />
+					Voltar
+				</button>
 
-        {#if passoAtual < totalPassos}
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={proximoPasso}
-            disabled={processando}
-          >
-            Próximo
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 ml-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-        {:else}
-          <button
-            type="button"
-            class="btn btn-success"
-            onclick={enviarSolicitacao}
-            disabled={processando || motivo.trim().length < 10}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-              Enviando...
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 mr-2"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              Enviar Solicitação
-            {/if}
-          </button>
-        {/if}
-      </div>
+				{#if passoAtual < totalPassos}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={proximoPasso}
+						disabled={processando}
+					>
+						Próximo
+						<ChevronRight class="ml-2 h-5 w-5" strokeWidth={2} />
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="btn btn-success"
+						onclick={enviarSolicitacao}
+						disabled={processando || motivo.trim().length < 10}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+							Enviando...
+						{:else}
+							<Check class="mr-2 h-5 w-5" strokeWidth={2} />
+							Enviar Solicitação
+						{/if}
+					</button>
+				{/if}
+			</div>
 
-      <!-- Botão cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Cancelar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Botão cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn btn-sm"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Cancelar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Período Indisponível"
-  message={mensagemErroModal || "Já existe uma solicitação para este período."}
-  details={detalhesErroModal}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Período Indisponível"
+	message={mensagemErroModal || 'Já existe uma solicitação para este período.'}
+	details={detalhesErroModal}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .wizard-ausencia {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
+	.wizard-ausencia {
+		max-width: 1000px;
+		margin: 0 auto;
+	}
 </style>
-

apps/web/src/lib/components/call/CallControls.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import {
+		Mic,
+		MicOff,
+		Video,
+		VideoOff,
+		Radio,
+		Square,
+		Settings,
+		PhoneOff,
+		Circle
+	} from 'lucide-svelte';
+
+	interface Props {
+		audioHabilitado: boolean;
+		videoHabilitado: boolean;
+		gravando: boolean;
+		ehAnfitriao: boolean;
+		duracaoSegundos: number;
+		onToggleAudio: () => void;
+		onToggleVideo: () => void;
+		onIniciarGravacao: () => void;
+		onPararGravacao: () => void;
+		onAbrirConfiguracoes: () => void;
+		onEncerrar: () => void;
+	}
+
+	const {
+		audioHabilitado,
+		videoHabilitado,
+		gravando,
+		ehAnfitriao,
+		duracaoSegundos,
+		onToggleAudio,
+		onToggleVideo,
+		onIniciarGravacao,
+		onPararGravacao,
+		onAbrirConfiguracoes,
+		onEncerrar
+	}: Props = $props();
+
+	// Formatar duração para HH:MM:SS
+	function formatarDuracao(segundos: number): string {
+		const horas = Math.floor(segundos / 3600);
+		const minutos = Math.floor((segundos % 3600) / 60);
+		const segs = segundos % 60;
+
+		if (horas > 0) {
+			return `${horas.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:${segs.toString().padStart(2, '0')}`;
+		}
+		return `${minutos.toString().padStart(2, '0')}:${segs.toString().padStart(2, '0')}`;
+	}
+
+	let duracaoFormatada = $derived(formatarDuracao(duracaoSegundos));
+</script>
+
+<div class="bg-base-200 flex items-center justify-between gap-2 px-4 py-3">
+	<!-- Contador de duração -->
+	<div class="text-base-content flex items-center gap-2 font-mono text-sm">
+		<Circle class="text-error h-2 w-2 fill-current" />
+		<span>{duracaoFormatada}</span>
+	</div>
+
+	<!-- Controles principais -->
+	<div class="flex items-center gap-2">
+		<!-- Toggle Áudio -->
+		<button
+			type="button"
+			class="btn btn-circle btn-sm"
+			class:btn-primary={audioHabilitado}
+			class:btn-error={!audioHabilitado}
+			onclick={onToggleAudio}
+			title={audioHabilitado ? 'Desabilitar áudio' : 'Habilitar áudio'}
+			aria-label={audioHabilitado ? 'Desabilitar áudio' : 'Habilitar áudio'}
+		>
+			{#if audioHabilitado}
+				<Mic class="h-4 w-4" />
+			{:else}
+				<MicOff class="h-4 w-4" />
+			{/if}
+		</button>
+
+		<!-- Toggle Vídeo -->
+		<button
+			type="button"
+			class="btn btn-circle btn-sm"
+			class:btn-primary={videoHabilitado}
+			class:btn-error={!videoHabilitado}
+			onclick={onToggleVideo}
+			title={videoHabilitado ? 'Desabilitar vídeo' : 'Habilitar vídeo'}
+			aria-label={videoHabilitado ? 'Desabilitar vídeo' : 'Habilitar vídeo'}
+		>
+			{#if videoHabilitado}
+				<Video class="h-4 w-4" />
+			{:else}
+				<VideoOff class="h-4 w-4" />
+			{/if}
+		</button>
+
+		<!-- Gravação (apenas anfitrião) -->
+		{#if ehAnfitriao}
+			<button
+				type="button"
+				class="btn btn-circle btn-sm"
+				class:btn-primary={!gravando}
+				class:btn-error={gravando}
+				onclick={gravando ? onPararGravacao : onIniciarGravacao}
+				title={gravando ? 'Parar gravação' : 'Iniciar gravação'}
+				aria-label={gravando ? 'Parar gravação' : 'Iniciar gravação'}
+			>
+				{#if gravando}
+					<Square class="h-4 w-4" />
+				{:else}
+					<Radio class="h-4 w-4 fill-current" />
+				{/if}
+			</button>
+		{/if}
+
+		<!-- Configurações -->
+		<button
+			type="button"
+			class="btn btn-circle btn-sm btn-ghost"
+			onclick={onAbrirConfiguracoes}
+			title="Configurações"
+			aria-label="Configurações"
+		>
+			<Settings class="h-4 w-4" />
+		</button>
+
+		<!-- Encerrar chamada -->
+		<button
+			type="button"
+			class="btn btn-circle btn-sm btn-error"
+			onclick={onEncerrar}
+			title="Encerrar chamada"
+			aria-label="Encerrar chamada"
+		>
+			<PhoneOff class="h-4 w-4" />
+		</button>
+	</div>
+</div>

apps/web/src/lib/components/call/CallSettings.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+	import { Check, Volume2, X } from 'lucide-svelte';
+	import { onMount } from 'svelte';
+	import type { DispositivoMedia } from '$lib/utils/jitsi';
+	import { obterDispositivosDisponiveis, solicitarPermissaoMidia } from '$lib/utils/jitsi';
+
+	interface Props {
+		open: boolean;
+		dispositivoAtual: {
+			microphoneId: string | null;
+			cameraId: string | null;
+			speakerId: string | null;
+		};
+		onClose: () => void;
+		onAplicar: (dispositivos: {
+			microphoneId: string | null;
+			cameraId: string | null;
+			speakerId: string | null;
+		}) => void;
+	}
+
+	let { open, dispositivoAtual, onClose, onAplicar }: Props = $props();
+
+	let dispositivos = $state<{
+		microphones: DispositivoMedia[];
+		speakers: DispositivoMedia[];
+		cameras: DispositivoMedia[];
+	}>({
+		microphones: [],
+		speakers: [],
+		cameras: []
+	});
+
+	let selecionados = $state({
+		microphoneId: dispositivoAtual.microphoneId || null,
+		cameraId: dispositivoAtual.cameraId || null,
+		speakerId: dispositivoAtual.speakerId || null
+	});
+
+	let carregando = $state(false);
+	let previewStream: MediaStream | null = $state(null);
+	let previewVideo: HTMLVideoElement | null = $state(null);
+	let erro = $state<string | null>(null);
+
+	// Carregar dispositivos disponíveis
+	async function carregarDispositivos(): Promise<void> {
+		carregando = true;
+		erro = null;
+		try {
+			dispositivos = await obterDispositivosDisponiveis();
+			if (dispositivos.microphones.length === 0 && dispositivos.cameras.length === 0) {
+				erro = 'Nenhum dispositivo de mídia encontrado. Verifique as permissões do navegador.';
+			}
+		} catch (error) {
+			console.error('Erro ao carregar dispositivos:', error);
+			erro = 'Erro ao carregar dispositivos de mídia.';
+		} finally {
+			carregando = false;
+		}
+	}
+
+	// Atualizar preview quando mudar dispositivos
+	async function atualizarPreview(): Promise<void> {
+		if (previewStream) {
+			previewStream.getTracks().forEach((track) => track.stop());
+			previewStream = null;
+		}
+
+		if (!previewVideo) return;
+
+		try {
+			const audio = selecionados.microphoneId !== null;
+			const video = selecionados.cameraId !== null;
+
+			if (audio || video) {
+				const constraints: MediaStreamConstraints = {
+					audio: audio
+						? {
+								deviceId: selecionados.microphoneId
+									? { exact: selecionados.microphoneId }
+									: undefined
+							}
+						: false,
+					video: video
+						? {
+								deviceId: selecionados.cameraId ? { exact: selecionados.cameraId } : undefined
+							}
+						: false
+				};
+
+				previewStream = await solicitarPermissaoMidia(audio, video);
+				if (previewStream && previewVideo) {
+					previewVideo.srcObject = previewStream;
+				}
+			} else {
+				previewVideo.srcObject = null;
+			}
+		} catch (error) {
+			console.error('Erro ao atualizar preview:', error);
+			erro = 'Erro ao acessar dispositivo de mídia.';
+		}
+	}
+
+	// Testar áudio
+	async function testarAudio(): Promise<void> {
+		if (!selecionados.microphoneId) {
+			erro = 'Selecione um microfone primeiro.';
+			return;
+		}
+
+		try {
+			const stream = await solicitarPermissaoMidia(true, false);
+			if (stream) {
+				// Criar elemento de áudio temporário para teste
+				const audio = new Audio();
+				const audioTracks = stream.getAudioTracks();
+				if (audioTracks.length > 0) {
+					// O áudio será reproduzido automaticamente se conectado
+					setTimeout(() => {
+						stream.getTracks().forEach((track) => track.stop());
+					}, 3000);
+				}
+			}
+		} catch (error) {
+			console.error('Erro ao testar áudio:', error);
+			erro = 'Erro ao testar microfone.';
+		}
+	}
+
+	function handleFechar(): void {
+		// Parar preview ao fechar
+		if (previewStream) {
+			previewStream.getTracks().forEach((track) => track.stop());
+			previewStream = null;
+		}
+		if (previewVideo) {
+			previewVideo.srcObject = null;
+		}
+		erro = null;
+		onClose();
+	}
+
+	function handleAplicar(): void {
+		onAplicar({
+			microphoneId: selecionados.microphoneId,
+			cameraId: selecionados.cameraId,
+			speakerId: selecionados.speakerId
+		});
+		handleFechar();
+	}
+
+	// Carregar dispositivos quando abrir
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		if (open) {
+			carregarDispositivos();
+		} else {
+			// Limpar preview ao fechar
+			if (previewStream) {
+				previewStream.getTracks().forEach((track) => track.stop());
+				previewStream = null;
+			}
+		}
+	});
+
+	// Atualizar preview quando mudar seleção
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		if (open && (selecionados.microphoneId || selecionados.cameraId)) {
+			atualizarPreview();
+		}
+	});
+
+	onMount(() => {
+		return () => {
+			// Cleanup ao desmontar
+			if (previewStream) {
+				previewStream.getTracks().forEach((track) => track.stop());
+			}
+		};
+	});
+</script>
+
+{#if open}
+	<dialog
+		class="modal modal-open"
+		onclick={(e) => e.target === e.currentTarget && handleFechar()}
+		role="dialog"
+		aria-labelledby="modal-title"
+	>
+		<div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
+			<!-- Header -->
+			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+				<h2 id="modal-title" class="text-xl font-semibold">Configurações de Mídia</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle"
+					onclick={handleFechar}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="max-h-[70vh] space-y-6 overflow-y-auto p-6">
+				{#if erro}
+					<div class="alert alert-error">
+						<span>{erro}</span>
+					</div>
+				{/if}
+
+				{#if carregando}
+					<div class="flex items-center justify-center py-8">
+						<span class="loading loading-spinner loading-lg"></span>
+					</div>
+				{:else}
+					<!-- Seleção de Microfone -->
+					<div>
+						<label class="text-base-content mb-2 block text-sm font-medium"> Microfone </label>
+						<select
+							class="select select-bordered w-full"
+							bind:value={selecionados.microphoneId}
+							onchange={atualizarPreview}
+						>
+							<option value={null}>Padrão do Sistema</option>
+							{#each dispositivos.microphones as microfone}
+								<option value={microfone.deviceId}>{microfone.label}</option>
+							{/each}
+						</select>
+						{#if selecionados.microphoneId}
+							<button type="button" class="btn btn-sm btn-ghost mt-2" onclick={testarAudio}>
+								<Volume2 class="h-4 w-4" />
+								Testar
+							</button>
+						{/if}
+					</div>
+
+					<!-- Seleção de Câmera -->
+					<div>
+						<label class="text-base-content mb-2 block text-sm font-medium"> Câmera </label>
+						<select
+							class="select select-bordered w-full"
+							bind:value={selecionados.cameraId}
+							onchange={atualizarPreview}
+						>
+							<option value={null}>Padrão do Sistema</option>
+							{#each dispositivos.cameras as camera}
+								<option value={camera.deviceId}>{camera.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Preview de Vídeo -->
+					{#if selecionados.cameraId}
+						<div>
+							<label class="text-base-content mb-2 block text-sm font-medium"> Preview </label>
+							<div class="bg-base-300 aspect-video w-full overflow-hidden rounded-lg">
+								<video
+									bind:this={previewVideo}
+									autoplay
+									muted
+									playsinline
+									class="h-full w-full object-cover"
+								></video>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Seleção de Alto-falante (se disponível) -->
+					{#if dispositivos.speakers.length > 0}
+						<div>
+							<label class="text-base-content mb-2 block text-sm font-medium"> Alto-falante </label>
+							<select class="select select-bordered w-full" bind:value={selecionados.speakerId}>
+								<option value={null}>Padrão do Sistema</option>
+								{#each dispositivos.speakers as speaker}
+									<option value={speaker.deviceId}>{speaker.label}</option>
+								{/each}
+							</select>
+						</div>
+					{/if}
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div class="modal-action border-base-300 border-t px-6 py-4">
+				<button type="button" class="btn btn-ghost" onclick={handleFechar}> Cancelar </button>
+				<button type="button" class="btn btn-primary" onclick={handleAplicar} disabled={carregando}>
+					<Check class="h-4 w-4" />
+					Aplicar
+				</button>
+			</div>
+		</div>
+
+		<form method="dialog" class="modal-backdrop">
+			<button type="button" onclick={handleFechar}>fechar</button>
+		</form>
+	</dialog>
+{/if}

apps/web/src/lib/components/call/HostControls.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { Mic, MicOff, Shield, User, Video, VideoOff } from 'lucide-svelte';
+	import UserAvatar from '../chat/UserAvatar.svelte';
+
+	interface ParticipanteHost {
+		usuarioId: Id<'usuarios'>;
+		nome: string;
+		avatar?: string;
+		audioHabilitado: boolean;
+		videoHabilitado: boolean;
+		forcadoPeloAnfitriao?: boolean;
+	}
+
+	interface Props {
+		participantes: ParticipanteHost[];
+		onToggleParticipanteAudio: (usuarioId: Id<'usuarios'>) => void;
+		onToggleParticipanteVideo: (usuarioId: Id<'usuarios'>) => void;
+	}
+
+	const { participantes, onToggleParticipanteAudio, onToggleParticipanteVideo }: Props = $props();
+</script>
+
+<div class="bg-base-200 border-base-300 flex flex-col border-t">
+	<div class="bg-base-300 border-base-300 flex items-center gap-2 border-b px-4 py-2">
+		<Shield class="text-primary h-4 w-4" />
+		<span class="text-base-content text-sm font-semibold">Controles do Anfitrião</span>
+	</div>
+
+	<div class="max-h-64 space-y-2 overflow-y-auto p-4">
+		{#if participantes.length === 0}
+			<div class="text-base-content/70 flex items-center justify-center py-8 text-sm">
+				Nenhum participante na chamada
+			</div>
+		{:else}
+			{#each participantes as participante}
+				<div class="bg-base-100 flex items-center justify-between rounded-lg p-3 shadow-sm">
+					<!-- Informações do participante -->
+					<div class="flex items-center gap-3">
+						<UserAvatar usuarioId={participante.usuarioId} avatar={participante.avatar} />
+						<div class="flex flex-col">
+							<span class="text-base-content text-sm font-medium">
+								{participante.nome}
+							</span>
+							{#if participante.forcadoPeloAnfitriao}
+								<span class="text-base-content/60 text-xs"> Controlado pelo anfitrião </span>
+							{/if}
+						</div>
+					</div>
+
+					<!-- Controles do participante -->
+					<div class="flex items-center gap-2">
+						<!-- Toggle Áudio -->
+						<button
+							type="button"
+							class="btn btn-circle btn-xs"
+							class:btn-primary={participante.audioHabilitado}
+							class:btn-error={!participante.audioHabilitado}
+							onclick={() => onToggleParticipanteAudio(participante.usuarioId)}
+							title={participante.audioHabilitado
+								? `Desabilitar áudio de ${participante.nome}`
+								: `Habilitar áudio de ${participante.nome}`}
+							aria-label={participante.audioHabilitado
+								? `Desabilitar áudio de ${participante.nome}`
+								: `Habilitar áudio de ${participante.nome}`}
+						>
+							{#if participante.audioHabilitado}
+								<Mic class="h-3 w-3" />
+							{:else}
+								<MicOff class="h-3 w-3" />
+							{/if}
+						</button>
+
+						<!-- Toggle Vídeo -->
+						<button
+							type="button"
+							class="btn btn-circle btn-xs"
+							class:btn-primary={participante.videoHabilitado}
+							class:btn-error={!participante.videoHabilitado}
+							onclick={() => onToggleParticipanteVideo(participante.usuarioId)}
+							title={participante.videoHabilitado
+								? `Desabilitar vídeo de ${participante.nome}`
+								: `Habilitar vídeo de ${participante.nome}`}
+							aria-label={participante.videoHabilitado
+								? `Desabilitar vídeo de ${participante.nome}`
+								: `Habilitar vídeo de ${participante.nome}`}
+						>
+							{#if participante.videoHabilitado}
+								<Video class="h-3 w-3" />
+							{:else}
+								<VideoOff class="h-3 w-3" />
+							{/if}
+						</button>
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>

apps/web/src/lib/components/call/RecordingIndicator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Props {
+		gravando: boolean;
+		iniciadoPor?: string;
+	}
+
+	const { gravando, iniciadoPor }: Props = $props();
+</script>
+
+{#if gravando}
+	<div
+		class="bg-error/90 text-error-content flex items-center gap-2 px-4 py-2 text-sm font-semibold"
+		role="alert"
+		aria-live="polite"
+	>
+		<div class="animate-pulse">
+			<div class="bg-error-content h-3 w-3 rounded-full"></div>
+		</div>
+		<span>
+			{iniciadoPor ? `Gravando iniciada por ${iniciadoPor}` : 'Chamada está sendo gravada'}
+		</span>
+	</div>
+{/if}

apps/web/src/lib/components/chamados/SlaChart.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+
+	Chart.register(...registerables);
+
+	type Props = {
+		dadosSla: {
+			statusSla: {
+				dentroPrazo: number;
+				proximoVencimento: number;
+				vencido: number;
+				semPrazo: number;
+			};
+			porPrioridade: {
+				baixa: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+				media: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+				alta: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+				critica: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+			};
+			taxaCumprimento: number;
+			totalComPrazo: number;
+			atualizadoEm: number;
+		};
+		height?: number;
+	};
+
+	let { dadosSla, height = 400 }: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let chart: Chart | null = null;
+
+	function prepararDados() {
+		const prioridades = ['Baixa', 'Média', 'Alta', 'Crítica'];
+		const cores = {
+			dentroPrazo: 'rgba(34, 197, 94, 0.8)', // verde
+			proximoVencimento: 'rgba(251, 191, 36, 0.8)', // amarelo
+			vencido: 'rgba(239, 68, 68, 0.8)' // vermelho
+		};
+
+		return {
+			labels: prioridades,
+			datasets: [
+				{
+					label: 'Dentro do Prazo',
+					data: [
+						dadosSla.porPrioridade.baixa.dentroPrazo,
+						dadosSla.porPrioridade.media.dentroPrazo,
+						dadosSla.porPrioridade.alta.dentroPrazo,
+						dadosSla.porPrioridade.critica.dentroPrazo
+					],
+					backgroundColor: cores.dentroPrazo,
+					borderColor: 'rgba(34, 197, 94, 1)',
+					borderWidth: 2
+				},
+				{
+					label: 'Próximo ao Vencimento',
+					data: [
+						dadosSla.porPrioridade.baixa.proximoVencimento,
+						dadosSla.porPrioridade.media.proximoVencimento,
+						dadosSla.porPrioridade.alta.proximoVencimento,
+						dadosSla.porPrioridade.critica.proximoVencimento
+					],
+					backgroundColor: cores.proximoVencimento,
+					borderColor: 'rgba(251, 191, 36, 1)',
+					borderWidth: 2
+				},
+				{
+					label: 'Vencido',
+					data: [
+						dadosSla.porPrioridade.baixa.vencido,
+						dadosSla.porPrioridade.media.vencido,
+						dadosSla.porPrioridade.alta.vencido,
+						dadosSla.porPrioridade.critica.vencido
+					],
+					backgroundColor: cores.vencido,
+					borderColor: 'rgba(239, 68, 68, 1)',
+					borderWidth: 2
+				}
+			]
+		};
+	}
+
+	onMount(() => {
+		if (canvas) {
+			const ctx = canvas.getContext('2d');
+			if (ctx) {
+				const chartData = prepararDados();
+				chart = new Chart(ctx, {
+					type: 'bar',
+					data: chartData,
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						plugins: {
+							legend: {
+								display: true,
+								position: 'top',
+								labels: {
+									color: '#a6adbb',
+									font: {
+										size: 12,
+										family: "'Inter', sans-serif"
+									},
+									usePointStyle: true,
+									padding: 15
+								}
+							},
+							tooltip: {
+								backgroundColor: 'rgba(0, 0, 0, 0.9)',
+								titleColor: '#fff',
+								bodyColor: '#fff',
+								borderColor: '#570df8',
+								borderWidth: 1,
+								padding: 12,
+								callbacks: {
+									label: function (context) {
+										const label = context.dataset.label || '';
+										const value = context.parsed.y;
+										const prioridade = context.label;
+										return `${label}: ${value} chamado(s)`;
+									}
+								}
+							}
+						},
+						scales: {
+							x: {
+								stacked: true,
+								grid: {
+									color: 'rgba(255, 255, 255, 0.05)'
+								},
+								ticks: {
+									color: '#a6adbb',
+									font: {
+										size: 11,
+										weight: '500'
+									}
+								}
+							},
+							y: {
+								stacked: true,
+								beginAtZero: true,
+								grid: {
+									color: 'rgba(255, 255, 255, 0.05)'
+								},
+								ticks: {
+									color: '#a6adbb',
+									font: {
+										size: 11
+									},
+									stepSize: 1
+								}
+							}
+						},
+						animation: {
+							duration: 800,
+							easing: 'easeInOutQuart'
+						}
+					}
+				});
+			}
+		}
+	});
+
+	$effect(() => {
+		if (chart && dadosSla) {
+			const chartData = prepararDados();
+			chart.data = chartData;
+			chart.update('active');
+		}
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<div style="height: {height}px; position: relative;">
+	<canvas bind:this={canvas}></canvas>
+</div>

apps/web/src/lib/components/chamados/TicketCard.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import {
+		corPrazo,
+		formatarData,
+		getStatusBadge,
+		getStatusDescription,
+		getStatusLabel,
+		prazoRestante
+	} from '$lib/utils/chamados';
+	import { createEventDispatcher } from 'svelte';
+
+	type Ticket = Doc<'tickets'>;
+
+	interface Props {
+		ticket: Ticket;
+		selected?: boolean;
+	}
+
+	const dispatch = createEventDispatcher<{ select: { ticketId: Id<'tickets'> } }>();
+	const props: Props = $props();
+	const ticket = $derived(props.ticket);
+	const selected = $derived(props.selected ?? false);
+
+	const prioridadeClasses: Record<string, string> = {
+		baixa: 'badge badge-sm bg-base-200 text-base-content/70',
+		media: 'badge badge-sm badge-info badge-outline',
+		alta: 'badge badge-sm badge-warning',
+		critica: 'badge badge-sm badge-error'
+	};
+
+	function handleSelect() {
+		dispatch('select', { ticketId: ticket._id });
+	}
+
+	function getPrazoBadges() {
+		const badges: Array<{ label: string; classe: string }> = [];
+		if (ticket.prazoResposta) {
+			const cor = corPrazo(ticket.prazoResposta);
+			badges.push({
+				label: `Resposta ${prazoRestante(ticket.prazoResposta) ?? ''}`,
+				classe: `badge badge-xs ${
+					cor === 'error' ? 'badge-error' : cor === 'warning' ? 'badge-warning' : 'badge-success'
+				}`
+			});
+		}
+		if (ticket.prazoConclusao) {
+			const cor = corPrazo(ticket.prazoConclusao);
+			badges.push({
+				label: `Conclusão ${prazoRestante(ticket.prazoConclusao) ?? ''}`,
+				classe: `badge badge-xs ${
+					cor === 'error' ? 'badge-error' : cor === 'warning' ? 'badge-warning' : 'badge-success'
+				}`
+			});
+		}
+		return badges;
+	}
+</script>
+
+<article
+	class={`rounded-2xl border p-4 transition-all duration-200 ${
+		selected
+			? 'border-primary bg-primary/5 shadow-lg'
+			: 'border-base-200 bg-base-100/70 hover:border-primary/40 hover:shadow-md'
+	}`}
+>
+	<button class="w-full text-left" type="button" onclick={handleSelect}>
+		<div class="flex items-start justify-between gap-3">
+			<div>
+				<p class="text-base-content/50 text-xs tracking-wide uppercase">
+					Ticket {ticket.numero}
+				</p>
+				<h3 class="text-base-content text-lg font-semibold">{ticket.titulo}</h3>
+			</div>
+			<span class={getStatusBadge(ticket.status)}>{getStatusLabel(ticket.status)}</span>
+		</div>
+
+		<p class="text-base-content/60 mt-2 line-clamp-2 text-sm">{ticket.descricao}</p>
+
+		<div class="text-base-content/60 mt-3 flex flex-wrap items-center gap-2 text-xs">
+			<span class={prioridadeClasses[ticket.prioridade] ?? 'badge badge-sm'}>
+				Prioridade {ticket.prioridade}
+			</span>
+			<span class="badge badge-xs badge-outline">
+				{ticket.tipo.charAt(0).toUpperCase() + ticket.tipo.slice(1)}
+			</span>
+			{#if ticket.setorResponsavel}
+				<span class="badge badge-xs badge-outline badge-ghost">
+					{ticket.setorResponsavel}
+				</span>
+			{/if}
+		</div>
+
+		<div class="text-base-content/50 mt-4 space-y-1 text-xs">
+			<p>
+				Última interação: {formatarData(ticket.ultimaInteracaoEm)}
+			</p>
+			<p>{getStatusDescription(ticket.status)}</p>
+			<div class="flex flex-wrap gap-2">
+				{#each getPrazoBadges() as badge (badge.label)}
+					<span class={badge.classe}>{badge.label}</span>
+				{/each}
+			</div>
+		</div>
+	</button>
+</article>

apps/web/src/lib/components/chamados/TicketForm.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { createEventDispatcher } from 'svelte';
+	import { Paperclip, X, Send } from 'lucide-svelte';
+
+	interface FormValues {
+		titulo: string;
+		descricao: string;
+		tipo: Doc<'tickets'>['tipo'];
+		prioridade: Doc<'tickets'>['prioridade'];
+		categoria: string;
+		canalOrigem?: string;
+		anexos: File[];
+	}
+
+	interface Props {
+		loading?: boolean;
+	}
+
+	const dispatch = createEventDispatcher<{ submit: { values: FormValues } }>();
+	const props = $props<Props>();
+	const loading = $derived(props.loading ?? false);
+
+	let titulo = $state('');
+	let descricao = $state('');
+	let tipo = $state<Doc<'tickets'>['tipo']>('chamado');
+	let prioridade = $state<Doc<'tickets'>['prioridade']>('media');
+	let categoria = $state('');
+	let canalOrigem = $state('Portal SGSE');
+	let anexos = $state<Array<File>>([]);
+	let errors = $state<Record<string, string>>({});
+	function validate(): boolean {
+		const novoErros: Record<string, string> = {};
+		if (!titulo.trim()) novoErros.titulo = 'Informe um título para o chamado.';
+		if (!descricao.trim()) novoErros.descricao = 'Descrição é obrigatória.';
+		if (!categoria.trim()) novoErros.categoria = 'Informe uma categoria.';
+		errors = novoErros;
+		return Object.keys(novoErros).length === 0;
+	}
+
+	function handleFiles(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const files = Array.from(target.files ?? []);
+		anexos = files.slice(0, 5); // limitar para 5 anexos
+	}
+
+	function removeFile(index: number) {
+		anexos = anexos.filter((_, idx) => idx !== index);
+	}
+
+	function resetForm() {
+		titulo = '';
+		descricao = '';
+		categoria = '';
+		tipo = 'chamado';
+		prioridade = 'media';
+		anexos = [];
+		errors = {};
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (!validate()) return;
+
+		dispatch('submit', {
+			values: {
+				titulo: titulo.trim(),
+				descricao: descricao.trim(),
+				tipo,
+				prioridade,
+				categoria: categoria.trim(),
+				canalOrigem,
+				anexos
+			}
+		});
+	}
+</script>
+
+<form class="space-y-8" onsubmit={handleSubmit}>
+	<!-- Título do Chamado -->
+	<section class="form-control">
+		<label class="label">
+			<span class="label-text text-base-content font-semibold">Título do chamado</span>
+		</label>
+		<input
+			type="text"
+			class="input input-bordered input-primary w-full"
+			placeholder="Ex: Erro ao acessar o módulo de licitações"
+			bind:value={titulo}
+		/>
+		{#if errors.titulo}
+			<span class="text-error mt-1 text-sm">{errors.titulo}</span>
+		{/if}
+	</section>
+
+	<!-- Tipo de Solicitação e Prioridade -->
+	<section class="grid gap-6 md:grid-cols-2">
+		<div class="form-control">
+			<label class="label">
+				<span class="label-text text-base-content font-semibold">Tipo de solicitação</span>
+			</label>
+			<div class="border-base-300 bg-base-200/30 grid grid-cols-2 gap-2 rounded-xl border p-3">
+				{#each [{ value: 'chamado', label: 'Chamado', icon: '📋' }, { value: 'reclamacao', label: 'Reclamação', icon: '⚠️' }, { value: 'elogio', label: 'Elogio', icon: '⭐' }, { value: 'sugestao', label: 'Sugestão', icon: '💡' }] as opcao}
+					<label
+						class={`flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-2 p-2.5 transition-all ${
+							tipo === opcao.value
+								? 'border-primary bg-primary/10 shadow-md'
+								: 'border-base-300 bg-base-100 hover:border-primary/50 hover:bg-base-200/50'
+						}`}
+					>
+						<input
+							type="radio"
+							name="tipo"
+							class="radio radio-primary radio-sm shrink-0"
+							value={opcao.value}
+							checked={tipo === opcao.value}
+							onclick={() => (tipo = opcao.value as typeof tipo)}
+						/>
+						<span class="shrink-0 text-base">{opcao.icon}</span>
+						<span class="flex-1 text-center text-sm font-medium">{opcao.label}</span>
+					</label>
+				{/each}
+			</div>
+		</div>
+
+		<div class="form-control">
+			<label class="label">
+				<span class="label-text text-base-content font-semibold">Prioridade</span>
+			</label>
+			<div class="border-base-300 bg-base-200/30 grid grid-cols-2 gap-2 rounded-xl border p-3">
+				{#each [{ value: 'baixa', label: 'Baixa', color: 'badge-success' }, { value: 'media', label: 'Média', color: 'badge-info' }, { value: 'alta', label: 'Alta', color: 'badge-warning' }, { value: 'critica', label: 'Crítica', color: 'badge-error' }] as opcao}
+					<label
+						class={`flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-2 p-2.5 transition-all ${
+							prioridade === opcao.value
+								? 'border-primary bg-primary/10 shadow-md'
+								: 'border-base-300 bg-base-100 hover:border-primary/50 hover:bg-base-200/50'
+						}`}
+					>
+						<input
+							type="radio"
+							name="prioridade"
+							class={`radio radio-sm shrink-0 ${
+								opcao.value === 'baixa'
+									? 'radio-success'
+									: opcao.value === 'media'
+										? 'radio-info'
+										: opcao.value === 'alta'
+											? 'radio-warning'
+											: 'radio-error'
+							}`}
+							value={opcao.value}
+							checked={prioridade === opcao.value}
+							onclick={() => (prioridade = opcao.value as typeof prioridade)}
+						/>
+						<span class={`badge badge-sm ${opcao.color} flex-1 justify-center`}>{opcao.label}</span>
+					</label>
+				{/each}
+			</div>
+		</div>
+	</section>
+
+	<!-- Categoria -->
+	<section class="form-control">
+		<label class="label">
+			<span class="label-text text-base-content font-semibold">Categoria</span>
+		</label>
+		<input
+			type="text"
+			class="input input-bordered w-full"
+			placeholder="Ex: Infraestrutura, Sistemas, Acesso"
+			bind:value={categoria}
+		/>
+		{#if errors.categoria}
+			<span class="text-error mt-1 text-sm">{errors.categoria}</span>
+		{/if}
+	</section>
+
+	<!-- Descrição Detalhada -->
+	<section class="form-control">
+		<label class="label">
+			<span class="label-text text-base-content font-semibold">Descrição detalhada</span>
+			<span class="label-text-alt text-base-content/50">Obrigatório</span>
+		</label>
+		<textarea
+			class="textarea textarea-bordered textarea-lg min-h-[180px]"
+			placeholder="Descreva o problema, erro ou sugestão com o máximo de detalhes possível..."
+			bind:value={descricao}
+		></textarea>
+		{#if errors.descricao}
+			<span class="text-error mt-1 text-sm">{errors.descricao}</span>
+		{/if}
+	</section>
+
+	<!-- Anexos -->
+	<section class="border-base-300 bg-base-200/30 space-y-4 rounded-xl border p-4">
+		<div class="flex items-center justify-between">
+			<div>
+				<p class="text-base-content font-semibold">Anexos (opcional)</p>
+				<p class="text-base-content/60 text-sm">Suporte a PDF e imagens (máx. 10MB por arquivo)</p>
+			</div>
+			<label class="btn btn-outline btn-sm">
+				<Paperclip class="h-4 w-4" strokeWidth={2} />
+				Selecionar arquivos
+				<input
+					type="file"
+					class="hidden"
+					multiple
+					accept=".pdf,.png,.jpg,.jpeg"
+					onchange={handleFiles}
+				/>
+			</label>
+		</div>
+
+		{#if anexos.length > 0}
+			<div class="border-base-200 bg-base-100/70 space-y-2 rounded-2xl border p-4">
+				{#each anexos as file, index (file.name + index)}
+					<div
+						class="border-base-200 bg-base-100 flex items-center justify-between gap-3 rounded-xl border px-3 py-2"
+					>
+						<div>
+							<p class="text-sm font-medium">{file.name}</p>
+							<p class="text-base-content/60 text-xs">
+								{(file.size / 1024 / 1024).toFixed(2)} MB • {file.type}
+							</p>
+						</div>
+						<button
+							type="button"
+							class="btn btn-ghost btn-sm text-error"
+							onclick={() => removeFile(index)}
+						>
+							Remover
+						</button>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div
+				class="border-base-300 bg-base-100/50 text-base-content/60 rounded-2xl border border-dashed p-6 text-center text-sm"
+			>
+				Nenhum arquivo selecionado.
+			</div>
+		{/if}
+	</section>
+
+	<!-- Ações do Formulário -->
+	<section class="border-base-300 flex flex-wrap gap-3 border-t pt-6">
+		<button type="submit" class="btn btn-primary min-w-[200px] flex-1 shadow-lg" disabled={loading}>
+			{#if loading}
+				<span class="loading loading-spinner loading-sm"></span>
+				Enviando...
+			{:else}
+				<Send class="h-5 w-5" strokeWidth={2} />
+				Registrar chamado
+			{/if}
+		</button>
+		<button type="button" class="btn btn-ghost" onclick={resetForm} disabled={loading}>
+			<X class="h-5 w-5" strokeWidth={2} />
+			Limpar
+		</button>
+	</section>
+</form>

apps/web/src/lib/components/chamados/TicketTimeline.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import {
+		formatarData,
+		formatarTimelineEtapa,
+		prazoRestante,
+		timelineStatus
+	} from '$lib/utils/chamados';
+
+	type Ticket = Doc<'tickets'>;
+	type TimelineEntry = NonNullable<Ticket['timeline']>[number];
+
+	interface Props {
+		timeline?: Array<TimelineEntry>;
+	}
+
+	const props: Props = $props();
+	let timeline = $derived<Array<TimelineEntry>>(props.timeline ?? []);
+
+	const badgeClasses: Record<string, string> = {
+		success: 'bg-success/20 text-success border-success/40',
+		warning: 'bg-warning/20 text-warning border-warning/40',
+		error: 'bg-error/20 text-error border-error/40',
+		info: 'bg-info/20 text-info border-info/40'
+	};
+
+	function getBadgeClass(entry: TimelineEntry) {
+		const status = timelineStatus(entry);
+		return badgeClasses[status] ?? badgeClasses.info;
+	}
+
+	function getStatusLabel(entry: TimelineEntry) {
+		if (entry.status === 'concluido') return 'Concluído';
+		if (entry.status === 'em_andamento') return 'Em andamento';
+		if (entry.status === 'vencido') return 'Vencido';
+		return 'Pendente';
+	}
+
+	function getPrazoDescricao(entry: TimelineEntry) {
+		if (entry.status === 'concluido' && entry.concluidoEm) {
+			return `Concluído em ${formatarData(entry.concluidoEm)}`;
+		}
+		if (!entry.prazo) return 'Sem prazo definido';
+		return `${formatarData(entry.prazo)} • ${prazoRestante(entry.prazo) ?? ''}`;
+	}
+</script>
+
+<div class="space-y-4">
+	{#if timeline.length === 0}
+		<div class="alert alert-info">
+			<span>Nenhuma etapa registrada ainda.</span>
+		</div>
+	{:else}
+		{#each timeline as entry (entry.etapa + entry.prazo)}
+			<div class="flex gap-3">
+				<div class="relative flex flex-col items-center">
+					<div class={`badge border ${getBadgeClass(entry)}`}>
+						{formatarTimelineEtapa(entry.etapa)}
+					</div>
+					{#if entry !== timeline[timeline.length - 1]}
+						<div class="bg-base-200/80 mt-2 h-full w-px flex-1"></div>
+					{/if}
+				</div>
+				<div class="border-base-200 bg-base-100/80 flex-1 rounded-2xl border p-4 shadow-sm">
+					<div class="flex flex-wrap items-center gap-2">
+						<span class="text-base-content text-sm font-semibold">
+							{getStatusLabel(entry)}
+						</span>
+						{#if entry.status !== 'concluido' && entry.prazo}
+							<span class="badge badge-sm badge-outline">
+								{prazoRestante(entry.prazo)}
+							</span>
+						{/if}
+					</div>
+					{#if entry.observacao}
+						<p class="text-base-content/70 mt-2 text-sm">{entry.observacao}</p>
+					{/if}
+					<p class="text-base-content/50 mt-3 text-xs tracking-wide uppercase">
+						{getPrazoDescricao(entry)}
+					</p>
+				</div>
+			</div>
+		{/each}
+	{/if}
+</div>

apps/web/src/lib/components/chat/ChatList.svelte

@@ -1,412 +1,455 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { abrirConversa } from "$lib/stores/chatStore";
-  import { formatDistanceToNow } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import UserAvatar from "./UserAvatar.svelte";
-  import NewConversationModal from "./NewConversationModal.svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { abrirConversa } from '$lib/stores/chatStore';
+	import { formatDistanceToNow } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import UserStatusBadge from './UserStatusBadge.svelte';
+	import UserAvatar from './UserAvatar.svelte';
+	import NewConversationModal from './NewConversationModal.svelte';
+	import { Search, Plus, MessageSquare, Users, UsersRound } from 'lucide-svelte';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { obterCoresDoTema } from '$lib/utils/temas';
 
-  const client = useConvexClient();
-  
-  // Buscar todos os usuários para o chat
-  const usuarios = useQuery(api.usuarios.listarParaChat, {});
-  
-  // Buscar o perfil do usuário logado
-  const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
+	const client = useConvexClient();
 
-  // Buscar conversas (grupos e salas de reunião)
-  const conversas = useQuery(api.chat.listarConversas, {});
+	// Buscar todos os usuários para o chat
+	const usuarios = useQuery(api.usuarios.listarParaChat, {});
 
-  let searchQuery = $state("");
-  let activeTab = $state<"usuarios" | "conversas">("usuarios");
+	// Buscar o perfil do usuário logado
+	const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
 
-  // Debug: monitorar carregamento de dados
-  $effect(() => {
-    console.log("📊 [ChatList] Usuários carregados:", usuarios?.data?.length || 0);
-    console.log("👤 [ChatList] Meu perfil:", meuPerfil?.data?.nome || "Carregando...");
-    console.log("🆔 [ChatList] Meu ID:", meuPerfil?.data?._id || "Não encontrado");
-    if (usuarios?.data) {
-      const meuId = meuPerfil?.data?._id;
-      const meusDadosNaLista = usuarios.data.find((u: any) => u._id === meuId);
-      if (meusDadosNaLista) {
-        console.warn("⚠️ [ChatList] ATENÇÃO: Meu usuário está na lista do backend!", meusDadosNaLista.nome);
-      }
-    }
-  });
+	// Buscar conversas (grupos e salas de reunião)
+	const conversas = useQuery(api.chat.listarConversas, {});
 
-  const usuariosFiltrados = $derived.by(() => {
-    if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
-    
-    // Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
-    if (!meuPerfil?.data) {
-      console.log("⏳ [ChatList] Aguardando perfil do usuário...");
-      return [];
-    }
-    
-    const meuId = meuPerfil.data._id;
-    
-    // Filtrar o próprio usuário da lista (filtro de segurança no frontend)
-    let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId);
-    
-    // Log se ainda estiver na lista após filtro (não deveria acontecer)
-    const aindaNaLista = listaFiltrada.find((u: any) => u._id === meuId);
-    if (aindaNaLista) {
-      console.error("❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!");
-    }
-    
-    // Aplicar busca por nome/email/matrícula
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      listaFiltrada = listaFiltrada.filter((u: any) => 
-        u.nome?.toLowerCase().includes(query) ||
-        u.email?.toLowerCase().includes(query) ||
-        u.matricula?.toLowerCase().includes(query)
-      );
-    }
-    
-    // Ordenar: Online primeiro, depois por nome
-    return listaFiltrada.sort((a: any, b: any) => {
-      const statusOrder = { online: 0, ausente: 1, externo: 2, em_reuniao: 3, offline: 4 };
-      const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
-      const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
-      
-      if (statusA !== statusB) return statusA - statusB;
-      return a.nome.localeCompare(b.nome);
-    });
-  });
+	let searchQuery = $state('');
+	let activeTab = $state<'usuarios' | 'conversas'>('usuarios');
+	
+	// Obter cores do tema atual (reativo)
+	let coresTema = $state(obterCoresDoTema());
+	
+	// Atualizar cores quando o tema mudar
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		
+		const atualizarCores = () => {
+			coresTema = obterCoresDoTema();
+		};
+		
+		atualizarCores();
+		
+		window.addEventListener('themechange', atualizarCores);
+		
+		const observer = new MutationObserver(atualizarCores);
+		const htmlElement = document.documentElement;
+		observer.observe(htmlElement, {
+			attributes: true,
+			attributeFilter: ['data-theme']
+		});
+		
+		return () => {
+			window.removeEventListener('themechange', atualizarCores);
+			observer.disconnect();
+		};
+	});
+	
+	// Função para obter rgba da cor primária
+	function obterPrimariaRgba(alpha: number = 1) {
+		const primary = coresTema.primary;
+		if (primary.startsWith('rgba')) {
+			const match = primary.match(/rgba?\(([^)]+)\)/);
+			if (match) {
+				const values = match[1].split(',');
+				return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${alpha})`;
+			}
+		}
+		if (primary.startsWith('#')) {
+			const hex = primary.replace('#', '');
+			const r = parseInt(hex.substring(0, 2), 16);
+			const g = parseInt(hex.substring(2, 4), 16);
+			const b = parseInt(hex.substring(4, 6), 16);
+			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+		}
+		if (primary.startsWith('hsl')) {
+			return primary.replace(/\)$/, `, ${alpha})`).replace('hsl', 'hsla');
+		}
+		return `rgba(102, 126, 234, ${alpha})`;
+	}
 
-  function formatarTempo(timestamp: number | undefined): string {
-    if (!timestamp) return "";
-    try {
-      return formatDistanceToNow(new Date(timestamp), {
-        addSuffix: true,
-        locale: ptBR,
-      });
-    } catch {
-      return "";
-    }
-  }
+	// Debug: monitorar carregamento de dados
+	$effect(() => {
+		console.log('📊 [ChatList] Usuários carregados:', usuarios?.data?.length || 0);
+		console.log('👤 [ChatList] Meu perfil:', meuPerfil?.data?.nome || 'Carregando...');
+		console.log('🆔 [ChatList] Meu ID:', meuPerfil?.data?._id || 'Não encontrado');
+		if (usuarios?.data) {
+			const meuId = meuPerfil?.data?._id;
+			const meusDadosNaLista = usuarios.data.find((u) => u._id === meuId);
+			if (meusDadosNaLista) {
+				console.warn(
+					'⚠️ [ChatList] ATENÇÃO: Meu usuário está na lista do backend!',
+					meusDadosNaLista.nome
+				);
+			}
+		}
+	});
 
-  let processando = $state(false);
-  let showNewConversationModal = $state(false);
+	let usuariosFiltrados = $derived.by(() => {
+		if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
 
-  async function handleClickUsuario(usuario: any) {
-    if (processando) {
-      console.log("⏳ Já está processando uma ação, aguarde...");
-      return;
-    }
+		// Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
+		if (!meuPerfil?.data) {
+			console.log('⏳ [ChatList] Aguardando perfil do usuário...');
+			return [];
+		}
 
-    try {
-      processando = true;
-      console.log("🔄 Clicou no usuário:", usuario.nome, "ID:", usuario._id);
-      
-      // Criar ou buscar conversa individual com este usuário
-      console.log("📞 Chamando mutation criarOuBuscarConversaIndividual...");
-      const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
-        outroUsuarioId: usuario._id,
-      });
-      
-      console.log("✅ Conversa criada/encontrada. ID:", conversaId);
-      
-      // Abrir a conversa
-      console.log("📂 Abrindo conversa...");
-      abrirConversa(conversaId as any);
-      
-      console.log("✅ Conversa aberta com sucesso!");
-    } catch (error) {
-      console.error("❌ Erro ao abrir conversa:", error);
-      console.error("Detalhes do erro:", {
-        message: error instanceof Error ? error.message : String(error),
-        stack: error instanceof Error ? error.stack : undefined,
-        usuario: usuario,
-      });
-      alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      processando = false;
-    }
-  }
+		const meuId = meuPerfil.data._id;
 
-  function getStatusLabel(status: string | undefined): string {
-    const labels: Record<string, string> = {
-      online: "Online",
-      offline: "Offline",
-      ausente: "Ausente",
-      externo: "Externo",
-      em_reuniao: "Em Reunião",
-    };
-    return labels[status || "offline"] || "Offline";
-  }
+		// Filtrar o próprio usuário da lista (filtro de segurança no frontend)
+		let listaFiltrada = usuarios.data.filter((u) => u._id !== meuId);
 
-  // Filtrar conversas por tipo e busca
-  const conversasFiltradas = $derived(() => {
-    if (!conversas?.data) return [];
-    
-    let lista = conversas.data.filter((c: any) => 
-      c.tipo === "grupo" || c.tipo === "sala_reuniao"
-    );
-    
-    // Aplicar busca
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      lista = lista.filter((c: any) =>
-        c.nome?.toLowerCase().includes(query)
-      );
-    }
-    
-    return lista;
-  });
+		// Log se ainda estiver na lista após filtro (não deveria acontecer)
+		const aindaNaLista = listaFiltrada.find((u) => u._id === meuId);
+		if (aindaNaLista) {
+			console.error('❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!');
+		}
 
-  function handleClickConversa(conversa: any) {
-    if (processando) return;
-    try {
-      processando = true;
-      abrirConversa(conversa._id);
-    } catch (error) {
-      console.error("Erro ao abrir conversa:", error);
-      alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      processando = false;
-    }
-  }
+		// Aplicar busca por nome/email/matrícula
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			listaFiltrada = listaFiltrada.filter(
+				(u) =>
+					u.nome?.toLowerCase().includes(query) ||
+					u.email?.toLowerCase().includes(query) ||
+					u.matricula?.toLowerCase().includes(query)
+			);
+		}
+
+		// Ordenar: Online primeiro, depois por nome
+		return listaFiltrada.sort((a, b) => {
+			const statusOrder = {
+				online: 0,
+				ausente: 1,
+				externo: 2,
+				em_reuniao: 3,
+				offline: 4
+			};
+			const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
+
+			if (statusA !== statusB) return statusA - statusB;
+			return a.nome.localeCompare(b.nome);
+		});
+	});
+
+	function formatarTempo(timestamp: number | undefined): string {
+		if (!timestamp) return '';
+		try {
+			return formatDistanceToNow(new Date(timestamp), {
+				addSuffix: true,
+				locale: ptBR
+			});
+		} catch {
+			return '';
+		}
+	}
+
+	let processando = $state(false);
+	let showNewConversationModal = $state(false);
+
+	async function handleClickUsuario(usuario: any) {
+		if (processando) {
+			console.log('⏳ Já está processando uma ação, aguarde...');
+			return;
+		}
+
+		try {
+			processando = true;
+			console.log('🔄 Clicou no usuário:', usuario.nome, 'ID:', usuario._id);
+
+			// Criar ou buscar conversa individual com este usuário
+			console.log('📞 Chamando mutation criarOuBuscarConversaIndividual...');
+			const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
+				outroUsuarioId: usuario._id
+			});
+
+			console.log('✅ Conversa criada/encontrada. ID:', conversaId);
+
+			// Abrir a conversa
+			console.log('📂 Abrindo conversa...');
+			abrirConversa(conversaId as Id<'conversas'>);
+
+			console.log('✅ Conversa aberta com sucesso!');
+		} catch (error) {
+			console.error('❌ Erro ao abrir conversa:', error);
+			console.error('Detalhes do erro:', {
+				message: error instanceof Error ? error.message : String(error),
+				stack: error instanceof Error ? error.stack : undefined,
+				usuario: usuario
+			});
+			alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function getStatusLabel(status: string | undefined): string {
+		const labels: Record<string, string> = {
+			online: 'Online',
+			offline: 'Offline',
+			ausente: 'Ausente',
+			externo: 'Externo',
+			em_reuniao: 'Em Reunião'
+		};
+		return labels[status || 'offline'] || 'Offline';
+	}
+
+	// Filtrar conversas por tipo e busca
+	let conversasFiltradas = $derived.by(() => {
+		if (!conversas?.data) return [];
+
+		let lista = conversas.data.filter(
+			(c: Doc<'conversas'>) => c.tipo === 'grupo' || c.tipo === 'sala_reuniao'
+		);
+
+		// Aplicar busca
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			lista = lista.filter((c: Doc<'conversas'>) => c.nome?.toLowerCase().includes(query));
+		}
+
+		return lista;
+	});
+
+	interface Conversa {
+		_id: Id<'conversas'>;
+		[key: string]: unknown;
+	}
+
+	function handleClickConversa(conversa: Conversa) {
+		if (processando) return;
+		try {
+			processando = true;
+			abrirConversa(conversa._id);
+		} catch (error) {
+			console.error('Erro ao abrir conversa:', error);
+			alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			processando = false;
+		}
+	}
 </script>
 
-<div class="flex flex-col h-full">
-  <!-- Search bar -->
-  <div class="p-4 border-b border-base-300">
-    <div class="relative">
-      <input
-        type="text"
-        placeholder="Buscar usuários (nome, email, matrícula)..."
-        class="input input-bordered w-full pl-10"
-        bind:value={searchQuery}
-      />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-        />
-      </svg>
-    </div>
-  </div>
+<div class="flex h-full flex-col">
+	<!-- Search bar -->
+	<div class="border-base-300 border-b p-4">
+		<div class="relative">
+			<input
+				type="text"
+				placeholder="Buscar usuários (nome, email, matrícula)..."
+				class="input input-bordered w-full pl-10"
+				bind:value={searchQuery}
+				aria-label="Buscar usuários ou conversas"
+				aria-describedby="search-help"
+			/>
+			<span id="search-help" class="sr-only"
+				>Digite para buscar usuários por nome, email ou matrícula</span
+			>
+			<Search
+				class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2"
+				strokeWidth={1.5}
+			/>
+		</div>
+	</div>
 
-  <!-- Tabs e Título -->
-  <div class="border-b border-base-300 bg-base-200">
-    <!-- Tabs -->
-    <div class="tabs tabs-boxed p-2">
-      <button
-        type="button"
-        class={`tab flex-1 ${activeTab === "usuarios" ? "tab-active" : ""}`}
-        onclick={() => (activeTab = "usuarios")}
-      >
-        👥 Usuários ({usuariosFiltrados.length})
-      </button>
-      <button
-        type="button"
-        class={`tab flex-1 ${activeTab === "conversas" ? "tab-active" : ""}`}
-        onclick={() => (activeTab = "conversas")}
-      >
-        💬 Conversas ({conversasFiltradas().length})
-      </button>
-    </div>
-    
-    <!-- Botão Nova Conversa -->
-    <div class="px-4 pb-2 flex justify-end">
-      <button
-        type="button"
-        class="btn btn-primary btn-sm"
-        onclick={() => (showNewConversationModal = true)}
-        title="Nova conversa (grupo ou sala de reunião)"
-        aria-label="Nova conversa"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-          class="w-4 h-4 mr-1"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-        </svg>
-        Nova Conversa
-      </button>
-    </div>
-  </div>
+	<!-- Tabs e Título -->
+	<div class="border-base-300 bg-base-200 border-b">
+		<!-- Tabs -->
+		<div class="tabs tabs-boxed p-2">
+			<button
+				type="button"
+				class={`tab flex-1 ${activeTab === 'usuarios' ? 'tab-active' : ''}`}
+				onclick={() => (activeTab = 'usuarios')}
+			>
+				👥 Usuários ({usuariosFiltrados.length})
+			</button>
+			<button
+				type="button"
+				class={`tab flex-1 ${activeTab === 'conversas' ? 'tab-active' : ''}`}
+				onclick={() => (activeTab = 'conversas')}
+			>
+				💬 Conversas ({conversasFiltradas.length})
+			</button>
+		</div>
 
-  <!-- Lista de conteúdo -->
-  <div class="flex-1 overflow-y-auto">
-    {#if activeTab === "usuarios"}
-      <!-- Lista de usuários -->
-    {#if usuarios?.data && usuariosFiltrados.length > 0}
-      {#each usuariosFiltrados as usuario (usuario._id)}
-        <button
-          type="button"
-          class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando ? 'opacity-50 cursor-wait' : 'cursor-pointer'}"
-          onclick={() => handleClickUsuario(usuario)}
-          disabled={processando}
-        >
-            <!-- Ícone de mensagem -->
-            <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110"
-                 style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="w-5 h-5 text-primary"
-              >
-                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-                <path d="M9 10h.01M15 10h.01"/>
-              </svg>
-            </div>
+		<!-- Botão Nova Conversa -->
+		<div class="flex justify-end px-4 pb-2">
+			<button
+				type="button"
+				class="btn btn-primary btn-sm"
+				onclick={() => (showNewConversationModal = true)}
+				title="Nova conversa (grupo ou sala de reunião)"
+				aria-label="Nova conversa"
+			>
+				<Plus class="mr-1 h-4 w-4" strokeWidth={2} />
+				Nova Conversa
+			</button>
+		</div>
+	</div>
 
-          <!-- Avatar -->
-          <div class="relative flex-shrink-0">
-            <UserAvatar 
-              avatar={usuario.avatar}
-              fotoPerfilUrl={usuario.fotoPerfilUrl}
-              nome={usuario.nome}
-              size="md"
-            />
-            <!-- Status badge -->
-            <div class="absolute bottom-0 right-0">
-              <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
-            </div>
-          </div>
+	<!-- Lista de conteúdo -->
+	<div class="flex-1 overflow-y-auto">
+		{#if activeTab === 'usuarios'}
+			<!-- Lista de usuários -->
+			{#if usuarios?.data && usuariosFiltrados.length > 0}
+				{#each usuariosFiltrados as usuario (usuario._id)}
+					<button
+						type="button"
+						class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
+							? 'cursor-wait opacity-50'
+							: 'cursor-pointer'}"
+						onclick={() => handleClickUsuario(usuario)}
+						disabled={processando}
+						aria-label="Abrir conversa com {usuario.nome}"
+						aria-describedby="usuario-status-{usuario._id}"
+					>
+						<!-- Ícone de mensagem -->
+						<div
+							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110"
+							style="background: linear-gradient(135deg, {obterPrimariaRgba(0.1)} 0%, {obterPrimariaRgba(0.1)} 100%); border: 1px solid {obterPrimariaRgba(0.2)};"
+						>
+							<MessageSquare class="text-primary h-5 w-5" strokeWidth={2} />
+						</div>
 
-          <!-- Conteúdo -->
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center justify-between mb-1">
-              <p class="font-semibold text-base-content truncate">
-                {usuario.nome}
-              </p>
-              <span class="text-xs px-2 py-0.5 rounded-full {
-                usuario.statusPresenca === 'online' ? 'bg-success/20 text-success' :
-                usuario.statusPresenca === 'ausente' ? 'bg-warning/20 text-warning' :
-                usuario.statusPresenca === 'em_reuniao' ? 'bg-error/20 text-error' :
-                'bg-base-300 text-base-content/50'
-              }">
-                {getStatusLabel(usuario.statusPresenca)}
-              </span>
-            </div>
-            <div class="flex items-center gap-2">
-              <p class="text-sm text-base-content/70 truncate">
-                {usuario.statusMensagem || usuario.email}
-              </p>
-            </div>
-          </div>
-        </button>
-      {/each}
-    {:else if !usuarios?.data}
-      <!-- Loading -->
-      <div class="flex items-center justify-center h-full">
-        <span class="loading loading-spinner loading-lg"></span>
-      </div>
-    {:else}
-      <!-- Nenhum usuário encontrado -->
-      <div class="flex flex-col items-center justify-center h-full text-center px-4">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-16 h-16 text-base-content/30 mb-4"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-          />
-        </svg>
-        <p class="text-base-content/70">Nenhum usuário encontrado</p>
-      </div>
-      {/if}
-    {:else}
-      <!-- Lista de conversas (grupos e salas) -->
-      {#if conversas?.data && conversasFiltradas().length > 0}
-        {#each conversasFiltradas() as conversa (conversa._id)}
-          <button
-            type="button"
-            class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando ? 'opacity-50 cursor-wait' : 'cursor-pointer'}"
-            onclick={() => handleClickConversa(conversa)}
-            disabled={processando}
-          >
-            <!-- Ícone de grupo/sala -->
-            <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 {
-              conversa.tipo === 'sala_reuniao' 
-                ? 'bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-300/30' 
-                : 'bg-gradient-to-br from-primary/20 to-secondary/20 border border-primary/30'
-            }">
-              {#if conversa.tipo === "sala_reuniao"}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-blue-500">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
-                </svg>
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-primary">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
-                </svg>
-              {/if}
-            </div>
+						<!-- Avatar -->
+						<div class="relative shrink-0">
+							<UserAvatar
+								fotoPerfilUrl={usuario.fotoPerfilUrl}
+								nome={usuario.nome}
+								size="md"
+								userId={usuario._id}
+							/>
+							<!-- Status badge -->
+							<div class="absolute right-0 bottom-0">
+								<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
+							</div>
+						</div>
 
-            <!-- Conteúdo -->
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center justify-between mb-1">
-                <p class="font-semibold text-base-content truncate">
-                  {conversa.nome || (conversa.tipo === "sala_reuniao" ? "Sala sem nome" : "Grupo sem nome")}
-                </p>
-                {#if conversa.naoLidas > 0}
-                  <span class="badge badge-primary badge-sm">{conversa.naoLidas}</span>
-                {/if}
-              </div>
-              <div class="flex items-center gap-2">
-                <span class="text-xs px-2 py-0.5 rounded-full {
-                  conversa.tipo === 'sala_reuniao' ? 'bg-blue-500/20 text-blue-500' : 'bg-primary/20 text-primary'
-                }">
-                  {conversa.tipo === "sala_reuniao" ? "👑 Sala de Reunião" : "👥 Grupo"}
-                </span>
-                {#if conversa.participantesInfo}
-                  <span class="text-xs text-base-content/50">
-                    {conversa.participantesInfo.length} participante{conversa.participantesInfo.length !== 1 ? 's' : ''}
-                  </span>
-                {/if}
-              </div>
-            </div>
-          </button>
-        {/each}
-      {:else if !conversas?.data}
-        <!-- Loading -->
-        <div class="flex items-center justify-center h-full">
-          <span class="loading loading-spinner loading-lg"></span>
-        </div>
-      {:else}
-        <!-- Nenhuma conversa encontrada -->
-        <div class="flex flex-col items-center justify-center h-full text-center px-4">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 text-base-content/30 mb-4">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
-          </svg>
-          <p class="text-base-content/70 font-medium mb-2">Nenhuma conversa encontrada</p>
-          <p class="text-sm text-base-content/50">Crie um grupo ou sala de reunião para começar</p>
-        </div>
-      {/if}
-    {/if}
-  </div>
+						<!-- Conteúdo -->
+						<div class="min-w-0 flex-1">
+							<div class="mb-1 flex items-center justify-between">
+								<p class="text-base-content truncate font-semibold">
+									{usuario.nome}
+								</p>
+								<span
+									class="rounded-full px-2 py-0.5 text-xs {usuario.statusPresenca === 'online'
+										? 'bg-success/20 text-success'
+										: usuario.statusPresenca === 'ausente'
+											? 'bg-warning/20 text-warning'
+											: usuario.statusPresenca === 'em_reuniao'
+												? 'bg-error/20 text-error'
+												: 'bg-base-300 text-base-content/50'}"
+								>
+									{getStatusLabel(usuario.statusPresenca)}
+								</span>
+							</div>
+							<div class="flex items-center gap-2">
+								<p class="text-base-content/70 truncate text-sm">
+									{usuario.statusMensagem || usuario.email}
+								</p>
+							</div>
+							<span id="usuario-status-{usuario._id}" class="sr-only">
+								Status: {getStatusLabel(usuario.statusPresenca)}
+							</span>
+						</div>
+					</button>
+				{/each}
+			{:else if !usuarios?.data}
+				<!-- Loading -->
+				<div class="flex h-full items-center justify-center">
+					<span class="loading loading-spinner loading-lg"></span>
+				</div>
+			{:else}
+				<!-- Nenhum usuário encontrado -->
+				<div class="flex h-full flex-col items-center justify-center px-4 text-center">
+					<UsersRound class="text-base-content/30 mb-4 h-16 w-16" strokeWidth={1.5} />
+					<p class="text-base-content/70">Nenhum usuário encontrado</p>
+				</div>
+			{/if}
+		{:else}
+			<!-- Lista de conversas (grupos e salas) -->
+			{#if conversas?.data && conversasFiltradas.length > 0}
+				{#each conversasFiltradas as conversa (conversa._id)}
+					<button
+						type="button"
+						class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
+							? 'cursor-wait opacity-50'
+							: 'cursor-pointer'}"
+						onclick={() => handleClickConversa(conversa)}
+						disabled={processando}
+					>
+						<!-- Ícone de grupo/sala -->
+						<div
+							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110 {conversa.tipo ===
+							'sala_reuniao'
+								? 'border border-blue-300/30 bg-linear-to-br from-blue-500/20 to-purple-500/20'
+								: 'from-primary/20 to-secondary/20 border-primary/30 border bg-linear-to-br'}"
+						>
+							{#if conversa.tipo === 'sala_reuniao'}
+								<UsersRound class="h-5 w-5 text-blue-500" strokeWidth={2} />
+							{:else}
+								<Users class="text-primary h-5 w-5" strokeWidth={2} />
+							{/if}
+						</div>
+
+						<!-- Conteúdo -->
+						<div class="min-w-0 flex-1">
+							<div class="mb-1 flex items-center justify-between">
+								<p class="text-base-content truncate font-semibold">
+									{conversa.nome ||
+										(conversa.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome')}
+								</p>
+								{#if conversa.naoLidas > 0}
+									<span class="badge badge-primary badge-sm">{conversa.naoLidas}</span>
+								{/if}
+							</div>
+							<div class="flex items-center gap-2">
+								<span
+									class="rounded-full px-2 py-0.5 text-xs {conversa.tipo === 'sala_reuniao'
+										? 'bg-blue-500/20 text-blue-500'
+										: 'bg-primary/20 text-primary'}"
+								>
+									{conversa.tipo === 'sala_reuniao' ? '👑 Sala de Reunião' : '👥 Grupo'}
+								</span>
+								{#if conversa.participantesInfo}
+									<span class="text-base-content/50 text-xs">
+										{conversa.participantesInfo.length} participante{conversa.participantesInfo
+											.length !== 1
+											? 's'
+											: ''}
+									</span>
+								{/if}
+							</div>
+						</div>
+					</button>
+				{/each}
+			{:else if !conversas?.data}
+				<!-- Loading -->
+				<div class="flex h-full items-center justify-center">
+					<span class="loading loading-spinner loading-lg"></span>
+				</div>
+			{:else}
+				<!-- Nenhuma conversa encontrada -->
+				<div class="flex h-full flex-col items-center justify-center px-4 text-center">
+					<MessageSquare class="text-base-content/30 mb-4 h-16 w-16" strokeWidth={1.5} />
+					<p class="text-base-content/70 mb-2 font-medium">Nenhuma conversa encontrada</p>
+					<p class="text-base-content/50 text-sm">Crie um grupo ou sala de reunião para começar</p>
+				</div>
+			{/if}
+		{/if}
+	</div>
 </div>
 
 <!-- Modal de Nova Conversa -->
 {#if showNewConversationModal}
-  <NewConversationModal onClose={() => (showNewConversationModal = false)} />
+	<NewConversationModal onClose={() => (showNewConversationModal = false)} />
 {/if}

apps/web/src/lib/components/chat/ConnectionIndicator.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { useConvexClient } from 'convex-svelte';
+	import { onMount } from 'svelte';
+	import { Wifi, WifiOff, AlertCircle } from 'lucide-svelte';
+
+	const client = useConvexClient();
+
+	let isOnline = $state(true);
+	let convexConnected = $state(true);
+	let showIndicator = $state(false);
+
+	// Detectar status de conexão com internet
+	function updateOnlineStatus() {
+		isOnline = navigator.onLine;
+		showIndicator = !isOnline || !convexConnected;
+	}
+
+	// Detectar status de conexão com Convex
+	function updateConvexStatus() {
+		// Verificar se o client está conectado
+		// O Convex client expõe o status de conexão
+		const connectionState = (client as any).connectionState?.();
+		convexConnected = connectionState === 'Connected' || connectionState === 'Connecting';
+		showIndicator = !isOnline || !convexConnected;
+	}
+
+	onMount(() => {
+		// Verificar status inicial
+		updateOnlineStatus();
+		updateConvexStatus();
+
+		// Listeners para mudanças de conexão
+		window.addEventListener('online', updateOnlineStatus);
+		window.addEventListener('offline', updateOnlineStatus);
+
+		// Verificar status do Convex periodicamente
+		const interval = setInterval(() => {
+			updateConvexStatus();
+		}, 5000);
+
+		return () => {
+			window.removeEventListener('online', updateOnlineStatus);
+			window.removeEventListener('offline', updateOnlineStatus);
+			clearInterval(interval);
+		};
+	});
+
+	// Observar mudanças no client do Convex
+	$effect(() => {
+		// Tentar acessar o estado de conexão do Convex
+		try {
+			const connectionState = (client as any).connectionState?.();
+			if (connectionState !== undefined) {
+				convexConnected = connectionState === 'Connected' || connectionState === 'Connecting';
+				showIndicator = !isOnline || !convexConnected;
+			}
+		} catch {
+			// Se não conseguir acessar, assumir conectado
+			convexConnected = true;
+		}
+	});
+</script>
+
+{#if showIndicator}
+	<div
+		class="fixed bottom-4 left-4 z-[99998] flex items-center gap-2 rounded-lg px-3 py-2 shadow-lg transition-all"
+		class:bg-error={!isOnline || !convexConnected}
+		class:bg-warning={isOnline && !convexConnected}
+		class:text-white={!isOnline || !convexConnected}
+		role="status"
+		aria-live="polite"
+		aria-label={!isOnline
+			? 'Sem conexão com a internet'
+			: !convexConnected
+				? 'Reconectando ao servidor'
+				: 'Conectado'}
+	>
+		{#if !isOnline}
+			<WifiOff class="h-4 w-4" />
+			<span class="text-sm font-medium">Sem conexão</span>
+		{:else if !convexConnected}
+			<AlertCircle class="h-4 w-4" />
+			<span class="text-sm font-medium">Reconectando...</span>
+		{:else}
+			<Wifi class="h-4 w-4" />
+			<span class="text-sm font-medium">Conectado</span>
+		{/if}
+	</div>
+{/if}
+

apps/web/src/lib/components/chat/E2EManagementModal.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { Lock, X, RefreshCw, Shield, AlertTriangle, CheckCircle } from 'lucide-svelte';
+	import {
+		generateEncryptionKey,
+		exportKey,
+		storeEncryptionKey,
+		hasEncryptionKey,
+		removeStoredEncryptionKey
+	} from '$lib/utils/e2eEncryption';
+	import { armazenarChaveCriptografia, removerChaveCriptografia } from '$lib/stores/chatStore';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+
+	interface Props {
+		conversaId: Id<'conversas'>;
+		onClose: () => void;
+	}
+
+	let { conversaId, onClose }: Props = $props();
+
+	const client = useConvexClient();
+	const temCriptografiaE2E = useQuery(api.chat.verificarCriptografiaE2E, { conversaId });
+	const chaveAtual = useQuery(api.chat.obterChaveCriptografia, { conversaId });
+	const conversa = useQuery(api.chat.listarConversas, {});
+
+	let ativando = $state(false);
+	let regenerando = $state(false);
+	let desativando = $state(false);
+
+	// Obter informações da conversa
+	const conversaInfo = $derived(() => {
+		if (!conversa?.data || !Array.isArray(conversa.data)) return null;
+		return conversa.data.find((c: { _id: string }) => c._id === conversaId) || null;
+	});
+
+	async function ativarE2E() {
+		if (!confirm('Deseja ativar criptografia end-to-end para esta conversa?\n\nTodas as mensagens futuras serão criptografadas.')) {
+			return;
+		}
+
+		try {
+			ativando = true;
+
+			// Gerar nova chave de criptografia
+			const encryptionKey = await generateEncryptionKey();
+			const keyData = await exportKey(encryptionKey.key);
+
+			// Armazenar localmente
+			storeEncryptionKey(conversaId, keyData, encryptionKey.keyId);
+			armazenarChaveCriptografia(conversaId, encryptionKey.key);
+
+			// Compartilhar chave com outros participantes
+			await client.mutation(api.chat.compartilharChaveCriptografia, {
+				conversaId,
+				chaveCompartilhada: keyData, // Em produção, isso deveria ser criptografado com chave pública de cada participante
+				keyId: encryptionKey.keyId
+			});
+
+			alert('Criptografia E2E ativada com sucesso!');
+		} catch (error) {
+			console.error('Erro ao ativar E2E:', error);
+			alert('Erro ao ativar criptografia E2E');
+		} finally {
+			ativando = false;
+		}
+	}
+
+	async function regenerarChave() {
+		if (!confirm('Deseja regenerar a chave de criptografia?\n\nAs mensagens antigas continuarão legíveis, mas novas mensagens usarão a nova chave.')) {
+			return;
+		}
+
+		try {
+			regenerando = true;
+
+			// Gerar nova chave
+			const encryptionKey = await generateEncryptionKey();
+			const keyData = await exportKey(encryptionKey.key);
+
+			// Atualizar chave localmente
+			storeEncryptionKey(conversaId, keyData, encryptionKey.keyId);
+			armazenarChaveCriptografia(conversaId, encryptionKey.key);
+
+			// Compartilhar nova chave (desativa chaves antigas automaticamente)
+			await client.mutation(api.chat.compartilharChaveCriptografia, {
+				conversaId,
+				chaveCompartilhada: keyData,
+				keyId: encryptionKey.keyId
+			});
+
+			alert('Chave regenerada com sucesso!');
+		} catch (error) {
+			console.error('Erro ao regenerar chave:', error);
+			alert('Erro ao regenerar chave');
+		} finally {
+			regenerando = false;
+		}
+	}
+
+	async function desativarE2E() {
+		if (!confirm('Deseja desativar criptografia end-to-end para esta conversa?\n\nAs mensagens antigas continuarão criptografadas, mas novas mensagens não serão mais criptografadas.')) {
+			return;
+		}
+
+		try {
+			desativando = true;
+
+			// Remover chave localmente
+			removeStoredEncryptionKey(conversaId);
+			removerChaveCriptografia(conversaId);
+
+			// Desativar chave no servidor (marcar como inativa)
+			// Nota: Não removemos a chave do servidor, apenas a marcamos como inativa
+			// Isso permite que mensagens antigas ainda possam ser descriptografadas
+			if (chaveAtual?.data) {
+				// A mutation compartilharChaveCriptografia já desativa chaves antigas
+				// Mas precisamos de uma mutation específica para desativar completamente
+				// Por enquanto, vamos apenas remover localmente
+				alert('Criptografia E2E desativada localmente. As mensagens antigas ainda podem ser descriptografadas se você tiver a chave.');
+			}
+		} catch (error) {
+			console.error('Erro ao desativar E2E:', error);
+			alert('Erro ao desativar criptografia E2E');
+		} finally {
+			desativando = false;
+		}
+	}
+
+	function formatarData(timestamp: number): string {
+		try {
+			return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
+		} catch {
+			return 'Data inválida';
+		}
+	}
+</script>
+
+<div
+	class="modal modal-open"
+	role="dialog"
+	aria-labelledby="modal-title"
+	aria-modal="true"
+	onclick={(e) => {
+		if (e.target === e.currentTarget) onClose();
+	}}
+>
+	<div
+		class="modal-box max-w-2xl"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<h2 id="modal-title" class="flex items-center gap-2 text-xl font-bold">
+				<Shield class="text-primary h-5 w-5" />
+				Criptografia End-to-End (E2E)
+			</h2>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
+
+		<!-- Content -->
+		<div class="flex-1 space-y-6 overflow-y-auto p-6">
+			<!-- Status da Criptografia -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<div class="flex items-center gap-3">
+						{#if temCriptografiaE2E?.data}
+							<CheckCircle class="text-success h-6 w-6 shrink-0" />
+							<div class="flex-1">
+								<h3 class="card-title text-lg text-success">Criptografia E2E Ativa</h3>
+								<p class="text-sm text-base-content/70">
+									Suas mensagens estão protegidas com criptografia end-to-end
+								</p>
+							</div>
+						{:else}
+							<AlertTriangle class="text-warning h-6 w-6 shrink-0" />
+							<div class="flex-1">
+								<h3 class="card-title text-lg text-warning">Criptografia E2E Desativada</h3>
+								<p class="text-sm text-base-content/70">
+									Suas mensagens não estão criptografadas
+								</p>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<!-- Informações da Chave -->
+			{#if temCriptografiaE2E?.data && chaveAtual?.data}
+				<div class="card bg-base-200">
+					<div class="card-body">
+						<h3 class="card-title text-lg">Informações da Chave</h3>
+						<div class="space-y-2 text-sm">
+							<div class="flex justify-between">
+								<span class="text-base-content/70">ID da Chave:</span>
+								<span class="font-mono text-xs">{chaveAtual.data.keyId.substring(0, 16)}...</span>
+							</div>
+							<div class="flex justify-between">
+								<span class="text-base-content/70">Criada em:</span>
+								<span>{formatarData(chaveAtual.data.criadoEm)}</span>
+							</div>
+							<div class="flex justify-between">
+								<span class="text-base-content/70">Chave local:</span>
+								<span class="text-success">
+									{hasEncryptionKey(conversaId) ? '✓ Armazenada' : '✗ Não encontrada'}
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Informações sobre E2E -->
+			<div class="alert alert-info">
+				<Lock class="h-5 w-5" />
+				<div class="text-sm">
+					<p class="font-semibold">Como funciona a criptografia E2E?</p>
+					<ul class="mt-2 list-inside list-disc space-y-1 text-xs">
+						<li>Suas mensagens são criptografadas no seu dispositivo antes de serem enviadas</li>
+						<li>Apenas você e os participantes da conversa podem descriptografar as mensagens</li>
+						<li>O servidor não consegue ler o conteúdo das mensagens criptografadas</li>
+						<li>Mensagens antigas continuam legíveis mesmo após regenerar a chave</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Ações -->
+			<div class="flex flex-col gap-3">
+				{#if temCriptografiaE2E?.data}
+					<button
+						type="button"
+						class="btn btn-warning"
+						onclick={regenerarChave}
+						disabled={regenerando || ativando || desativando}
+					>
+						<RefreshCw class="h-4 w-4 {regenerando ? 'animate-spin' : ''}" />
+						{regenerando ? 'Regenerando...' : 'Regenerar Chave'}
+					</button>
+					<button
+						type="button"
+						class="btn btn-error"
+						onclick={desativarE2E}
+						disabled={regenerando || ativando || desativando}
+					>
+						<X class="h-4 w-4" />
+						{desativando ? 'Desativando...' : 'Desativar E2E'}
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={ativarE2E}
+						disabled={regenerando || ativando || desativando}
+					>
+						<Lock class="h-4 w-4" />
+						{ativando ? 'Ativando...' : 'Ativar Criptografia E2E'}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+

apps/web/src/lib/components/chat/NewConversationModal.svelte

@@ -1,393 +1,422 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { abrirConversa } from "$lib/stores/chatStore";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import UserAvatar from "./UserAvatar.svelte";
-  import { MessageSquare, User, Users, Video, X, Search, ChevronRight, Plus, UserX } from "lucide-svelte";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import {
+		ChevronRight,
+		MessageSquare,
+		Plus,
+		Search,
+		User,
+		Users,
+		UserX,
+		Video,
+		X
+	} from 'lucide-svelte';
+	import { abrirConversa } from '$lib/stores/chatStore';
+	import UserAvatar from './UserAvatar.svelte';
+	import UserStatusBadge from './UserStatusBadge.svelte';
 
-  interface Props {
-    onClose: () => void;
-  }
+	interface Props {
+		onClose: () => void;
+	}
 
-  let { onClose }: Props = $props();
+	const { onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const usuarios = useQuery(api.usuarios.listarParaChat, {});
-  const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
+	const client = useConvexClient();
+	const usuarios = useQuery(api.usuarios.listarParaChat, {});
+	const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
+	// Usuário atual
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  let activeTab = $state<"individual" | "grupo" | "sala_reuniao">("individual");
-  let searchQuery = $state("");
-  let selectedUsers = $state<string[]>([]);
-  let groupName = $state("");
-  let salaReuniaoName = $state("");
-  let loading = $state(false);
+	let activeTab = $state<'individual' | 'grupo' | 'sala_reuniao'>('individual');
+	let searchQuery = $state('');
+	let selectedUsers = $state<string[]>([]);
+	let groupName = $state('');
+	let salaReuniaoName = $state('');
+	let loading = $state(false);
 
-  const usuariosFiltrados = $derived(() => {
-    if (!usuarios?.data) return [];
-    
-    // Filtrar o próprio usuário
-    const meuId = authStore.usuario?._id || meuPerfil?.data?._id;
-    let lista = usuarios.data.filter((u: any) => u._id !== meuId);
-    
-    // Aplicar busca
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      lista = lista.filter((u: any) =>
-        u.nome?.toLowerCase().includes(query) ||
-        u.email?.toLowerCase().includes(query) ||
-        u.matricula?.toLowerCase().includes(query)
-      );
-    }
-    
-    // Ordenar: online primeiro, depois por nome
-    return lista.sort((a: any, b: any) => {
-      const statusOrder = { online: 0, ausente: 1, externo: 2, em_reuniao: 3, offline: 4 };
-      const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
-      const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
-      
-      if (statusA !== statusB) return statusA - statusB;
-      return (a.nome || "").localeCompare(b.nome || "");
-    });
-  });
+	let usuariosFiltrados = $derived(() => {
+		if (!usuarios?.data) return [];
 
-  function toggleUserSelection(userId: string) {
-    if (selectedUsers.includes(userId)) {
-      selectedUsers = selectedUsers.filter((id) => id !== userId);
-    } else {
-      selectedUsers = [...selectedUsers, userId];
-    }
-  }
+		// Filtrar o próprio usuário
+		const meuId = currentUser?.data?._id || meuPerfil?.data?._id;
+		let lista = usuarios.data.filter((u: any) => u._id !== meuId);
 
-  async function handleCriarIndividual(userId: string) {
-    try {
-      loading = true;
-      const conversaId = await client.mutation(api.chat.criarConversa, {
-        tipo: "individual",
-        participantes: [userId as any],
-      });
-      abrirConversa(conversaId);
-      onClose();
-    } catch (error) {
-      console.error("Erro ao criar conversa:", error);
-      alert("Erro ao criar conversa");
-    } finally {
-      loading = false;
-    }
-  }
+		// Aplicar busca
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			lista = lista.filter(
+				(u: any) =>
+					u.nome?.toLowerCase().includes(query) ||
+					u.email?.toLowerCase().includes(query) ||
+					u.matricula?.toLowerCase().includes(query)
+			);
+		}
 
-  async function handleCriarGrupo() {
-    if (selectedUsers.length < 2) {
-      alert("Selecione pelo menos 2 participantes");
-      return;
-    }
+		// Ordenar: online primeiro, depois por nome
+		return lista.sort((a: any, b: any) => {
+			const statusOrder = {
+				online: 0,
+				ausente: 1,
+				externo: 2,
+				em_reuniao: 3,
+				offline: 4
+			};
+			const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
 
-    if (!groupName.trim()) {
-      alert("Digite um nome para o grupo");
-      return;
-    }
+			if (statusA !== statusB) return statusA - statusB;
+			return (a.nome || '').localeCompare(b.nome || '');
+		});
+	});
 
-    try {
-      loading = true;
-      const conversaId = await client.mutation(api.chat.criarConversa, {
-        tipo: "grupo",
-        participantes: selectedUsers as any,
-        nome: groupName.trim(),
-      });
-      abrirConversa(conversaId);
-      onClose();
-    } catch (error: any) {
-      console.error("Erro ao criar grupo:", error);
-      const mensagem = error?.message || error?.data || "Erro desconhecido ao criar grupo";
-      alert(`Erro ao criar grupo: ${mensagem}`);
-    } finally {
-      loading = false;
-    }
-  }
+	function toggleUserSelection(userId: string) {
+		if (selectedUsers.includes(userId)) {
+			selectedUsers = selectedUsers.filter((id) => id !== userId);
+		} else {
+			selectedUsers = [...selectedUsers, userId];
+		}
+	}
 
-  async function handleCriarSalaReuniao() {
-    if (selectedUsers.length < 1) {
-      alert("Selecione pelo menos 1 participante");
-      return;
-    }
+	async function handleCriarIndividual(userId: string) {
+		try {
+			loading = true;
+			const conversaId = await client.mutation(api.chat.criarConversa, {
+				tipo: 'individual',
+				participantes: [userId as any]
+			});
+			abrirConversa(conversaId);
+			onClose();
+		} catch (error) {
+			console.error('Erro ao criar conversa:', error);
+			alert('Erro ao criar conversa');
+		} finally {
+			loading = false;
+		}
+	}
 
-    if (!salaReuniaoName.trim()) {
-      alert("Digite um nome para a sala de reunião");
-      return;
-    }
+	async function handleCriarGrupo() {
+		if (selectedUsers.length < 2) {
+			alert('Selecione pelo menos 2 participantes');
+			return;
+		}
 
-    try {
-      loading = true;
-      const conversaId = await client.mutation(api.chat.criarSalaReuniao, {
-        nome: salaReuniaoName.trim(),
-        participantes: selectedUsers as any,
-      });
-      abrirConversa(conversaId);
-      onClose();
-    } catch (error: any) {
-      console.error("Erro ao criar sala de reunião:", error);
-      const mensagem = error?.message || error?.data || "Erro desconhecido ao criar sala de reunião";
-      alert(`Erro ao criar sala de reunião: ${mensagem}`);
-    } finally {
-      loading = false;
-    }
-  }
+		if (!groupName.trim()) {
+			alert('Digite um nome para o grupo');
+			return;
+		}
+
+		try {
+			loading = true;
+			const conversaId = await client.mutation(api.chat.criarConversa, {
+				tipo: 'grupo',
+				participantes: selectedUsers as any,
+				nome: groupName.trim()
+			});
+			abrirConversa(conversaId);
+			onClose();
+		} catch (error: any) {
+			console.error('Erro ao criar grupo:', error);
+			const mensagem = error?.message || error?.data || 'Erro desconhecido ao criar grupo';
+			alert(`Erro ao criar grupo: ${mensagem}`);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleCriarSalaReuniao() {
+		if (selectedUsers.length < 1) {
+			alert('Selecione pelo menos 1 participante');
+			return;
+		}
+
+		if (!salaReuniaoName.trim()) {
+			alert('Digite um nome para a sala de reunião');
+			return;
+		}
+
+		try {
+			loading = true;
+			const conversaId = await client.mutation(api.chat.criarSalaReuniao, {
+				nome: salaReuniaoName.trim(),
+				participantes: selectedUsers as any
+			});
+			abrirConversa(conversaId);
+			onClose();
+		} catch (error: any) {
+			console.error('Erro ao criar sala de reunião:', error);
+			const mensagem =
+				error?.message || error?.data || 'Erro desconhecido ao criar sala de reunião';
+			alert(`Erro ao criar sala de reunião: ${mensagem}`);
+		} finally {
+			loading = false;
+		}
+	}
 </script>
 
 <dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
-  <div class="modal-box max-w-2xl max-h-[85vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
-    <!-- Header -->
-    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-      <h2 class="text-2xl font-bold flex items-center gap-2">
-        <MessageSquare class="w-6 h-6 text-primary" />
-        Nova Conversa
-      </h2>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+	<div
+		class="modal-box flex max-h-[85vh] max-w-2xl flex-col p-0"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<h2 class="flex items-center gap-2 text-2xl font-bold">
+				<MessageSquare class="text-primary h-6 w-6" />
+				Nova Conversa
+			</h2>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Tabs melhoradas -->
-    <div class="tabs tabs-boxed p-4 bg-base-200/50">
-      <button
-        type="button"
-        class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "individual" 
-            ? "tab-active bg-primary text-primary-content font-semibold" 
-            : "hover:bg-base-300"
-        }`}
-        onclick={() => {
-          activeTab = "individual";
-          selectedUsers = [];
-          searchQuery = "";
-        }}
-      >
-        <User class="w-4 h-4" />
-        Individual
-      </button>
-      <button
-        type="button"
-        class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "grupo" 
-            ? "tab-active bg-primary text-primary-content font-semibold" 
-            : "hover:bg-base-300"
-        }`}
-        onclick={() => {
-          activeTab = "grupo";
-          selectedUsers = [];
-          searchQuery = "";
-        }}
-      >
-        <Users class="w-4 h-4" />
-        Grupo
-      </button>
-      <button
-        type="button"
-        class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "sala_reuniao" 
-            ? "tab-active bg-primary text-primary-content font-semibold" 
-            : "hover:bg-base-300"
-        }`}
-        onclick={() => {
-          activeTab = "sala_reuniao";
-          selectedUsers = [];
-          searchQuery = "";
-        }}
-      >
-        <Video class="w-4 h-4" />
-        Sala de Reunião
-      </button>
-    </div>
+		<!-- Tabs melhoradas -->
+		<div class="tabs tabs-boxed bg-base-200/50 p-4">
+			<button
+				type="button"
+				class={`tab flex items-center gap-2 transition-all duration-200 ${
+					activeTab === 'individual'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
+				}`}
+				onclick={() => {
+					activeTab = 'individual';
+					selectedUsers = [];
+					searchQuery = '';
+				}}
+			>
+				<User class="h-4 w-4" />
+				Individual
+			</button>
+			<button
+				type="button"
+				class={`tab flex items-center gap-2 transition-all duration-200 ${
+					activeTab === 'grupo'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
+				}`}
+				onclick={() => {
+					activeTab = 'grupo';
+					selectedUsers = [];
+					searchQuery = '';
+				}}
+			>
+				<Users class="h-4 w-4" />
+				Grupo
+			</button>
+			<button
+				type="button"
+				class={`tab flex items-center gap-2 transition-all duration-200 ${
+					activeTab === 'sala_reuniao'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
+				}`}
+				onclick={() => {
+					activeTab = 'sala_reuniao';
+					selectedUsers = [];
+					searchQuery = '';
+				}}
+			>
+				<Video class="h-4 w-4" />
+				Sala de Reunião
+			</button>
+		</div>
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto px-6 py-4">
-      {#if activeTab === "grupo"}
-        <!-- Criar Grupo -->
-        <div class="mb-4">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">Nome do Grupo</span>
-          </label>
-          <input
-            type="text"
-            placeholder="Digite o nome do grupo..."
-            class="input input-bordered w-full focus:input-primary transition-colors"
-            bind:value={groupName}
-            maxlength="50"
-          />
-        </div>
+		<!-- Content -->
+		<div class="flex-1 overflow-y-auto px-6 py-4">
+			{#if activeTab === 'grupo'}
+				<!-- Criar Grupo -->
+				<div class="mb-4">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">Nome do Grupo</span>
+					</label>
+					<input
+						type="text"
+						placeholder="Digite o nome do grupo..."
+						class="input input-bordered focus:input-primary w-full transition-colors"
+						bind:value={groupName}
+						maxlength="50"
+					/>
+				</div>
 
-        <div class="mb-3">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">
-              Participantes {selectedUsers.length > 0 ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})` : ""}
-            </span>
-          </label>
-        </div>
-      {:else if activeTab === "sala_reuniao"}
-        <!-- Criar Sala de Reunião -->
-        <div class="mb-4">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">Nome da Sala de Reunião</span>
-            <span class="label-text-alt text-primary font-medium">👑 Você será o administrador</span>
-          </label>
-          <input
-            type="text"
-            placeholder="Digite o nome da sala de reunião..."
-            class="input input-bordered w-full focus:input-primary transition-colors"
-            bind:value={salaReuniaoName}
-            maxlength="50"
-          />
-        </div>
+				<div class="mb-3">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">
+							Participantes {selectedUsers.length > 0
+								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
+								: ''}
+						</span>
+					</label>
+				</div>
+			{:else if activeTab === 'sala_reuniao'}
+				<!-- Criar Sala de Reunião -->
+				<div class="mb-4">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">Nome da Sala de Reunião</span>
+						<span class="label-text-alt text-primary font-medium">👑 Você será o administrador</span
+						>
+					</label>
+					<input
+						type="text"
+						placeholder="Digite o nome da sala de reunião..."
+						class="input input-bordered focus:input-primary w-full transition-colors"
+						bind:value={salaReuniaoName}
+						maxlength="50"
+					/>
+				</div>
 
-        <div class="mb-3">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">
-              Participantes {selectedUsers.length > 0 ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})` : ""}
-            </span>
-          </label>
-        </div>
-      {/if}
+				<div class="mb-3">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">
+							Participantes {selectedUsers.length > 0
+								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
+								: ''}
+						</span>
+					</label>
+				</div>
+			{/if}
 
-      <!-- Search melhorado -->
-      <div class="mb-4 relative">
-        <input
-          type="text"
-          placeholder="Buscar usuários por nome, email ou matrícula..."
-          class="input input-bordered w-full pl-10 focus:input-primary transition-colors"
-          bind:value={searchQuery}
-        />
-        <Search class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40" />
-      </div>
+			<!-- Search melhorado -->
+			<div class="relative mb-4">
+				<input
+					type="text"
+					placeholder="Buscar usuários por nome, email ou matrícula..."
+					class="input input-bordered focus:input-primary w-full pl-10 transition-colors"
+					bind:value={searchQuery}
+				/>
+				<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
+			</div>
 
-      <!-- Lista de usuários -->
-      <div class="space-y-2">
-        {#if usuarios?.data && usuariosFiltrados().length > 0}
-          {#each usuariosFiltrados() as usuario (usuario._id)}
-            {@const isSelected = selectedUsers.includes(usuario._id)}
-            <button
-              type="button"
-              class={`w-full text-left px-4 py-3 rounded-xl border-2 transition-all duration-200 flex items-center gap-3 ${
-                isSelected
-                  ? "border-primary bg-primary/10 shadow-md scale-[1.02]"
-                  : "border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm"
-              } ${loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
-              onclick={() => {
-                if (loading) return;
-                if (activeTab === "individual") {
-                  handleCriarIndividual(usuario._id);
-                } else {
-                  toggleUserSelection(usuario._id);
-                }
-              }}
-              disabled={loading}
-            >
-              <!-- Avatar -->
-              <div class="relative flex-shrink-0">
-                <UserAvatar 
-                  avatar={usuario.avatar}
-                  fotoPerfilUrl={usuario.fotoPerfilUrl}
-                  nome={usuario.nome}
-                  size="md"
-                />
-                <div class="absolute -bottom-1 -right-1">
-                  <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
-                </div>
-              </div>
+			<!-- Lista de usuários -->
+			<div class="space-y-2">
+				{#if usuarios?.data && usuariosFiltrados().length > 0}
+					{#each usuariosFiltrados() as usuario (usuario._id)}
+						{@const isSelected = selectedUsers.includes(usuario._id)}
+						<button
+							type="button"
+							class={`flex w-full items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition-all duration-200 ${
+								isSelected
+									? 'border-primary bg-primary/10 scale-[1.02] shadow-md'
+									: 'border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm'
+							} ${loading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+							onclick={() => {
+								if (loading) return;
+								if (activeTab === 'individual') {
+									handleCriarIndividual(usuario._id);
+								} else {
+									toggleUserSelection(usuario._id);
+								}
+							}}
+							disabled={loading}
+						>
+							<!-- Avatar -->
+							<div class="relative shrink-0">
+								<UserAvatar
+									avatar={usuario.avatar}
+									fotoPerfilUrl={usuario.fotoPerfilUrl}
+									nome={usuario.nome}
+									size="md"
+								/>
+								<div class="absolute -right-1 -bottom-1">
+									<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
+								</div>
+							</div>
 
-              <!-- Info -->
-              <div class="flex-1 min-w-0">
-                <p class="font-semibold text-base-content truncate">{usuario.nome}</p>
-                <p class="text-sm text-base-content/60 truncate">
-                  {usuario.setor || usuario.email || usuario.matricula || "Sem informações"}
-                </p>
-              </div>
+							<!-- Info -->
+							<div class="min-w-0 flex-1">
+								<p class="text-base-content truncate font-semibold">
+									{usuario.nome}
+								</p>
+								<p class="text-base-content/60 truncate text-sm">
+									{usuario.setor || usuario.email || usuario.matricula || 'Sem informações'}
+								</p>
+							</div>
 
-              <!-- Checkbox melhorado (para grupo e sala de reunião) -->
-              {#if activeTab === "grupo" || activeTab === "sala_reuniao"}
-                <div class="flex-shrink-0">
-                  <input
-                    type="checkbox"
-                    class="checkbox checkbox-primary checkbox-lg"
-                    checked={isSelected}
-                    readonly
-                  />
-                </div>
-              {:else}
-                <!-- Ícone de seta para individual -->
-                <ChevronRight class="w-5 h-5 text-base-content/40" />
-              {/if}
-            </button>
-          {/each}
-        {:else if !usuarios?.data}
-          <div class="flex flex-col items-center justify-center py-12">
-            <span class="loading loading-spinner loading-lg text-primary"></span>
-            <p class="mt-4 text-base-content/60">Carregando usuários...</p>
-          </div>
-        {:else}
-          <div class="flex flex-col items-center justify-center py-12 text-center">
-            <UserX class="w-16 h-16 text-base-content/30 mb-4" />
-            <p class="text-base-content/70 font-medium">
-              {searchQuery.trim() ? "Nenhum usuário encontrado" : "Nenhum usuário disponível"}
-            </p>
-            {#if searchQuery.trim()}
-              <p class="text-sm text-base-content/50 mt-2">Tente buscar por nome, email ou matrícula</p>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
+							<!-- Checkbox melhorado (para grupo e sala de reunião) -->
+							{#if activeTab === 'grupo' || activeTab === 'sala_reuniao'}
+								<div class="shrink-0">
+									<input
+										type="checkbox"
+										class="checkbox checkbox-primary checkbox-lg"
+										checked={isSelected}
+										readonly
+									/>
+								</div>
+							{:else}
+								<!-- Ícone de seta para individual -->
+								<ChevronRight class="text-base-content/40 h-5 w-5" />
+							{/if}
+						</button>
+					{/each}
+				{:else if !usuarios?.data}
+					<div class="flex flex-col items-center justify-center py-12">
+						<span class="loading loading-spinner loading-lg text-primary"></span>
+						<p class="text-base-content/60 mt-4">Carregando usuários...</p>
+					</div>
+				{:else}
+					<div class="flex flex-col items-center justify-center py-12 text-center">
+						<UserX class="text-base-content/30 mb-4 h-16 w-16" />
+						<p class="text-base-content/70 font-medium">
+							{searchQuery.trim() ? 'Nenhum usuário encontrado' : 'Nenhum usuário disponível'}
+						</p>
+						{#if searchQuery.trim()}
+							<p class="text-base-content/50 mt-2 text-sm">
+								Tente buscar por nome, email ou matrícula
+							</p>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
 
-    <!-- Footer (para grupo e sala de reunião) -->
-    {#if activeTab === "grupo"}
-      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
-        <button
-          type="button"
-          class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
-          onclick={handleCriarGrupo}
-          disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
-        >
-          {#if loading}
-            <span class="loading loading-spinner"></span>
-            Criando grupo...
-          {:else}
-            <Plus class="w-5 h-5" />
-            Criar Grupo
-          {/if}
-        </button>
-        {#if selectedUsers.length < 2 && activeTab === "grupo"}
-          <p class="text-xs text-base-content/50 text-center mt-2">Selecione pelo menos 2 participantes</p>
-        {/if}
-      </div>
-    {:else if activeTab === "sala_reuniao"}
-      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
-        <button
-          type="button"
-          class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
-          onclick={handleCriarSalaReuniao}
-          disabled={loading || selectedUsers.length < 1 || !salaReuniaoName.trim()}
-        >
-          {#if loading}
-            <span class="loading loading-spinner"></span>
-            Criando sala...
-          {:else}
-            <Plus class="w-5 h-5" />
-            Criar Sala de Reunião
-          {/if}
-        </button>
-        {#if selectedUsers.length < 1 && activeTab === "sala_reuniao"}
-          <p class="text-xs text-base-content/50 text-center mt-2">Selecione pelo menos 1 participante</p>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+		<!-- Footer (para grupo e sala de reunião) -->
+		{#if activeTab === 'grupo'}
+			<div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
+				<button
+					type="button"
+					class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
+					onclick={handleCriarGrupo}
+					disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
+				>
+					{#if loading}
+						<span class="loading loading-spinner"></span>
+						Criando grupo...
+					{:else}
+						<Plus class="h-5 w-5" />
+						Criar Grupo
+					{/if}
+				</button>
+				{#if selectedUsers.length < 2 && activeTab === 'grupo'}
+					<p class="text-base-content/50 mt-2 text-center text-xs">
+						Selecione pelo menos 2 participantes
+					</p>
+				{/if}
+			</div>
+		{:else if activeTab === 'sala_reuniao'}
+			<div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
+				<button
+					type="button"
+					class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
+					onclick={handleCriarSalaReuniao}
+					disabled={loading || selectedUsers.length < 1 || !salaReuniaoName.trim()}
+				>
+					{#if loading}
+						<span class="loading loading-spinner"></span>
+						Criando sala...
+					{:else}
+						<Plus class="h-5 w-5" />
+						Criar Sala de Reunião
+					{/if}
+				</button>
+				{#if selectedUsers.length < 1 && activeTab === 'sala_reuniao'}
+					<p class="text-base-content/50 mt-2 text-center text-xs">
+						Selecione pelo menos 1 participante
+					</p>
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
-

apps/web/src/lib/components/chat/PresenceManager.svelte

@@ -1,90 +1,169 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { onMount } from "svelte";
-  import { authStore } from "$lib/stores/auth.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { onMount } from 'svelte';
 
-  const client = useConvexClient();
-  
-  // Token é passado automaticamente via interceptadores em +layout.svelte
+	const client = useConvexClient();
 
-  let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
-  let inactivityTimeout: ReturnType<typeof setTimeout> | null = null;
-  let lastActivity = Date.now();
+	// Verificar se o usuário está autenticado antes de gerenciar presença
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
+	let usuarioAutenticado = $derived(currentUser?.data !== null && currentUser?.data !== undefined);
 
-  // Detectar atividade do usuário
-  function handleActivity() {
-    lastActivity = Date.now();
-    
-    // Limpar timeout de inatividade anterior
-    if (inactivityTimeout) {
-      clearTimeout(inactivityTimeout);
-    }
+	// Token é passado automaticamente via interceptadores em +layout.svelte
 
-    // Configurar novo timeout (5 minutos)
-    inactivityTimeout = setTimeout(() => {
-      client.mutation(api.chat.atualizarStatusPresenca, { status: "ausente" });
-    }, 5 * 60 * 1000);
-  }
+	let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+	let inactivityTimeout: ReturnType<typeof setTimeout> | null = null;
+	let lastActivity = Date.now();
+	let lastStatusUpdate = 0;
+	let pendingStatusUpdate: ReturnType<typeof setTimeout> | null = null;
+	const STATUS_UPDATE_THROTTLE = 5000; // 5 segundos entre atualizações
 
-  onMount(() => {
-    // Configurar como online ao montar
-    client.mutation(api.chat.atualizarStatusPresenca, { status: "online" });
+	// Função auxiliar para atualizar status com throttle e tratamento de erro
+	async function atualizarStatusPresencaSeguro(
+		status: 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao'
+	) {
+		if (!usuarioAutenticado) return;
 
-    // Heartbeat a cada 30 segundos
-    heartbeatInterval = setInterval(() => {
-      const timeSinceLastActivity = Date.now() - lastActivity;
-      
-      // Se houve atividade nos últimos 5 minutos, manter online
-      if (timeSinceLastActivity < 5 * 60 * 1000) {
-        client.mutation(api.chat.atualizarStatusPresenca, { status: "online" });
-      }
-    }, 30 * 1000);
+		const now = Date.now();
+		// Throttle: só atualizar se passou tempo suficiente desde a última atualização
+		if (now - lastStatusUpdate < STATUS_UPDATE_THROTTLE) {
+			// Cancelar atualização pendente se houver
+			if (pendingStatusUpdate) {
+				clearTimeout(pendingStatusUpdate);
+			}
+			// Agendar atualização para depois do throttle
+			pendingStatusUpdate = setTimeout(
+				() => {
+					atualizarStatusPresencaSeguro(status);
+				},
+				STATUS_UPDATE_THROTTLE - (now - lastStatusUpdate)
+			);
+			return;
+		}
 
-    // Listeners para detectar atividade
-    const events = ["mousedown", "keydown", "scroll", "touchstart"];
-    events.forEach((event) => {
-      window.addEventListener(event, handleActivity);
-    });
+		// Limpar atualização pendente se houver
+		if (pendingStatusUpdate) {
+			clearTimeout(pendingStatusUpdate);
+			pendingStatusUpdate = null;
+		}
 
-    // Configurar timeout inicial de inatividade
-    handleActivity();
+		lastStatusUpdate = now;
 
-    // Detectar quando a aba fica inativa/ativa
-    function handleVisibilityChange() {
-      if (document.hidden) {
-        // Aba ficou inativa
-        client.mutation(api.chat.atualizarStatusPresenca, { status: "ausente" });
-      } else {
-        // Aba ficou ativa
-        client.mutation(api.chat.atualizarStatusPresenca, { status: "online" });
-        handleActivity();
-      }
-    }
+		try {
+			await client.mutation(api.chat.atualizarStatusPresenca, { status });
+		} catch (error) {
+			// Silenciar erros de timeout - não são críticos para a funcionalidade
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			const isTimeout = errorMessage.includes('timed out') || errorMessage.includes('timeout');
+			if (!isTimeout) {
+				console.error('Erro ao atualizar status de presença:', error);
+			}
+		}
+	}
 
-    document.addEventListener("visibilitychange", handleVisibilityChange);
+	// Detectar atividade do usuário
+	function handleActivity() {
+		if (!usuarioAutenticado) return;
 
-    // Cleanup
-    return () => {
-      // Marcar como offline ao desmontar
-      client.mutation(api.chat.atualizarStatusPresenca, { status: "offline" });
+		lastActivity = Date.now();
 
-      if (heartbeatInterval) {
-        clearInterval(heartbeatInterval);
-      }
+		// Limpar timeout de inatividade anterior
+		if (inactivityTimeout) {
+			clearTimeout(inactivityTimeout);
+		}
 
-      if (inactivityTimeout) {
-        clearTimeout(inactivityTimeout);
-      }
+		// Configurar novo timeout (5 minutos)
+		inactivityTimeout = setTimeout(
+			() => {
+				if (usuarioAutenticado) {
+					atualizarStatusPresencaSeguro('ausente');
+				}
+			},
+			5 * 60 * 1000
+		);
+	}
 
-      events.forEach((event) => {
-        window.removeEventListener(event, handleActivity);
-      });
+	onMount(() => {
+		// Só configurar presença se usuário estiver autenticado
+		if (!usuarioAutenticado) return;
 
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  });
+		// Configurar como online ao montar (apenas se autenticado)
+		atualizarStatusPresencaSeguro('online');
+
+		// Heartbeat a cada 30 segundos (apenas se autenticado)
+		heartbeatInterval = setInterval(() => {
+			if (!usuarioAutenticado) {
+				if (heartbeatInterval) {
+					clearInterval(heartbeatInterval);
+					heartbeatInterval = null;
+				}
+				return;
+			}
+
+			const timeSinceLastActivity = Date.now() - lastActivity;
+
+			// Se houve atividade nos últimos 5 minutos, manter online
+			if (timeSinceLastActivity < 5 * 60 * 1000) {
+				atualizarStatusPresencaSeguro('online');
+			}
+		}, 30 * 1000);
+
+		// Listeners para detectar atividade
+		const events = ['mousedown', 'keydown', 'scroll', 'touchstart'];
+		events.forEach((event) => {
+			window.addEventListener(event, handleActivity);
+		});
+
+		// Configurar timeout inicial de inatividade
+		if (usuarioAutenticado) {
+			handleActivity();
+		}
+
+		// Detectar quando a aba fica inativa/ativa
+		function handleVisibilityChange() {
+			if (!usuarioAutenticado) return;
+
+			if (document.hidden) {
+				// Aba ficou inativa
+				atualizarStatusPresencaSeguro('ausente');
+			} else {
+				// Aba ficou ativa
+				atualizarStatusPresencaSeguro('online');
+				handleActivity();
+			}
+		}
+
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		// Cleanup
+		return () => {
+			// Limpar atualização pendente
+			if (pendingStatusUpdate) {
+				clearTimeout(pendingStatusUpdate);
+				pendingStatusUpdate = null;
+			}
+
+			// Marcar como offline ao desmontar (apenas se autenticado)
+			if (usuarioAutenticado) {
+				atualizarStatusPresencaSeguro('offline');
+			}
+
+			if (heartbeatInterval) {
+				clearInterval(heartbeatInterval);
+			}
+
+			if (inactivityTimeout) {
+				clearTimeout(inactivityTimeout);
+			}
+
+			events.forEach((event) => {
+				window.removeEventListener(event, handleActivity);
+			});
+
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	});
 </script>
 
 <!-- Componente invisível - apenas lógica -->
-

apps/web/src/lib/components/chat/SalaReuniaoManager.svelte

@@ -1,431 +1,435 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import UserAvatar from "./UserAvatar.svelte";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import { X, Users, UserPlus, ArrowUp, ArrowDown, Trash2, Search } from "lucide-svelte";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { ArrowDown, ArrowUp, Search, Trash2, UserPlus, Users, X } from 'lucide-svelte';
+	import UserAvatar from './UserAvatar.svelte';
+	import UserStatusBadge from './UserStatusBadge.svelte';
 
-  interface Props {
-    conversaId: Id<"conversas">;
-    isAdmin: boolean;
-    onClose: () => void;
-  }
+	interface Props {
+		conversaId: Id<'conversas'>;
+		isAdmin: boolean;
+		onClose: () => void;
+	}
 
-  let { conversaId, isAdmin, onClose }: Props = $props();
+	const { conversaId, isAdmin, onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const conversas = useQuery(api.chat.listarConversas, {});
-  const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
+	const client = useConvexClient();
+	const conversas = useQuery(api.chat.listarConversas, {});
+	const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
 
-  let activeTab = $state<"participantes" | "adicionar">("participantes");
-  let searchQuery = $state("");
-  let loading = $state<string | null>(null);
-  let error = $state<string | null>(null);
+	let activeTab = $state<'participantes' | 'adicionar'>('participantes');
+	let searchQuery = $state('');
+	let loading = $state<string | null>(null);
+	let error = $state<string | null>(null);
 
-  const conversa = $derived(() => {
-    if (!conversas?.data) return null;
-    return conversas.data.find((c: any) => c._id === conversaId);
-  });
+	let conversa = $derived(() => {
+		if (!conversas?.data) return null;
+		return conversas.data.find((c: any) => c._id === conversaId);
+	});
 
-  const todosUsuarios = $derived(() => {
-    return todosUsuariosQuery?.data || [];
-  });
+	let todosUsuarios = $derived(() => {
+		return todosUsuariosQuery?.data || [];
+	});
 
-  const participantes = $derived(() => {
-    try {
-      const conv = conversa();
-      const usuarios = todosUsuarios();
-      if (!conv || !usuarios || usuarios.length === 0) return [];
-      
-      const participantesInfo = conv.participantesInfo || [];
-      if (!Array.isArray(participantesInfo) || participantesInfo.length === 0) return [];
-      
-      return participantesInfo
-        .map((p: any) => {
-          try {
-            // p pode ser um objeto com _id ou apenas um ID
-            const participanteId = p?._id || p;
-            if (!participanteId) return null;
-            
-            const usuario = usuarios.find((u: any) => {
-              try {
-                return String(u?._id) === String(participanteId);
-              } catch {
-                return false;
-              }
-            });
-            if (!usuario) return null;
-            
-            // Combinar dados do usuário com dados do participante (se p for objeto)
-            return {
-              ...usuario,
-              ...(typeof p === 'object' && p !== null && p !== undefined ? p : {}),
-              // Garantir que _id existe e priorizar o do usuario
-              _id: usuario._id
-            };
-          } catch (err) {
-            console.error("Erro ao processar participante:", err, p);
-            return null;
-          }
-        })
-        .filter((p: any) => p !== null && p._id);
-    } catch (err) {
-      console.error("Erro ao calcular participantes:", err);
-      return [];
-    }
-  });
+	let participantes = $derived(() => {
+		try {
+			const conv = conversa();
+			const usuarios = todosUsuarios();
+			if (!conv || !usuarios || usuarios.length === 0) return [];
 
-  const administradoresIds = $derived(() => {
-    return conversa()?.administradores || [];
-  });
+			const participantesInfo = conv.participantesInfo || [];
+			if (!Array.isArray(participantesInfo) || participantesInfo.length === 0) return [];
 
-  const usuariosDisponiveis = $derived(() => {
-    const usuarios = todosUsuarios();
-    if (!usuarios || usuarios.length === 0) return [];
-    const participantesIds = conversa()?.participantes || [];
-    return usuarios.filter((u: any) => !participantesIds.some((pid: any) => String(pid) === String(u._id)));
-  });
+			return participantesInfo
+				.map((p: any) => {
+					try {
+						// p pode ser um objeto com _id ou apenas um ID
+						const participanteId = p?._id || p;
+						if (!participanteId) return null;
 
-  const usuariosFiltrados = $derived(() => {
-    const disponiveis = usuariosDisponiveis();
-    if (!searchQuery.trim()) return disponiveis;
-    const query = searchQuery.toLowerCase();
-    return disponiveis.filter((u: any) =>
-      (u.nome || "").toLowerCase().includes(query) ||
-      (u.email || "").toLowerCase().includes(query) ||
-      (u.matricula || "").toLowerCase().includes(query)
-    );
-  });
+						const usuario = usuarios.find((u: any) => {
+							try {
+								return String(u?._id) === String(participanteId);
+							} catch {
+								return false;
+							}
+						});
+						if (!usuario) return null;
 
-  function isParticipanteAdmin(usuarioId: string): boolean {
-    const admins = administradoresIds();
-    return admins.some((adminId: any) => String(adminId) === String(usuarioId));
-  }
+						// Combinar dados do usuário com dados do participante (se p for objeto)
+						return {
+							...usuario,
+							...(typeof p === 'object' && p !== null && p !== undefined ? p : {}),
+							// Garantir que _id existe e priorizar o do usuario
+							_id: usuario._id
+						};
+					} catch (err) {
+						console.error('Erro ao processar participante:', err, p);
+						return null;
+					}
+				})
+				.filter((p: any) => p !== null && p._id);
+		} catch (err) {
+			console.error('Erro ao calcular participantes:', err);
+			return [];
+		}
+	});
 
-  function isCriador(usuarioId: string): boolean {
-    const criadoPor = conversa()?.criadoPor;
-    return criadoPor ? String(criadoPor) === String(usuarioId) : false;
-  }
+	let administradoresIds = $derived(() => {
+		return conversa()?.administradores || [];
+	});
 
-  async function removerParticipante(participanteId: string) {
-    if (!confirm("Tem certeza que deseja remover este participante?")) return;
+	let usuariosDisponiveis = $derived(() => {
+		const usuarios = todosUsuarios();
+		if (!usuarios || usuarios.length === 0) return [];
+		const participantesIds = conversa()?.participantes || [];
+		return usuarios.filter(
+			(u: any) => !participantesIds.some((pid: any) => String(pid) === String(u._id))
+		);
+	});
 
-    try {
-      loading = `remover-${participanteId}`;
-      error = null;
-      const resultado = await client.mutation(api.chat.removerParticipanteSala, {
-        conversaId,
-        participanteId: participanteId as any,
-      });
+	let usuariosFiltrados = $derived(() => {
+		const disponiveis = usuariosDisponiveis();
+		if (!searchQuery.trim()) return disponiveis;
+		const query = searchQuery.toLowerCase();
+		return disponiveis.filter(
+			(u: any) =>
+				(u.nome || '').toLowerCase().includes(query) ||
+				(u.email || '').toLowerCase().includes(query) ||
+				(u.matricula || '').toLowerCase().includes(query)
+		);
+	});
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao remover participante";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao remover participante";
-    } finally {
-      loading = null;
-    }
-  }
+	function isParticipanteAdmin(usuarioId: string): boolean {
+		const admins = administradoresIds();
+		return admins.some((adminId: any) => String(adminId) === String(usuarioId));
+	}
 
-  async function promoverAdmin(participanteId: string) {
-    if (!confirm("Promover este participante a administrador?")) return;
+	function isCriador(usuarioId: string): boolean {
+		const criadoPor = conversa()?.criadoPor;
+		return criadoPor ? String(criadoPor) === String(usuarioId) : false;
+	}
 
-    try {
-      loading = `promover-${participanteId}`;
-      error = null;
-      const resultado = await client.mutation(api.chat.promoverAdministrador, {
-        conversaId,
-        participanteId: participanteId as any,
-      });
+	async function removerParticipante(participanteId: string) {
+		if (!confirm('Tem certeza que deseja remover este participante?')) return;
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao promover administrador";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao promover administrador";
-    } finally {
-      loading = null;
-    }
-  }
+		try {
+			loading = `remover-${participanteId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.removerParticipanteSala, {
+				conversaId,
+				participanteId: participanteId as any
+			});
 
-  async function rebaixarAdmin(participanteId: string) {
-    if (!confirm("Rebaixar este administrador a participante?")) return;
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao remover participante';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao remover participante';
+		} finally {
+			loading = null;
+		}
+	}
 
-    try {
-      loading = `rebaixar-${participanteId}`;
-      error = null;
-      const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
-        conversaId,
-        participanteId: participanteId as any,
-      });
+	async function promoverAdmin(participanteId: string) {
+		if (!confirm('Promover este participante a administrador?')) return;
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao rebaixar administrador";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao rebaixar administrador";
-    } finally {
-      loading = null;
-    }
-  }
+		try {
+			loading = `promover-${participanteId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.promoverAdministrador, {
+				conversaId,
+				participanteId: participanteId as any
+			});
 
-  async function adicionarParticipante(usuarioId: string) {
-    try {
-      loading = `adicionar-${usuarioId}`;
-      error = null;
-      const resultado = await client.mutation(api.chat.adicionarParticipanteSala, {
-        conversaId,
-        participanteId: usuarioId as any,
-      });
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao promover administrador';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao promover administrador';
+		} finally {
+			loading = null;
+		}
+	}
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao adicionar participante";
-      } else {
-        searchQuery = "";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao adicionar participante";
-    } finally {
-      loading = null;
-    }
-  }
+	async function rebaixarAdmin(participanteId: string) {
+		if (!confirm('Rebaixar este administrador a participante?')) return;
+
+		try {
+			loading = `rebaixar-${participanteId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
+				conversaId,
+				participanteId: participanteId as any
+			});
+
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao rebaixar administrador';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao rebaixar administrador';
+		} finally {
+			loading = null;
+		}
+	}
+
+	async function adicionarParticipante(usuarioId: string) {
+		try {
+			loading = `adicionar-${usuarioId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.adicionarParticipanteSala, {
+				conversaId,
+				participanteId: usuarioId as any
+			});
+
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao adicionar participante';
+			} else {
+				searchQuery = '';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao adicionar participante';
+		} finally {
+			loading = null;
+		}
+	}
 </script>
 
 <dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
-  <div class="modal-box max-w-2xl max-h-[80vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
-    <!-- Header -->
-    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-      <div>
-        <h2 class="text-xl font-semibold flex items-center gap-2">
-          <Users class="w-5 h-5 text-primary" />
-          Gerenciar Sala de Reunião
-        </h2>
-        <p class="text-sm text-base-content/60">{conversa()?.nome || "Sem nome"}</p>
-      </div>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+	<div
+		class="modal-box flex max-h-[80vh] max-w-2xl flex-col p-0"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<div>
+				<h2 class="flex items-center gap-2 text-xl font-semibold">
+					<Users class="text-primary h-5 w-5" />
+					Gerenciar Sala de Reunião
+				</h2>
+				<p class="text-base-content/60 text-sm">
+					{conversa()?.nome || 'Sem nome'}
+				</p>
+			</div>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Tabs -->
-    {#if isAdmin}
-      <div class="tabs tabs-boxed p-4">
-        <button
-          type="button"
-          class={`tab flex items-center gap-2 ${activeTab === "participantes" ? "tab-active" : ""}`}
-          onclick={() => (activeTab = "participantes")}
-        >
-          <Users class="w-4 h-4" />
-          Participantes
-        </button>
-        <button
-          type="button"
-          class={`tab flex items-center gap-2 ${activeTab === "adicionar" ? "tab-active" : ""}`}
-          onclick={() => (activeTab = "adicionar")}
-        >
-          <UserPlus class="w-4 h-4" />
-          Adicionar Participante
-        </button>
-      </div>
-    {/if}
+		<!-- Tabs -->
+		{#if isAdmin}
+			<div class="tabs tabs-boxed p-4">
+				<button
+					type="button"
+					class={`tab flex items-center gap-2 ${activeTab === 'participantes' ? 'tab-active' : ''}`}
+					onclick={() => (activeTab = 'participantes')}
+				>
+					<Users class="h-4 w-4" />
+					Participantes
+				</button>
+				<button
+					type="button"
+					class={`tab flex items-center gap-2 ${activeTab === 'adicionar' ? 'tab-active' : ''}`}
+					onclick={() => (activeTab = 'adicionar')}
+				>
+					<UserPlus class="h-4 w-4" />
+					Adicionar Participante
+				</button>
+			</div>
+		{/if}
 
-    <!-- Error Message -->
-    {#if error}
-      <div class="mx-6 mt-2 alert alert-error">
-        <span>{error}</span>
-        <button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
-          <X class="w-4 h-4" />
-        </button>
-      </div>
-    {/if}
+		<!-- Error Message -->
+		{#if error}
+			<div class="alert alert-error mx-6 mt-2">
+				<span>{error}</span>
+				<button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
+					<X class="h-4 w-4" />
+				</button>
+			</div>
+		{/if}
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto px-6">
-      {#if !conversas?.data}
-        <!-- Loading conversas -->
-        <div class="flex items-center justify-center py-8">
-          <span class="loading loading-spinner loading-lg"></span>
-          <span class="ml-2 text-sm text-base-content/60">Carregando conversa...</span>
-        </div>
-      {:else if !todosUsuariosQuery?.data}
-        <!-- Loading usuários -->
-        <div class="flex items-center justify-center py-8">
-          <span class="loading loading-spinner loading-lg"></span>
-          <span class="ml-2 text-sm text-base-content/60">Carregando usuários...</span>
-        </div>
-      {:else if activeTab === "participantes"}
-        <!-- Lista de Participantes -->
-        <div class="space-y-2 py-2">
-          {#if participantes().length > 0}
-            {#each participantes() as participante (String(participante._id))}
-              {@const participanteId = String(participante._id)}
-              {@const ehAdmin = isParticipanteAdmin(participanteId)}
-              {@const ehCriador = isCriador(participanteId)}
-              {@const isLoading = loading?.includes(participanteId)}
-              <div
-                class="flex items-center gap-3 p-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors"
-              >
-                <!-- Avatar -->
-                <div class="relative flex-shrink-0">
-                  <UserAvatar
-                    avatar={participante.avatar}
-                    fotoPerfilUrl={participante.fotoPerfilUrl || participante.fotoPerfil}
-                    nome={participante.nome || "Usuário"}
-                    size="sm"
-                  />
-                  <div class="absolute bottom-0 right-0">
-                    <UserStatusBadge status={participante.statusPresenca || "offline"} size="sm" />
-                  </div>
-                </div>
+		<!-- Content -->
+		<div class="flex-1 overflow-y-auto px-6">
+			{#if !conversas?.data}
+				<!-- Loading conversas -->
+				<div class="flex items-center justify-center py-8">
+					<span class="loading loading-spinner loading-lg"></span>
+					<span class="text-base-content/60 ml-2 text-sm">Carregando conversa...</span>
+				</div>
+			{:else if !todosUsuariosQuery?.data}
+				<!-- Loading usuários -->
+				<div class="flex items-center justify-center py-8">
+					<span class="loading loading-spinner loading-lg"></span>
+					<span class="text-base-content/60 ml-2 text-sm">Carregando usuários...</span>
+				</div>
+			{:else if activeTab === 'participantes'}
+				<!-- Lista de Participantes -->
+				<div class="space-y-2 py-2">
+					{#if participantes().length > 0}
+						{#each participantes() as participante (String(participante._id))}
+							{@const participanteId = String(participante._id)}
+							{@const ehAdmin = isParticipanteAdmin(participanteId)}
+							{@const ehCriador = isCriador(participanteId)}
+							{@const isLoading = loading?.includes(participanteId)}
+							<div
+								class="border-base-300 hover:bg-base-200 flex items-center gap-3 rounded-lg border p-3 transition-colors"
+							>
+								<!-- Avatar -->
+								<div class="relative shrink-0">
+									<UserAvatar
+										avatar={participante.avatar}
+										fotoPerfilUrl={participante.fotoPerfilUrl || participante.avatar}
+										nome={participante.nome || 'Usuário'}
+										size="sm"
+									/>
+									<div class="absolute right-0 bottom-0">
+										<UserStatusBadge status={participante.statusPresenca || 'offline'} size="sm" />
+									</div>
+								</div>
 
-                <!-- Info -->
-                <div class="flex-1 min-w-0">
-                  <div class="flex items-center gap-2">
-                    <p class="font-medium text-base-content truncate">{participante.nome || "Usuário"}</p>
-                    {#if ehAdmin}
-                      <span class="badge badge-primary badge-sm">Admin</span>
-                    {/if}
-                    {#if ehCriador}
-                      <span class="badge badge-secondary badge-sm">Criador</span>
-                    {/if}
-                  </div>
-                  <p class="text-sm text-base-content/60 truncate">
-                    {participante.setor || participante.email || ""}
-                  </p>
-                </div>
+								<!-- Info -->
+								<div class="min-w-0 flex-1">
+									<div class="flex items-center gap-2">
+										<p class="text-base-content truncate font-medium">
+											{participante.nome || 'Usuário'}
+										</p>
+										{#if ehAdmin}
+											<span class="badge badge-primary badge-sm">Admin</span>
+										{/if}
+										{#if ehCriador}
+											<span class="badge badge-secondary badge-sm">Criador</span>
+										{/if}
+									</div>
+									<p class="text-base-content/60 truncate text-sm">
+										{participante.setor || participante.email || ''}
+									</p>
+								</div>
 
-                <!-- Ações (apenas para admins) -->
-                {#if isAdmin && !ehCriador}
-                  <div class="flex items-center gap-1">
-                    {#if ehAdmin}
-                      <button
-                        type="button"
-                        class="btn btn-xs btn-ghost"
-                        onclick={() => rebaixarAdmin(participanteId)}
-                        disabled={isLoading}
-                        title="Rebaixar administrador"
-                      >
-                        {#if isLoading && loading?.includes("rebaixar")}
-                          <span class="loading loading-spinner loading-xs"></span>
-                        {:else}
-                          <ArrowDown class="w-4 h-4" />
-                        {/if}
-                      </button>
-                    {:else}
-                      <button
-                        type="button"
-                        class="btn btn-xs btn-ghost"
-                        onclick={() => promoverAdmin(participanteId)}
-                        disabled={isLoading}
-                        title="Promover a administrador"
-                      >
-                        {#if isLoading && loading?.includes("promover")}
-                          <span class="loading loading-spinner loading-xs"></span>
-                        {:else}
-                          <ArrowUp class="w-4 h-4" />
-                        {/if}
-                      </button>
-                    {/if}
-                    <button
-                      type="button"
-                      class="btn btn-xs btn-error btn-ghost"
-                      onclick={() => removerParticipante(participanteId)}
-                      disabled={isLoading}
-                      title="Remover participante"
-                    >
-                      {#if isLoading && loading?.includes("remover")}
-                        <span class="loading loading-spinner loading-xs"></span>
-                      {:else}
-                        <Trash2 class="w-4 h-4" />
-                      {/if}
-                    </button>
-                  </div>
-                {/if}
-              </div>
-            {/each}
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              Nenhum participante encontrado
-            </div>
-          {/if}
-        </div>
-      {:else if activeTab === "adicionar" && isAdmin}
-        <!-- Adicionar Participante -->
-        <div class="mb-4 relative">
-          <input
-            type="text"
-            placeholder="Buscar usuários..."
-            class="input input-bordered w-full pl-10"
-            bind:value={searchQuery}
-          />
-          <Search class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40" />
-        </div>
+								<!-- Ações (apenas para admins) -->
+								{#if isAdmin && !ehCriador}
+									<div class="flex items-center gap-1">
+										{#if ehAdmin}
+											<button
+												type="button"
+												class="btn btn-xs btn-ghost"
+												onclick={() => rebaixarAdmin(participanteId)}
+												disabled={isLoading}
+												title="Rebaixar administrador"
+											>
+												{#if isLoading && loading?.includes('rebaixar')}
+													<span class="loading loading-spinner loading-xs"></span>
+												{:else}
+													<ArrowDown class="h-4 w-4" />
+												{/if}
+											</button>
+										{:else}
+											<button
+												type="button"
+												class="btn btn-xs btn-ghost"
+												onclick={() => promoverAdmin(participanteId)}
+												disabled={isLoading}
+												title="Promover a administrador"
+											>
+												{#if isLoading && loading?.includes('promover')}
+													<span class="loading loading-spinner loading-xs"></span>
+												{:else}
+													<ArrowUp class="h-4 w-4" />
+												{/if}
+											</button>
+										{/if}
+										<button
+											type="button"
+											class="btn btn-xs btn-error btn-ghost"
+											onclick={() => removerParticipante(participanteId)}
+											disabled={isLoading}
+											title="Remover participante"
+										>
+											{#if isLoading && loading?.includes('remover')}
+												<span class="loading loading-spinner loading-xs"></span>
+											{:else}
+												<Trash2 class="h-4 w-4" />
+											{/if}
+										</button>
+									</div>
+								{/if}
+							</div>
+						{/each}
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">Nenhum participante encontrado</div>
+					{/if}
+				</div>
+			{:else if activeTab === 'adicionar' && isAdmin}
+				<!-- Adicionar Participante -->
+				<div class="relative mb-4">
+					<input
+						type="text"
+						placeholder="Buscar usuários..."
+						class="input input-bordered w-full pl-10"
+						bind:value={searchQuery}
+					/>
+					<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
+				</div>
 
-        <div class="space-y-2">
-          {#if usuariosFiltrados().length > 0}
-            {#each usuariosFiltrados() as usuario (String(usuario._id))}
-              {@const usuarioId = String(usuario._id)}
-              {@const isLoading = loading?.includes(usuarioId)}
-              <button
-                type="button"
-                class="w-full text-left px-4 py-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors flex items-center gap-3"
-                onclick={() => adicionarParticipante(usuarioId)}
-                disabled={isLoading}
-              >
-                <!-- Avatar -->
-                <div class="relative flex-shrink-0">
-                  <UserAvatar
-                    avatar={usuario.avatar}
-                    fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
-                    nome={usuario.nome || "Usuário"}
-                    size="sm"
-                  />
-                  <div class="absolute bottom-0 right-0">
-                    <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
-                  </div>
-                </div>
+				<div class="space-y-2">
+					{#if usuariosFiltrados().length > 0}
+						{#each usuariosFiltrados() as usuario (String(usuario._id))}
+							{@const usuarioId = String(usuario._id)}
+							{@const isLoading = loading?.includes(usuarioId)}
+							<button
+								type="button"
+								class="border-base-300 hover:bg-base-200 flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors"
+								onclick={() => adicionarParticipante(usuarioId)}
+								disabled={isLoading}
+							>
+								<!-- Avatar -->
+								<div class="relative shrink-0">
+									<UserAvatar
+										avatar={usuario.avatar}
+										fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.avatar}
+										nome={usuario.nome || 'Usuário'}
+										size="sm"
+									/>
+									<div class="absolute right-0 bottom-0">
+										<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
+									</div>
+								</div>
 
-                <!-- Info -->
-                <div class="flex-1 min-w-0">
-                  <p class="font-medium text-base-content truncate">{usuario.nome || "Usuário"}</p>
-                  <p class="text-sm text-base-content/60 truncate">
-                    {usuario.setor || usuario.email || ""}
-                  </p>
-                </div>
+								<!-- Info -->
+								<div class="min-w-0 flex-1">
+									<p class="text-base-content truncate font-medium">
+										{usuario.nome || 'Usuário'}
+									</p>
+									<p class="text-base-content/60 truncate text-sm">
+										{usuario.setor || usuario.email || ''}
+									</p>
+								</div>
 
-                <!-- Botão Adicionar -->
-                {#if isLoading}
-                  <span class="loading loading-spinner loading-sm"></span>
-                {:else}
-                  <UserPlus class="w-5 h-5 text-primary" />
-                {/if}
-              </button>
-            {/each}
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              {searchQuery.trim() ? "Nenhum usuário encontrado" : "Todos os usuários já são participantes"}
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
+								<!-- Botão Adicionar -->
+								{#if isLoading}
+									<span class="loading loading-spinner loading-sm"></span>
+								{:else}
+									<UserPlus class="text-primary h-5 w-5" />
+								{/if}
+							</button>
+						{/each}
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">
+							{searchQuery.trim()
+								? 'Nenhum usuário encontrado'
+								: 'Todos os usuários já são participantes'}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
 
-    <!-- Footer -->
-    <div class="px-6 py-4 border-t border-base-300">
-      <button type="button" class="btn btn-block" onclick={onClose}>
-        Fechar
-      </button>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+		<!-- Footer -->
+		<div class="border-base-300 border-t px-6 py-4">
+			<button type="button" class="btn btn-block" onclick={onClose}> Fechar </button>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
-

apps/web/src/lib/components/chat/ScheduleMessageModal.svelte

@@ -1,259 +1,327 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { Clock, X, Trash2 } from "lucide-svelte";
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { Clock, Trash2, X } from 'lucide-svelte';
+	import { obterCoresDoTema } from '$lib/utils/temas';
 
-  interface Props {
-    conversaId: Id<"conversas">;
-    onClose: () => void;
-  }
+	interface Props {
+		conversaId: Id<'conversas'>;
+		onClose: () => void;
+	}
 
-  let { conversaId, onClose }: Props = $props();
+	const { conversaId, onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, { conversaId });
+	const client = useConvexClient();
+	const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, {
+		conversaId
+	});
 
-  let mensagem = $state("");
-  let data = $state("");
-  let hora = $state("");
-  let loading = $state(false);
-  
-  // Rastrear mudanças nas mensagens agendadas
-  $effect(() => {
-    console.log("📅 [ScheduleModal] Mensagens agendadas atualizadas:", mensagensAgendadas?.data);
-  });
+	let mensagem = $state('');
+	let data = $state('');
+	let hora = $state('');
+	let loading = $state(false);
+	
+	// Obter cores do tema atual (reativo)
+	let coresTema = $state(obterCoresDoTema());
+	
+	// Atualizar cores quando o tema mudar
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		
+		const atualizarCores = () => {
+			coresTema = obterCoresDoTema();
+		};
+		
+		atualizarCores();
+		
+		window.addEventListener('themechange', atualizarCores);
+		
+		const observer = new MutationObserver(atualizarCores);
+		const htmlElement = document.documentElement;
+		observer.observe(htmlElement, {
+			attributes: true,
+			attributeFilter: ['data-theme']
+		});
+		
+		return () => {
+			window.removeEventListener('themechange', atualizarCores);
+			observer.disconnect();
+		};
+	});
+	
+	// Função para obter rgba da cor primária
+	function obterPrimariaRgba(alpha: number = 1) {
+		const primary = coresTema.primary;
+		if (primary.startsWith('rgba')) {
+			const match = primary.match(/rgba?\(([^)]+)\)/);
+			if (match) {
+				const values = match[1].split(',');
+				return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${alpha})`;
+			}
+		}
+		if (primary.startsWith('#')) {
+			const hex = primary.replace('#', '');
+			const r = parseInt(hex.substring(0, 2), 16);
+			const g = parseInt(hex.substring(2, 4), 16);
+			const b = parseInt(hex.substring(4, 6), 16);
+			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+		}
+		if (primary.startsWith('hsl')) {
+			return primary.replace(/\)$/, `, ${alpha})`).replace('hsl', 'hsla');
+		}
+		return `rgba(102, 126, 234, ${alpha})`;
+	}
+	
+	// Função para obter gradiente do tema
+	function obterGradienteTema() {
+		const primary = coresTema.primary;
+		return `linear-gradient(135deg, ${primary} 0%, ${primary}dd 100%)`;
+	}
 
-  // Definir data/hora mínima (agora)
-  const now = new Date();
-  const minDate = format(now, "yyyy-MM-dd");
-  const minTime = format(now, "HH:mm");
+	// Rastrear mudanças nas mensagens agendadas
+	$effect(() => {
+		console.log('📅 [ScheduleModal] Mensagens agendadas atualizadas:', mensagensAgendadas?.data);
+	});
 
-  function getPreviewText(): string {
-    if (!data || !hora) return "";
-    
-    try {
-      const dataHora = new Date(`${data}T${hora}`);
-      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
-    } catch {
-      return "";
-    }
-  }
+	// Definir data/hora mínima (agora)
+	const now = new Date();
+	const minDate = format(now, 'yyyy-MM-dd');
+	const minTime = format(now, 'HH:mm');
 
-  async function handleAgendar() {
-    if (!mensagem.trim() || !data || !hora) {
-      alert("Preencha todos os campos");
-      return;
-    }
+	function getPreviewText(): string {
+		if (!data || !hora) return '';
 
-    try {
-      loading = true;
-      const dataHora = new Date(`${data}T${hora}`);
-      
-      // Validar data futura
-      if (dataHora.getTime() <= Date.now()) {
-        alert("A data e hora devem ser futuras");
-        return;
-      }
+		try {
+			const dataHora = new Date(`${data}T${hora}`);
+			return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
+		} catch {
+			return '';
+		}
+	}
 
-      await client.mutation(api.chat.agendarMensagem, {
-        conversaId,
-        conteudo: mensagem.trim(),
-        agendadaPara: dataHora.getTime(),
-      });
+	async function handleAgendar() {
+		if (!mensagem.trim() || !data || !hora) {
+			alert('Preencha todos os campos');
+			return;
+		}
 
-      mensagem = "";
-      data = "";
-      hora = "";
-      
-      // Dar tempo para o Convex processar e recarregar a lista
-      setTimeout(() => {
-        alert("Mensagem agendada com sucesso!");
-      }, 500);
-    } catch (error) {
-      console.error("Erro ao agendar mensagem:", error);
-      alert("Erro ao agendar mensagem");
-    } finally {
-      loading = false;
-    }
-  }
+		try {
+			loading = true;
+			const dataHora = new Date(`${data}T${hora}`);
 
-  async function handleCancelar(mensagemId: string) {
-    if (!confirm("Deseja cancelar esta mensagem agendada?")) return;
+			// Validar data futura
+			if (dataHora.getTime() <= Date.now()) {
+				alert('A data e hora devem ser futuras');
+				return;
+			}
 
-    try {
-      await client.mutation(api.chat.cancelarMensagemAgendada, { mensagemId: mensagemId as any });
-    } catch (error) {
-      console.error("Erro ao cancelar mensagem:", error);
-      alert("Erro ao cancelar mensagem");
-    }
-  }
+			await client.mutation(api.chat.agendarMensagem, {
+				conversaId,
+				conteudo: mensagem.trim(),
+				agendadaPara: dataHora.getTime()
+			});
 
-  function formatarDataHora(timestamp: number): string {
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
-    } catch {
-      return "Data inválida";
-    }
-  }
+			mensagem = '';
+			data = '';
+			hora = '';
+
+			// Dar tempo para o Convex processar e recarregar a lista
+			setTimeout(() => {
+				alert('Mensagem agendada com sucesso!');
+			}, 500);
+		} catch (error) {
+			console.error('Erro ao agendar mensagem:', error);
+			alert('Erro ao agendar mensagem');
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleCancelar(mensagemId: string) {
+		if (!confirm('Deseja cancelar esta mensagem agendada?')) return;
+
+		try {
+			await client.mutation(api.chat.cancelarMensagemAgendada, {
+				mensagemId: mensagemId as any
+			});
+		} catch (error) {
+			console.error('Erro ao cancelar mensagem:', error);
+			alert('Erro ao cancelar mensagem');
+		}
+	}
+
+	function formatarDataHora(timestamp: number): string {
+		try {
+			return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
+				locale: ptBR
+			});
+		} catch {
+			return 'Data inválida';
+		}
+	}
 </script>
 
 <dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
-  <div class="modal-box max-w-2xl max-h-[90vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
-    <!-- Header -->
-    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-      <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2">
-        <Clock class="w-5 h-5 text-primary" />
-        Agendar Mensagem
-      </h2>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+	<div
+		class="modal-box flex max-h-[90vh] max-w-2xl flex-col p-0"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<h2 id="modal-title" class="flex items-center gap-2 text-xl font-bold">
+				<Clock class="text-primary h-5 w-5" />
+				Agendar Mensagem
+			</h2>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto p-6 space-y-6">
-      <!-- Formulário de Agendamento -->
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
-          
-          <div class="form-control">
-            <label class="label" for="mensagem-input">
-              <span class="label-text">Mensagem</span>
-            </label>
-            <textarea
-              id="mensagem-input"
-              class="textarea textarea-bordered h-24"
-              placeholder="Digite a mensagem..."
-              bind:value={mensagem}
-              maxlength="500"
-              aria-describedby="char-count"
-            ></textarea>
-            <div class="label">
-              <span id="char-count" class="label-text-alt">{mensagem.length}/500</span>
-            </div>
-          </div>
+		<!-- Content -->
+		<div class="flex-1 space-y-6 overflow-y-auto p-6">
+			<!-- Formulário de Agendamento -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
 
-          <div class="grid md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label" for="data-input">
-                <span class="label-text">Data</span>
-              </label>
-              <input
-                id="data-input"
-                type="date"
-                class="input input-bordered"
-                bind:value={data}
-                min={minDate}
-              />
-            </div>
+					<div class="form-control">
+						<label class="label" for="mensagem-input">
+							<span class="label-text">Mensagem</span>
+						</label>
+						<textarea
+							id="mensagem-input"
+							class="textarea textarea-bordered h-24"
+							placeholder="Digite a mensagem..."
+							bind:value={mensagem}
+							maxlength="500"
+							aria-describedby="char-count"
+						></textarea>
+						<div class="label">
+							<span id="char-count" class="label-text-alt">{mensagem.length}/500</span>
+						</div>
+					</div>
 
-            <div class="form-control">
-              <label class="label" for="hora-input">
-                <span class="label-text">Hora</span>
-              </label>
-              <input
-                id="hora-input"
-                type="time"
-                class="input input-bordered"
-                bind:value={hora}
-                min={data === minDate ? minTime : undefined}
-              />
-            </div>
-          </div>
+					<div class="grid gap-4 md:grid-cols-2">
+						<div class="form-control">
+							<label class="label" for="data-input">
+								<span class="label-text">Data</span>
+							</label>
+							<input
+								id="data-input"
+								type="date"
+								class="input input-bordered"
+								bind:value={data}
+								min={minDate}
+							/>
+						</div>
 
-          {#if getPreviewText()}
-            <div class="alert alert-info">
-              <Clock class="w-6 h-6" />
-              <span>{getPreviewText()}</span>
-            </div>
-          {/if}
+						<div class="form-control">
+							<label class="label" for="hora-input">
+								<span class="label-text">Hora</span>
+							</label>
+							<input
+								id="hora-input"
+								type="time"
+								class="input input-bordered"
+								bind:value={hora}
+								min={data === minDate ? minTime : undefined}
+							/>
+						</div>
+					</div>
 
-          <div class="card-actions justify-end">
-            <!-- Botão AGENDAR ultra moderno -->
-            <button
-              type="button"
-              class="relative px-6 py-3 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
-              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-              onclick={handleAgendar}
-              disabled={loading || !mensagem.trim() || !data || !hora}
-            >
-              <!-- Efeito de brilho no hover -->
-              <div class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"></div>
-              
-              <div class="relative z-10 flex items-center gap-2">
-                {#if loading}
-                  <span class="loading loading-spinner loading-sm"></span>
-                  <span>Agendando...</span>
-                {:else}
-                  <Clock class="w-5 h-5 group-hover:scale-110 transition-transform" />
-                  <span class="group-hover:scale-105 transition-transform">Agendar</span>
-                {/if}
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
+					{#if getPreviewText()}
+						<div class="alert alert-info">
+							<Clock class="h-6 w-6" />
+							<span>{getPreviewText()}</span>
+						</div>
+					{/if}
 
-      <!-- Lista de Mensagens Agendadas -->
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Mensagens Agendadas</h3>
-          
-          {#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
-            <div class="space-y-3">
-              {#each mensagensAgendadas.data as msg (msg._id)}
-                <div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
-                  <div class="flex-shrink-0 mt-1">
-                    <Clock class="w-5 h-5 text-primary" />
-                  </div>
-                  
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-base-content/80">
-                      {formatarDataHora(msg.agendadaPara || 0)}
-                    </p>
-                    <p class="text-sm text-base-content mt-1 line-clamp-2">
-                      {msg.conteudo}
-                    </p>
-                  </div>
+					<div class="card-actions justify-end">
+						<!-- Botão AGENDAR ultra moderno -->
+						<button
+							type="button"
+							class="group relative overflow-hidden rounded-xl px-6 py-3 font-bold text-white transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
+							style="background: {obterGradienteTema()}; box-shadow: 0 8px 24px -4px {obterPrimariaRgba(0.4)};"
+							onclick={handleAgendar}
+							disabled={loading || !mensagem.trim() || !data || !hora}
+						>
+							<!-- Efeito de brilho no hover -->
+							<div
+								class="absolute inset-0 bg-white/0 transition-colors duration-300 group-hover:bg-white/10"
+							></div>
 
-                  <!-- Botão cancelar moderno -->
-                  <button
-                    type="button"
-                    class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-                    style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
-                    onclick={() => handleCancelar(msg._id)}
-                    aria-label="Cancelar"
-                  >
-                    <div class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"></div>
-                    <Trash2 class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform" />
-                  </button>
-                </div>
-              {/each}
-            </div>
-          {:else if !mensagensAgendadas?.data}
-            <div class="flex items-center justify-center py-8">
-              <span class="loading loading-spinner loading-lg"></span>
-            </div>
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              <Clock class="w-12 h-12 mx-auto mb-2 opacity-50" />
-              <p class="text-sm">Nenhuma mensagem agendada</p>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+							<div class="relative z-10 flex items-center gap-2">
+								{#if loading}
+									<span class="loading loading-spinner loading-sm"></span>
+									<span>Agendando...</span>
+								{:else}
+									<Clock class="h-5 w-5 transition-transform group-hover:scale-110" />
+									<span class="transition-transform group-hover:scale-105">Agendar</span>
+								{/if}
+							</div>
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- Lista de Mensagens Agendadas -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<h3 class="card-title text-lg">Mensagens Agendadas</h3>
+
+					{#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
+						<div class="space-y-3">
+							{#each mensagensAgendadas.data as msg (msg._id)}
+								<div class="bg-base-100 flex items-start gap-3 rounded-lg p-3">
+									<div class="mt-1 shrink-0">
+										<Clock class="text-primary h-5 w-5" />
+									</div>
+
+									<div class="min-w-0 flex-1">
+										<p class="text-base-content/80 text-sm font-medium">
+											{formatarDataHora(msg.agendadaPara || 0)}
+										</p>
+										<p class="text-base-content mt-1 line-clamp-2 text-sm">
+											{msg.conteudo}
+										</p>
+									</div>
+
+									<!-- Botão cancelar moderno -->
+									<button
+										type="button"
+										class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
+										style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
+										onclick={() => handleCancelar(msg._id)}
+										aria-label="Cancelar"
+									>
+										<div
+											class="bg-error/0 group-hover:bg-error/20 absolute inset-0 transition-colors duration-300"
+										></div>
+										<Trash2
+											class="text-error relative z-10 h-5 w-5 transition-transform group-hover:scale-110"
+										/>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else if !mensagensAgendadas?.data}
+						<div class="flex items-center justify-center py-8">
+							<span class="loading loading-spinner loading-lg"></span>
+						</div>
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">
+							<Clock class="mx-auto mb-2 h-12 w-12 opacity-50" />
+							<p class="text-sm">Nenhuma mensagem agendada</p>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>

apps/web/src/lib/components/chat/UserAvatar.svelte

@@ -1,41 +1,99 @@
 <script lang="ts">
-  import { getAvatarUrl as generateAvatarUrl } from "$lib/utils/avatarGenerator";
-  
-  interface Props {
-    avatar?: string;
-    fotoPerfilUrl?: string | null;
-    nome: string;
-    size?: "xs" | "sm" | "md" | "lg";
-  }
+	import { User } from 'lucide-svelte';
+	import { getCachedAvatar } from '$lib/utils/avatarCache';
+	import { onMount } from 'svelte';
 
-  let { avatar, fotoPerfilUrl, nome, size = "md" }: Props = $props();
+	interface Props {
+		fotoPerfilUrl?: string | null;
+		nome: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		userId?: string; // ID do usuário para cache
+	}
 
-  const sizeClasses = {
-    xs: "w-8 h-8",
-    sm: "w-10 h-10",
-    md: "w-12 h-12",
-    lg: "w-16 h-16",
-  };
+	let { fotoPerfilUrl, nome, size = 'md', userId }: Props = $props();
 
-  function getAvatarUrl(avatarId: string): string {
-    // Usar gerador local ao invés da API externa
-    return generateAvatarUrl(avatarId);
-  }
+	let cachedAvatarUrl = $state<string | null>(null);
+	let loading = $state(true);
 
-  const avatarUrlToShow = $derived(() => {
-    if (fotoPerfilUrl) return fotoPerfilUrl;
-    if (avatar) return getAvatarUrl(avatar);
-    return getAvatarUrl(nome); // Fallback usando o nome
-  });
+	onMount(async () => {
+		if (fotoPerfilUrl) {
+			loading = true;
+			try {
+				cachedAvatarUrl = await getCachedAvatar(fotoPerfilUrl, userId);
+			} catch (error) {
+				console.warn('Erro ao carregar avatar:', error);
+				cachedAvatarUrl = null;
+			} finally {
+				loading = false;
+			}
+		} else {
+			loading = false;
+		}
+	});
+
+	// Atualizar quando fotoPerfilUrl mudar
+	$effect(() => {
+		if (fotoPerfilUrl) {
+			loading = true;
+			getCachedAvatar(fotoPerfilUrl, userId)
+				.then((url) => {
+					cachedAvatarUrl = url;
+					loading = false;
+				})
+				.catch((error) => {
+					console.warn('Erro ao carregar avatar:', error);
+					cachedAvatarUrl = null;
+					loading = false;
+				});
+		} else {
+			cachedAvatarUrl = null;
+			loading = false;
+		}
+	});
+
+	const sizeClasses = {
+		xs: 'w-8 h-8',
+		sm: 'w-10 h-10',
+		md: 'w-12 h-12',
+		lg: 'w-16 h-16',
+		xl: 'w-32 h-32'
+	};
+
+	const iconSizes = {
+		xs: 16,
+		sm: 20,
+		md: 24,
+		lg: 32,
+		xl: 64
+	};
 </script>
 
-<div class="avatar">
-  <div class={`${sizeClasses[size]} rounded-full bg-base-200 overflow-hidden`}>
-    <img 
-      src={avatarUrlToShow()} 
-      alt={`Avatar de ${nome}`}
-      class="w-full h-full object-cover"
-    />
-  </div>
+<div class="avatar placeholder">
+	<div
+		class={`${sizeClasses[size]} bg-base-200 text-base-content/50 flex items-center justify-center overflow-hidden rounded-full`}
+	>
+		{#if loading}
+			<span class="loading loading-spinner loading-xs"></span>
+		{:else if cachedAvatarUrl}
+			<img
+				src={cachedAvatarUrl}
+				alt={`Foto de perfil de ${nome}`}
+				class="h-full w-full object-cover"
+				loading="lazy"
+				onerror={() => {
+					cachedAvatarUrl = null;
+				}}
+			/>
+		{:else if fotoPerfilUrl}
+			<!-- Fallback: usar URL original se cache falhar -->
+			<img
+				src={fotoPerfilUrl}
+				alt={`Foto de perfil de ${nome}`}
+				class="h-full w-full object-cover"
+				loading="lazy"
+			/>
+		{:else}
+			<User size={iconSizes[size]} />
+		{/if}
+	</div>
 </div>
-