From b1c0cb47c0193f56e3602db0feadca1d68cbb580 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Mon, 23 Feb 2026 18:57:40 -0300
Subject: [PATCH] Ajuste usuarios - Inicio agenda

---
 .../agenda/components/AgendaCalendar.vue      |  209 +++-
 .../agenda/components/AgendaRightPanel.vue    |  108 +-
 .../cards/AgendaNextSessionsCardList.vue      |  157 ++-
 .../components/cards/AgendaPulseCardGrid.vue  |  140 ++-
 .../agenda/pages/AgendaClinicaPage.vue        | 1073 +++++++++++++----
 .../agenda/pages/AgendaTerapeutaPage.vue      |  906 +++++++++-----
 .../agenda/services/agendaRepository.js       |  145 ++-
 src/layout/AppMenu.vue                        |   35 +-
 src/navigation/menus/admin.menu.js            |   10 +-
 src/router/guards.js                          |   32 +-
 src/views/pages/auth/Login.vue                |    5 +
 11 files changed, 2244 insertions(+), 576 deletions(-)

diff --git a/src/features/agenda/components/AgendaCalendar.vue b/src/features/agenda/components/AgendaCalendar.vue
index abce031..1016285 100644
--- a/src/features/agenda/components/AgendaCalendar.vue
+++ b/src/features/agenda/components/AgendaCalendar.vue
@@ -1,10 +1,209 @@
+<!-- src/features/agenda/components/AgendaCalendar.vue -->
 <script setup>
-defineProps({})
-defineEmits([])
+import { computed, ref, watch, onMounted } from 'vue'
+
+import FullCalendar from '@fullcalendar/vue3'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import dayGridPlugin from '@fullcalendar/daygrid'
+
+import ProgressSpinner from 'primevue/progressspinner'
+
+const props = defineProps({
+  // UI
+  view: { type: String, default: 'day' }, // 'day' | 'week'
+  mode: { type: String, default: 'work_hours' }, // 'full_24h' | 'work_hours'
+
+  // calendar behavior
+  timezone: { type: String, default: 'America/Sao_Paulo' },
+  slotDuration: { type: String, default: '00:30:00' },
+  slotMinTime: { type: String, default: '06:00:00' },
+  slotMaxTime: { type: String, default: '22:00:00' },
+  businessHours: { type: [Array, Object], default: () => [] },
+
+  // data
+  events: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits([
+  'rangeChange',
+  'selectTime',
+  'eventClick',
+  'eventDrop',
+  'eventResize'
+])
+
+const fcRef = ref(null)
+
+const initialView = computed(() => (props.view === 'week' ? 'timeGridWeek' : 'timeGridDay'))
+
+function getApi () {
+  const inst = fcRef.value
+  return inst?.getApi?.() || null
+}
+
+function emitRange () {
+  const api = getApi()
+  if (!api) return
+  const v = api.view
+  emit('rangeChange', { start: v.activeStart, end: v.activeEnd })
+}
+
+// -----------------------------
+// Calendar options
+// -----------------------------
+const calendarOptions = computed(() => {
+  const isWorkHours = props.mode !== 'full_24h'
+
+  // No modo 24h, não recorta — mas mantemos min/max caso você queira ainda controlar
+  const minTime = isWorkHours ? props.slotMinTime : '00:00:00'
+  // FullCalendar timeGrid costuma aceitar 24:00:00, mas 23:59:59 evita edge-case
+  const maxTime = isWorkHours ? props.slotMaxTime : '23:59:59'
+
+  return {
+    plugins: [timeGridPlugin, interactionPlugin, dayGridPlugin],
+    initialView: initialView.value,
+
+    timeZone: props.timezone,
+
+    // Header desativado (você controla no Toolbar)
+    headerToolbar: false,
+
+    // Visão “produto”: blocos com linhas suaves
+    nowIndicator: true,
+    allDaySlot: false,
+    expandRows: true,
+    height: 'auto',
+
+    // Seleção / DnD / Resize
+    selectable: true,
+    selectMirror: true,
+    editable: true,
+    eventStartEditable: true,
+    eventDurationEditable: true,
+
+    // Intervalos visuais
+    slotDuration: props.slotDuration,
+    slotMinTime: minTime,
+    slotMaxTime: maxTime,
+    slotLabelFormat: {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    },
+
+    // Horário “verdadeiro” de funcionamento (se você usar)
+    businessHours: props.businessHours,
+
+    // Dados
+    events: props.events,
+
+    // Melhor UX
+    weekends: true,
+    firstDay: 1, // segunda
+
+    // Callbacks
+    datesSet: () => {
+      // dispara quando muda o intervalo exibido (prev/next/today/view)
+      emitRange()
+    },
+
+    select: (selection) => {
+      // selection: { start, end, allDay, ... }
+      emit('selectTime', selection)
+    },
+
+    eventClick: (info) => emit('eventClick', info),
+    eventDrop: (info) => emit('eventDrop', info),
+    eventResize: (info) => emit('eventResize', info)
+  }
+})
+
+// -----------------------------
+// Exposed methods (para Toolbar/Page)
+// -----------------------------
+function goToday () { getApi()?.today?.() }
+function prev () { getApi()?.prev?.() }
+function next () { getApi()?.next?.() }
+
+function setView (v) {
+  const api = getApi()
+  if (!api) return
+  api.changeView(v === 'week' ? 'timeGridWeek' : 'timeGridDay')
+}
+
+defineExpose({ goToday, prev, next, setView })
+
+// Se a prop view mudar, sincroniza
+watch(
+  () => props.view,
+  (v) => setView(v)
+)
+
+// Emite o range inicial assim que montar
+onMounted(() => {
+  // garante que o FullCalendar já criou a view
+  setTimeout(() => emitRange(), 0)
+})
 </script>
 
 <template>
-  <div class="p-4 rounded-xl border border-[var(--surface-border)] bg-[var(--surface-card)]">
-    <b>AgendaCalendar (placeholder)</b>
+  <div class="agenda-calendar-wrap">
+    <div v-if="loading" class="agenda-calendar-loading">
+      <ProgressSpinner strokeWidth="3" />
+      <div class="text-sm mt-2" style="color: var(--text-color-secondary);">
+        Carregando agenda…
+      </div>
+    </div>
+
+    <FullCalendar
+      ref="fcRef"
+      :options="calendarOptions"
+    />
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.agenda-calendar-wrap{
+  position: relative;
+  width: 100%;
+}
+
+.agenda-calendar-loading{
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(3px);
+  background: color-mix(in srgb, var(--surface-card) 85%, transparent);
+  border-radius: 16px;
+}
+
+/* Deixa o calendário “respirar” dentro de cards/layouts */
+:deep(.fc){
+  font-size: 0.95rem;
+}
+
+:deep(.fc .fc-timegrid-slot){
+  height: 2.2rem;
+}
+
+:deep(.fc .fc-timegrid-now-indicator-line){
+  opacity: .75;
+}
+
+:deep(.fc .fc-scrollgrid){
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid var(--surface-border);
+}
+
+:deep(.fc .fc-timegrid-axis-cushion),
+:deep(.fc .fc-timegrid-slot-label-cushion){
+  color: var(--text-color-secondary);
+}
+</style>
\ No newline at end of file
diff --git a/src/features/agenda/components/AgendaRightPanel.vue b/src/features/agenda/components/AgendaRightPanel.vue
index ff011ee..490e798 100644
--- a/src/features/agenda/components/AgendaRightPanel.vue
+++ b/src/features/agenda/components/AgendaRightPanel.vue
@@ -1,13 +1,105 @@
+<!-- src/features/agenda/components/AgendaRightPanel.vue -->
 <script setup>
-defineProps({})
+import Card from 'primevue/card'
+import Divider from 'primevue/divider'
+import Button from 'primevue/button'
+
+const props = defineProps({
+  title: { type: String, default: 'Painel' },
+  subtitle: { type: String, default: 'Visão rápida do dia e ações de triagem.' },
+  sticky: { type: Boolean, default: true },
+  showHeaderActions: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['refresh', 'collapse'])
+
+/**
+ * Este componente é propositalmente "burro".
+ * Ele só organiza layout e slots para o painel lateral.
+ * Regras/ações reais ficam nas páginas ou nos cards filhos.
+ */
 </script>
 
 <template>
-  <div class="p-4 rounded-xl border border-[var(--surface-border)] bg-[var(--surface-card)]">
-    <b>AgendaRightPanel (placeholder)</b>
-    <div class="mt-3">
-      <slot name="top" />
-      <slot name="bottom" />
-    </div>
+  <div
+    class="agenda-right-panel"
+    :class="{ 'is-sticky': sticky }"
+  >
+    <Card class="h-full">
+      <template #title>
+        <div class="flex align-items-start justify-content-between gap-2">
+          <div class="min-w-0">
+            <div class="text-base md:text-lg font-semibold truncate">
+              {{ title }}
+            </div>
+            <div class="text-xs mt-1" style="color: var(--text-color-secondary);">
+              {{ subtitle }}
+            </div>
+          </div>
+
+          <div v-if="showHeaderActions" class="flex align-items-center gap-1">
+            <Button
+              size="small"
+              text
+              icon="pi pi-refresh"
+              v-tooltip.top="'Atualizar painel'"
+              @click="emit('refresh')"
+            />
+            <Button
+              size="small"
+              text
+              icon="pi pi-window-minimize"
+              v-tooltip.top="'Recolher (UI)'"
+              @click="emit('collapse')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template #content>
+        <div class="content-wrap">
+          <!-- TOP slot (ex.: próximas sessões) -->
+          <div class="slot-top">
+            <slot name="top" />
+          </div>
+
+          <Divider class="my-3" />
+
+          <!-- BOTTOM slot (ex.: pulse / atalhos) -->
+          <div class="slot-bottom">
+            <slot name="bottom" />
+          </div>
+        </div>
+      </template>
+    </Card>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.agenda-right-panel{
+  width: 100%;
+}
+
+.agenda-right-panel.is-sticky{
+  position: sticky;
+  top: 1rem;
+  align-self: start;
+}
+
+/* Deixa o painel com scroll interno sem estourar a página */
+.content-wrap{
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  max-height: calc(100vh - 220px);
+  overflow: auto;
+  padding-right: .25rem;
+}
+
+/* Melhor sensação de “sessões” */
+.slot-top, .slot-bottom{
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/features/agenda/components/cards/AgendaNextSessionsCardList.vue b/src/features/agenda/components/cards/AgendaNextSessionsCardList.vue
index 677e4d7..e302733 100644
--- a/src/features/agenda/components/cards/AgendaNextSessionsCardList.vue
+++ b/src/features/agenda/components/cards/AgendaNextSessionsCardList.vue
@@ -1,12 +1,157 @@
+<!-- src/features/agenda/components/AgendaToolbar.vue -->
 <script setup>
-defineProps({
-  items: { type: Array, default: () => [] }
+import { computed, ref, watch } from 'vue'
+
+import Card from 'primevue/card'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import SelectButton from 'primevue/selectbutton'
+import InputText from 'primevue/inputtext'
+import FloatLabel from 'primevue/floatlabel'
+import Tag from 'primevue/tag'
+
+const props = defineProps({
+  title: { type: String, default: 'Agenda' },
+  view: { type: String, default: 'day' }, // 'day' | 'week'
+  mode: { type: String, default: 'work_hours' } // 'full_24h' | 'work_hours'
 })
-defineEmits(['open', 'confirm', 'reschedule'])
+
+const emit = defineEmits([
+  'today',
+  'prev',
+  'next',
+  'changeView',
+  'toggleMode',
+  'createSession',
+  'createBlock',
+  'search'
+])
+
+// UX: busca com debounce simples
+const searchLocal = ref('')
+let t = null
+watch(searchLocal, (v) => {
+  clearTimeout(t)
+  t = setTimeout(() => emit('search', v), 220)
+})
+
+// SelectButtons (executivo, direto)
+const viewOptions = [
+  { label: 'Dia', value: 'day' },
+  { label: 'Semana', value: 'week' }
+]
+
+const modeOptions = [
+  { label: 'Horário de funcionamento', value: 'work_hours' },
+  { label: 'Dia completo (24h)', value: 'full_24h' }
+]
+
+const modeTag = computed(() => {
+  return props.mode === 'full_24h'
+    ? { severity: 'info', text: '24h' }
+    : { severity: 'success', text: 'Funcionamento' }
+})
+
+function onChangeView(val) {
+  emit('changeView', val)
+}
+
+function onToggleMode(val) {
+  emit('toggleMode', val)
+}
 </script>
 
 <template>
-  <div class="p-3 border rounded-lg">
-    <b>AgendaNextSessionsCardList (placeholder)</b>
-  </div>
+  <Card class="mb-3 md:mb-4">
+    <template #content>
+      <div class="flex flex-column gap-3">
+
+        <!-- Top row -->
+        <div class="flex align-items-start justify-content-between gap-3 flex-wrap">
+          <div class="min-w-0">
+            <div class="flex align-items-center gap-2 flex-wrap">
+              <div class="text-xl md:text-2xl font-semibold leading-tight">
+                {{ title }}
+              </div>
+              <Tag :severity="modeTag.severity" :value="modeTag.text" />
+            </div>
+            <div class="text-sm mt-1" style="color: var(--text-color-secondary);">
+              Navegue, filtre e crie compromissos com velocidade — sem perder controle clínico.
+            </div>
+          </div>
+
+          <div class="flex align-items-center gap-2 flex-wrap">
+            <Button
+              size="small"
+              icon="pi pi-plus"
+              label="Sessão"
+              @click="emit('createSession')"
+            />
+            <Button
+              size="small"
+              icon="pi pi-lock"
+              severity="secondary"
+              label="Bloqueio"
+              @click="emit('createBlock')"
+            />
+          </div>
+        </div>
+
+        <Divider class="my-0" />
+
+        <!-- Controls row -->
+        <div class="grid gap-3 md:gap-4" style="grid-template-columns: 1fr;">
+          <div class="grid gap-3 md:gap-4 items-center" style="grid-template-columns: 1fr;">
+
+            <div class="flex align-items-center justify-content-between gap-3 flex-wrap">
+              <!-- Nav -->
+              <div class="flex align-items-center gap-2 flex-wrap">
+                <Button size="small" text icon="pi pi-angle-left" @click="emit('prev')" />
+                <Button size="small" text icon="pi pi-angle-right" @click="emit('next')" />
+                <Button size="small" icon="pi pi-calendar" label="Hoje" @click="emit('today')" />
+              </div>
+
+              <!-- View + Mode -->
+              <div class="flex align-items-center gap-2 flex-wrap">
+                <SelectButton
+                  :modelValue="view"
+                  :options="viewOptions"
+                  optionLabel="label"
+                  optionValue="value"
+                  @update:modelValue="onChangeView"
+                />
+                <SelectButton
+                  :modelValue="mode"
+                  :options="modeOptions"
+                  optionLabel="label"
+                  optionValue="value"
+                  @update:modelValue="onToggleMode"
+                />
+              </div>
+            </div>
+
+            <!-- Search -->
+            <div class="flex align-items-center gap-2 flex-wrap">
+              <div class="flex-1 min-w-[260px]">
+                <FloatLabel>
+                  <InputText id="agenda-search" v-model="searchLocal" class="w-full" />
+                  <label for="agenda-search">Buscar por título / observação</label>
+                </FloatLabel>
+              </div>
+
+              <Button
+                size="small"
+                text
+                icon="pi pi-times"
+                :disabled="!searchLocal"
+                @click="searchLocal = ''"
+              />
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </template>
+  </Card>
 </template>
\ No newline at end of file
diff --git a/src/features/agenda/components/cards/AgendaPulseCardGrid.vue b/src/features/agenda/components/cards/AgendaPulseCardGrid.vue
index b3ac6f0..77ad4e0 100644
--- a/src/features/agenda/components/cards/AgendaPulseCardGrid.vue
+++ b/src/features/agenda/components/cards/AgendaPulseCardGrid.vue
@@ -1,12 +1,142 @@
+<!-- src/features/agenda/components/cards/AgendaPulseCardGrid.vue -->
 <script setup>
-defineProps({
+import { computed } from 'vue'
+
+import Card from 'primevue/card'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Tag from 'primevue/tag'
+
+const props = defineProps({
   stats: { type: Object, default: () => ({}) }
 })
-defineEmits(['quickBlock', 'quickCreate'])
+
+const emit = defineEmits(['quickBlock', 'quickCreate'])
+
+const dados_de_exemplo = {
+  totalSessions: 6,
+  totalMinutes: 300,
+  biggestFreeWindow: '2h 10m',
+  pending: 0,
+  reschedules: 1,
+  attentions: 1,
+  suggested1: '14:00',
+  suggested2: '16:30',
+  nextBreak: '12:00'
+}
+
+const s = computed(() => {
+  const base = props.stats && Object.keys(props.stats).length ? props.stats : dados_de_exemplo
+  return {
+    totalSessions: base.totalSessions ?? 0,
+    totalMinutes: base.totalMinutes ?? 0,
+    biggestFreeWindow: base.biggestFreeWindow ?? '—',
+    pending: base.pending ?? 0,
+    reschedules: base.reschedules ?? 0,
+    attentions: base.attentions ?? 0,
+    suggested1: base.suggested1 ?? '—',
+    suggested2: base.suggested2 ?? '—',
+    nextBreak: base.nextBreak ?? '—'
+  }
+})
+
+function minutesToHuman(min) {
+  const n = Number(min || 0)
+  const h = Math.floor(n / 60)
+  const m = n % 60
+  if (h <= 0) return `${m}m`
+  if (m <= 0) return `${h}h`
+  return `${h}h ${m}m`
+}
+
+const totalTimeHuman = computed(() => minutesToHuman(s.value.totalMinutes))
+
+const attentionSeverity = computed(() => {
+  if (s.value.attentions >= 3) return 'danger'
+  if (s.value.attentions >= 1) return 'warning'
+  return 'success'
+})
 </script>
 
 <template>
-  <div class="p-3 border rounded-lg">
-    <b>AgendaPulseCardGrid (placeholder)</b>
-  </div>
+  <Card>
+    <template #title>
+      <div class="flex align-items-center justify-content-between gap-2 flex-wrap">
+        <div class="flex flex-column">
+          <span>Pulso da agenda</span>
+          <span class="text-xs" style="color: var(--text-color-secondary);">
+            Indicadores rápidos para decisão imediata.
+          </span>
+        </div>
+
+        <div class="flex align-items-center gap-2">
+          <Tag :severity="attentionSeverity" :value="`Atenções: ${s.attentions}`" />
+        </div>
+      </div>
+    </template>
+
+    <template #content>
+      <div class="grid gap-2">
+        <!-- Linha 1: métricas -->
+        <div class="grid gap-2" style="grid-template-columns: 1fr 1fr;">
+          <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card);">
+            <div class="text-xs" style="color: var(--text-color-secondary);">Sessões (no filtro)</div>
+            <div class="text-xl font-semibold mt-1">{{ s.totalSessions }}</div>
+          </div>
+
+          <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card);">
+            <div class="text-xs" style="color: var(--text-color-secondary);">Tempo total</div>
+            <div class="text-xl font-semibold mt-1">{{ totalTimeHuman }}</div>
+          </div>
+        </div>
+
+        <!-- Linha 2: janelas e atenção -->
+        <div class="grid gap-2" style="grid-template-columns: 1fr 1fr;">
+          <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card);">
+            <div class="text-xs" style="color: var(--text-color-secondary);">Maior janela livre</div>
+            <div class="text-base font-semibold mt-1">{{ s.biggestFreeWindow }}</div>
+            <div class="text-xs mt-2" style="color: var(--text-color-secondary);">
+              Sugestões: <b>{{ s.suggested1 }}</b> e <b>{{ s.suggested2 }}</b>
+            </div>
+          </div>
+
+          <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card);">
+            <div class="text-xs" style="color: var(--text-color-secondary);">Pontos de atenção</div>
+            <div class="flex align-items-center gap-2 mt-2 flex-wrap">
+              <Tag severity="warning" :value="`Pendências: ${s.pending}`" />
+              <Tag severity="info" :value="`Remarcar: ${s.reschedules}`" />
+            </div>
+            <div class="text-xs mt-2" style="color: var(--text-color-secondary);">
+              Próxima pausa: <b>{{ s.nextBreak }}</b>
+            </div>
+          </div>
+        </div>
+
+        <Divider class="my-2" />
+
+        <!-- Ações rápidas -->
+        <div class="flex align-items-center justify-content-between gap-2 flex-wrap">
+          <div class="text-xs" style="color: var(--text-color-secondary);">
+            Ações rápidas (criação sempre abre modal — nada nasce “direto”).
+          </div>
+
+          <div class="flex align-items-center gap-2">
+            <Button
+              size="small"
+              icon="pi pi-plus"
+              label="Nova sessão"
+              @click="emit('quickCreate')"
+            />
+            <Button
+              size="small"
+              icon="pi pi-lock"
+              severity="secondary"
+              label="Bloquear horário"
+              @click="emit('quickBlock')"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </Card>
 </template>
\ No newline at end of file
diff --git a/src/features/agenda/pages/AgendaClinicaPage.vue b/src/features/agenda/pages/AgendaClinicaPage.vue
index b1828f6..42687a5 100644
--- a/src/features/agenda/pages/AgendaClinicaPage.vue
+++ b/src/features/agenda/pages/AgendaClinicaPage.vue
@@ -1,288 +1,905 @@
+<!-- src/views/pages/agenda/AgendaClinicaPage.vue -->
+<template>
+  <div class="agenda-page p-3 md:p-5">
+    <Toast />
+
+    <!-- Topbar (todos os filtros aqui) -->
+    <div class="agenda-topbar mb-3">
+      <div class="topbar-row">
+        <!-- Esquerda: filtros principais -->
+        <div class="topbar-left">
+          <!-- Exibir apenas sessões -->
+          <div class="field compact">
+            <span class="label">Exibir:</span>
+            <SelectButton
+              v-model="onlySessions"
+              :options="onlySessionsOptions"
+              optionLabel="label"
+              optionValue="value"
+              class="select-orange"
+            />
+          </div>
+
+          <!-- Dia / Semana / Mês -->
+          <div class="field compact">
+            <SelectButton
+              v-model="calendarView"
+              :options="viewOptions"
+              optionLabel="label"
+              optionValue="value"
+              class="select-orange"
+            />
+          </div>
+
+          <!-- 24h / 12h / Meu Horário -->
+          <div class="field compact">
+            <SelectButton
+              v-model="timeMode"
+              :options="timeModeOptions"
+              optionLabel="label"
+              optionValue="value"
+              class="select-orange"
+            />
+          </div>
+        </div>
+
+        <!-- Direita: busca + navegação + ações -->
+        <div class="topbar-right">
+          <!-- Busca -->
+          <div class="search">
+            <FloatLabel>
+              <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText
+                  id="agendaSearch"
+                  v-model="search"
+                  class="w-full"
+                  autocomplete="off"
+                  @input="onSearchInput"
+                />
+              </IconField>
+              <label for="agendaSearch">Buscar paciente...</label>
+            </FloatLabel>
+          </div>
+
+          <!-- Navegação (Hoje / setas / mês) -->
+          <div class="nav">
+            <Button
+              label="Hoje"
+              severity="secondary"
+              outlined
+              class="btn-soft"
+              @click="goToday"
+            />
+            <Button
+              icon="pi pi-chevron-left"
+              severity="secondary"
+              outlined
+              class="btn-soft icon-only"
+              @click="goPrev"
+            />
+            <Button
+              icon="pi pi-chevron-right"
+              severity="secondary"
+              outlined
+              class="btn-soft icon-only"
+              @click="goNext"
+            />
+
+            <Button
+              :label="visibleTitle"
+              icon="pi pi-calendar"
+              severity="secondary"
+              outlined
+              class="btn-soft"
+              @click="toggleMonthPicker"
+            />
+          </div>
+
+          <!-- Ações: Bloquear -->
+          <div class="actions">
+            <SplitButton
+              label="Bloquear"
+              icon="pi pi-lock"
+              :model="blockMenuItems"
+              class="btn-primary"
+              @click="openBlockDialog('range')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Linha de título (igual “Abril 2024 / Quarta-feira …”) -->
+      <div class="topbar-sub">
+        <div class="sub-left">
+          <div class="subtitle">
+            <span class="muted">{{ subtitlePrefix }}</span>
+            <span class="strong">{{ subtitleText }}</span>
+          </div>
+        </div>
+
+        <div class="sub-right">
+          <Button
+            icon="pi pi-refresh"
+            severity="secondary"
+            outlined
+            class="btn-soft icon-only"
+            v-tooltip.top="'Recarregar'"
+            @click="refetch"
+          />
+          <Button
+            icon="pi pi-cog"
+            severity="secondary"
+            outlined
+            class="btn-soft icon-only"
+            v-tooltip.top="'Configurações da agenda'"
+            @click="goSettings"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Layout: 2 colunas -->
+    <div class="grid">
+      <!-- Coluna maior: FullCalendar -->
+      <div class="col-12 lg:col-8 xl:col-9">
+        <div class="surface-card card-shell p-0 overflow-hidden">
+          <div class="calendar-shell">
+            <FullCalendar ref="fcRef" :options="fcOptions" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Coluna menor: mini calendário + cards -->
+      <div class="col-12 lg:col-4 xl:col-3">
+        <!-- Mini calendário do mês -->
+        <div class="surface-card card-shell p-3 mb-3">
+          <div class="side-title">
+            <span>Calendário</span>
+            <div class="side-nav">
+              <Button
+                icon="pi pi-chevron-left"
+                severity="secondary"
+                text
+                class="icon-only"
+                @click="miniPrevMonth"
+              />
+              <Button
+                icon="pi pi-chevron-right"
+                severity="secondary"
+                text
+                class="icon-only"
+                @click="miniNextMonth"
+              />
+            </div>
+          </div>
+
+          <Calendar
+            v-model="miniDate"
+            inline
+            showWeek
+            class="mini-cal"
+            @update:modelValue="onMiniPick"
+          />
+        </div>
+
+        <!-- Cards de info -->
+        <div class="surface-card card-shell p-3 mb-3">
+          <div class="side-title mb-2">
+            <span>Visão Geral</span>
+          </div>
+
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-label">Atendimentos</div>
+              <div class="stat-row">
+                <span class="muted">Hoje:</span>
+                <span class="value">{{ stats.today }}</span>
+              </div>
+              <div class="stat-row">
+                <span class="muted">Semana:</span>
+                <span class="value">{{ stats.week }}</span>
+              </div>
+            </div>
+
+            <div class="stat-card">
+              <div class="stat-label">Tempo de Leitura</div>
+              <div class="stat-row">
+                <span class="muted">Médio:</span>
+                <span class="value">{{ stats.readingAvg }}</span>
+              </div>
+              <div class="stat-hint muted">Baseado no ritmo recente</div>
+            </div>
+
+            <div class="stat-card wide">
+              <div class="stat-label">Pendências</div>
+              <div class="stat-row">
+                <span class="muted">Itens:</span>
+                <span class="value warn">{{ stats.pending }}</span>
+              </div>
+              <Button
+                label="Ver mais"
+                icon="pi pi-arrow-right"
+                link
+                class="p-0 mt-1"
+                @click="openPending"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- CTA novo atendimento (opcional) -->
+        <div class="surface-card card-shell p-3">
+          <Button
+            label="Novo Atendimento"
+            icon="pi pi-plus"
+            class="w-full btn-primary"
+            @click="createAppointment"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Month Picker (overlay simples) -->
+    <Dialog
+      v-model:visible="monthPickerVisible"
+      modal
+      header="Escolher mês"
+      :style="{ width: '420px' }"
+    >
+      <div class="p-2">
+        <Calendar v-model="monthPickerDate" view="month" dateFormat="mm/yy" class="w-full" />
+        <div class="flex justify-content-end gap-2 mt-3">
+          <Button label="Cancelar" severity="secondary" outlined @click="monthPickerVisible = false" />
+          <Button label="Ir" class="btn-primary" @click="applyMonthPick" />
+        </div>
+      </div>
+    </Dialog>
+
+    <!-- Block Dialog (placeholder conceitual) -->
+    <Dialog
+      v-model:visible="blockDialogVisible"
+      modal
+      :header="blockDialogHeader"
+      :style="{ width: '520px' }"
+    >
+      <div class="p-2">
+        <div class="muted mb-3">
+          Aqui você pluga o seu fluxo real de bloqueio (agenda inteira ou intervalo), salvando no banco e refletindo no calendário.
+        </div>
+
+        <div class="grid">
+          <div class="col-12 md:col-6">
+            <FloatLabel>
+              <Calendar
+                id="blockStart"
+                v-model="blockStart"
+                showTime
+                hourFormat="24"
+                class="w-full"
+              />
+              <label for="blockStart">Início</label>
+            </FloatLabel>
+          </div>
+          <div class="col-12 md:col-6">
+            <FloatLabel>
+              <Calendar
+                id="blockEnd"
+                v-model="blockEnd"
+                showTime
+                hourFormat="24"
+                class="w-full"
+              />
+              <label for="blockEnd">Fim</label>
+            </FloatLabel>
+          </div>
+          <div class="col-12">
+            <FloatLabel>
+              <InputText id="blockReason" v-model="blockReason" class="w-full" />
+              <label for="blockReason">Motivo (opcional)</label>
+            </FloatLabel>
+          </div>
+        </div>
+
+        <div class="flex justify-content-end gap-2 mt-4">
+          <Button label="Cancelar" severity="secondary" outlined @click="blockDialogVisible = false" />
+          <Button label="Bloquear" icon="pi pi-lock" class="btn-primary" @click="confirmBlock" />
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 
-import AgendaToolbar from '../components/AgendaToolbar.vue'
-import AgendaClinicMosaic from '../components/AgendaClinicMosaic.vue'
-import AgendaEventDialog from '../components/AgendaEventDialog.vue'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Calendar from 'primevue/calendar'
+import InputText from 'primevue/inputtext'
+import FloatLabel from 'primevue/floatlabel'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import SelectButton from 'primevue/selectbutton'
+import SplitButton from 'primevue/splitbutton'
 
-import { useAgendaEvents } from '../composables/useAgendaEvents.js'
-import { useAgendaClinicStaff } from '../composables/useAgendaClinicStaff.js'
-import { mapAgendaEventosToCalendarEvents } from '../services/agendaMappers.js'
-
-import { useTenantStore } from '@/stores/tenantStore'
+import FullCalendar from '@fullcalendar/vue3'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import ptBrLocale from '@fullcalendar/core/locales/pt-br'
 
+const router = useRouter()
 const toast = useToast()
-const tenantStore = useTenantStore()
 
-// -------------------- UI state --------------------
-const view = ref('day')
-const mode = ref('work_hours')
-const calendarRef = ref(null)
+// -----------------------------
+// Estado Topbar
+// -----------------------------
+const onlySessions = ref(true)
+const calendarView = ref('day') // day | week | month
+const timeMode = ref('my') // 24 | 12 | my
+const search = ref('')
 
-const dialogOpen = ref(false)
-const dialogEventRow = ref(null)
-const dialogStartISO = ref('')
-const dialogEndISO = ref('')
+// “Meu horário” vindo das configs (exemplo; substitua pelo que você já tem no tenant/config store)
+const myStart = ref('07:00:00')
+const myEnd = ref('19:00:00')
 
-// guardamos o range atual (para recarregar depois)
-const currentRange = ref({ start: null, end: null })
+// Mini calendário
+const miniDate = ref(new Date())
 
-// -------------------- data --------------------
-const { loading: loadingStaff, error: staffError, staff, load: loadStaff } = useAgendaClinicStaff()
+// Month picker
+const monthPickerVisible = ref(false)
+const monthPickerDate = ref(new Date())
 
-// ✅ agora já pega também create/update/remove (se você já atualizou o composable)
-const {
-  loading: loadingEvents,
-  error: eventsError,
-  rows,
-  loadClinicRange,
-  create,
-  update,
-  remove
-} = useAgendaEvents()
-
-const tenantId = computed(() => {
-  const t = tenantStore.activeTenantId
-  if (!t) return null
-  if (t === 'null' || t === 'undefined') return null
-  return t
+// Cards (mock – você troca por dados reais)
+const stats = ref({
+  today: 18,
+  week: 124,
+  readingAvg: '45min',
+  pending: 3
 })
 
-function isUuid (v) {
-  return typeof v === 'string' &&
-    /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(v)
-}
+// -----------------------------
+// Opções UI
+// -----------------------------
+const onlySessionsOptions = [
+  { label: 'Apenas Sessões', value: true },
+  { label: 'Tudo', value: false }
+]
 
-const staffCols = computed(() => {
-  return (staff.value || [])
-    .filter(s => isUuid(s.user_id))
-    .map(s => ({
-      id: s.user_id,
-      title: s.full_name || s.nome || s.name || s.email || 'Profissional'
-    }))
+const viewOptions = [
+  { label: 'Dia', value: 'day' },
+  { label: 'Semana', value: 'week' },
+  { label: 'Mês', value: 'month' }
+]
+
+const timeModeOptions = [
+  { label: '24h', value: '24' },
+  { label: '12h', value: '12' },
+  { label: 'Meu Horário', value: 'my' }
+]
+
+// -----------------------------
+// FullCalendar
+// -----------------------------
+const fcRef = ref(null)
+
+const currentDate = ref(new Date())
+
+// Eventos mock (troque por fetch real)
+const allEvents = ref([
+  { id: '1', title: 'Ana Costa — Consulta', start: asISO(currentDate.value, '08:00'), end: asISO(currentDate.value, '09:00'), extendedProps: { kind: 'session' } },
+  { id: '2', title: 'Bruno Almeida — Sessão', start: asISO(currentDate.value, '09:00'), end: asISO(currentDate.value, '10:00'), extendedProps: { kind: 'session' } },
+  { id: '3', title: 'Carla Mendes — Retorno', start: asISO(currentDate.value, '10:30'), end: asISO(currentDate.value, '11:20'), extendedProps: { kind: 'other' } },
+  { id: '4', title: 'Daniel Freitas — Consulta', start: asISO(currentDate.value, '11:00'), end: asISO(currentDate.value, '12:00'), extendedProps: { kind: 'session' } },
+  { id: '5', title: 'Intervalo', start: asISO(currentDate.value, '12:00'), end: asISO(currentDate.value, '13:00'), display: 'background', className: 'bg-break' },
+  { id: '6', title: 'Eva Oliveira — Avaliação', start: asISO(currentDate.value, '13:00'), end: asISO(currentDate.value, '14:00'), extendedProps: { kind: 'session' } }
+])
+
+const filteredEvents = computed(() => {
+  const q = (search.value || '').trim().toLowerCase()
+  return allEvents.value.filter(e => {
+    // “Apenas sessões”
+    if (onlySessions.value && e?.extendedProps?.kind && e.extendedProps.kind !== 'session') return false
+
+    // Busca
+    if (q) {
+      const title = String(e.title || '').toLowerCase()
+      if (!title.includes(q)) return false
+    }
+    return true
+  })
 })
 
-// ✅ AQUI está o que faltava: ownerIds
-const ownerIds = computed(() => staffCols.value.map(p => p.id))
-
-const allEvents = computed(() => mapAgendaEventosToCalendarEvents(rows.value || []))
-
-const ownerOptions = computed(() =>
-  staffCols.value.map(p => ({ label: p.title, value: p.id }))
-)
-
-// -------------------- lifecycle --------------------
-onMounted(async () => {
-  if (!tenantId.value) {
-    toast.add({ severity: 'warn', summary: 'Clínica', detail: 'Nenhum tenant ativo.', life: 4500 })
-    return
-  }
-
-  await loadStaff(tenantId.value)
-  if (staffError.value) {
-    toast.add({ severity: 'warn', summary: 'Profissionais', detail: staffError.value, life: 4500 })
-  }
+const visibleTitle = computed(() => {
+  // título “Abril 2024” ou similar — baseado no currentDate (que atualiza pelo calendário)
+  const d = currentDate.value
+  const month = d.toLocaleDateString('pt-BR', { month: 'long' })
+  const year = d.getFullYear()
+  return `${capitalize(month)} ${year}`
 })
 
-// -------------------- toolbar actions --------------------
-function onToday () { calendarRef.value?.goToday?.() }
-function onPrev () { calendarRef.value?.prev?.() }
-function onNext () { calendarRef.value?.next?.() }
+const subtitlePrefix = computed(() => {
+  return calendarView.value === 'month' ? '' : ' '
+})
 
-function onChangeView (v) {
-  view.value = v
-  calendarRef.value?.setView?.(v)
-}
+const subtitleText = computed(() => {
+  if (calendarView.value === 'month') return visibleTitle.value
+  // “Quarta-feira, 24 de Abril”
+  const d = currentDate.value
+  const weekday = d.toLocaleDateString('pt-BR', { weekday: 'long' })
+  const day = d.getDate()
+  const month = d.toLocaleDateString('pt-BR', { month: 'long' })
+  return `${capitalize(weekday)}, ${day} de ${capitalize(month)}`
+})
 
-function onToggleMode (m) {
-  mode.value = m
-}
+const slotMinTime = computed(() => {
+  // 24h: 00:00
+  if (timeMode.value === '24') return '00:00:00'
+  // 12h: 06:00 → 22:00 (ajuste se quiser)
+  if (timeMode.value === '12') return '06:00:00'
+  // Meu horário: começa 1h antes pra “respirar” como você pediu (dinâmico)
+  return padHourOffset(myStart.value, -1)
+})
 
-// -------------------- calendar callbacks --------------------
-async function onRangeChange ({ start, end }) {
-  currentRange.value = { start, end }
+const slotMaxTime = computed(() => {
+  if (timeMode.value === '24') return '24:00:00'
+  if (timeMode.value === '12') return '22:00:00'
+  // Meu horário: termina 1h depois
+  return padHourOffset(myEnd.value, +1)
+})
 
-  const ids = ownerIds.value
-  if (!ids.length) return
+const initialView = computed(() => {
+  if (calendarView.value === 'day') return 'timeGridDay'
+  if (calendarView.value === 'week') return 'timeGridWeek'
+  return 'dayGridMonth'
+})
 
-  await loadClinicRange(ids, new Date(start).toISOString(), new Date(end).toISOString())
+const fcOptions = computed(() => ({
+  plugins: [timeGridPlugin, dayGridPlugin, interactionPlugin],
+  locale: ptBrLocale,
+  timeZone: 'America/Sao_Paulo',
 
-  if (eventsError.value) {
-    toast.add({ severity: 'warn', summary: 'Eventos', detail: eventsError.value, life: 4500 })
-  }
-}
+  headerToolbar: false, // topbar é nossa
+  initialView: initialView.value,
 
-function onEventClick (info) {
-  const ev = info?.event
-  if (!ev) return
+  nowIndicator: true,
+  editable: false,
+  selectable: true,
+  selectMirror: true,
 
-  dialogEventRow.value = {
-    id: ev.id,
-    owner_id: ev.extendedProps?.owner_id,
-    terapeuta_id: ev.extendedProps?.terapeuta_id ?? null,
-    paciente_id: ev.extendedProps?.paciente_id ?? null,
-    tipo: ev.extendedProps?.tipo,
-    status: ev.extendedProps?.status,
-    titulo: ev.title,
-    observacoes: ev.extendedProps?.observacoes ?? null,
-    inicio_em: ev.start?.toISOString?.() || ev.startStr,
-    fim_em: ev.end?.toISOString?.() || ev.endStr
-  }
+  // “respiro” do range:
+  slotMinTime: slotMinTime.value,
+  slotMaxTime: slotMaxTime.value,
+  slotDuration: '00:30:00',
+  slotLabelInterval: '01:00',
+  expandRows: true,
+  height: 'auto',
 
-  dialogStartISO.value = ''
-  dialogEndISO.value = ''
-  dialogOpen.value = true
-}
+  dayMaxEvents: true,
+  weekends: true,
 
-async function persistMoveOrResize (info, actionLabel) {
-  try {
-    const ev = info?.event
-    if (!ev) return
+  events: filteredEvents.value,
 
-    const id = ev.id
-    const startISO = ev.start ? ev.start.toISOString() : null
-    const endISO = ev.end ? ev.end.toISOString() : null
+  datesSet: (arg) => {
+    // pega a data “principal” visível
+    const d = arg?.start ? new Date(arg.start) : new Date()
+    // para week/month, start é o começo do range; preferimos o “current” do calendário
+    const api = getApi()
+    const cd = api?.getDate?.()
+    currentDate.value = cd ? new Date(cd) : d
+    miniDate.value = new Date(currentDate.value)
+  },
 
-    if (!startISO || !endISO) throw new Error('Evento sem start/end.')
-
-    await update(id, { inicio_em: startISO, fim_em: endISO })
+  select: (info) => {
+    // placeholder: criar atendimento
+    toast.add({
+      severity: 'info',
+      summary: 'Selecionado',
+      detail: `Selecionou: ${formatRange(info.start, info.end)}`,
+      life: 2500
+    })
+  },
 
+  eventClick: (info) => {
     toast.add({
       severity: 'success',
-      summary: actionLabel,
-      detail: 'Alteração salva.',
-      life: 1800
+      summary: 'Evento',
+      detail: String(info?.event?.title || ''),
+      life: 2500
     })
-  } catch (e) {
-    // desfaz no calendário
-    info?.revert?.()
+  },
 
-    toast.add({
-      severity: 'warn',
-      summary: 'Erro',
-      detail: eventsError.value || e?.message || 'Falha ao salvar alteração.',
-      life: 4500
-    })
+  // Aparência mais clean
+  eventClassNames: (arg) => {
+    const kind = arg?.event?.extendedProps?.kind
+    if (kind === 'session') return ['evt', 'evt-session']
+    if (kind === 'other') return ['evt', 'evt-other']
+    return ['evt']
+  }
+}))
+
+function getApi () {
+  const inst = fcRef.value
+  return inst?.getApi?.() || null
+}
+
+// -----------------------------
+// Ações Topbar
+// -----------------------------
+function goToday () {
+  const api = getApi()
+  api?.today()
+}
+
+function goPrev () {
+  const api = getApi()
+  api?.prev()
+}
+
+function goNext () {
+  const api = getApi()
+  api?.next()
+}
+
+function toggleMonthPicker () {
+  monthPickerDate.value = new Date(currentDate.value)
+  monthPickerVisible.value = true
+}
+
+async function applyMonthPick () {
+  monthPickerVisible.value = false
+  await nextTick()
+  const api = getApi()
+  if (!api) return
+  api.gotoDate(monthPickerDate.value)
+}
+
+function onMiniPick (d) {
+  // clicou no mini calendário → ir para o dia
+  const api = getApi()
+  api?.gotoDate(d)
+  if (calendarView.value === 'month') {
+    // mantém mês; ok
   }
 }
 
-function onEventDrop (info) {
-  persistMoveOrResize(info, 'Movido')
+function miniPrevMonth () {
+  miniDate.value = shiftMonth(miniDate.value, -1)
 }
 
-function onEventResize (info) {
-  persistMoveOrResize(info, 'Redimensionado')
+function miniNextMonth () {
+  miniDate.value = shiftMonth(miniDate.value, +1)
 }
 
-// -------------------- dialog actions (mínimo funcional) --------------------
-function onCreateClinicEvent () {
-  // cria evento base (depois você troca para "selecionar no calendário", mas aqui é bom pra começar)
-  const start = new Date()
-  const end = new Date(Date.now() + 50 * 60000)
+watch(miniDate, (d) => {
+  // mini navega mês, mas não “força” o FullCalendar automaticamente;
+  // se quiser forçar, descomente:
+  // const api = getApi()
+  // api?.gotoDate(d)
+})
 
-  dialogEventRow.value = null
-  dialogStartISO.value = start.toISOString()
-  dialogEndISO.value = end.toISOString()
-  dialogOpen.value = true
+function onSearchInput () {
+  // aqui você pode debounciar e chamar fetch no backend se preferir
 }
 
-async function onDialogSave ({ id, payload }) {
-  try {
-    if (id) await update(id, payload)
-    else await create(payload)
+function refetch () {
+  toast.add({ severity: 'info', summary: 'Agenda', detail: 'Recarregar (hook do seu fetch)', life: 2000 })
+}
 
-    dialogOpen.value = false
+function goSettings () {
+  // ajuste para sua rota real
+  router.push({ path: '/configuracoes/agenda' })
+}
 
-    // recarrega range atual se existir
-    if (currentRange.value.start && currentRange.value.end) {
-      await loadClinicRange(
-        ownerIds.value,
-        new Date(currentRange.value.start).toISOString(),
-        new Date(currentRange.value.end).toISOString()
-      )
-    }
+function openPending () {
+  toast.add({ severity: 'warn', summary: 'Pendências', detail: 'Abrir lista de pendências (placeholder)', life: 2200 })
+}
 
-    toast.add({ severity: 'success', summary: 'Salvo', detail: 'Evento salvo.', life: 2500 })
-  } catch (e) {
-    toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || 'Falha ao salvar.', life: 4500 })
+function createAppointment () {
+  toast.add({ severity: 'success', summary: 'Novo', detail: 'Abrir modal/tela de novo atendimento', life: 2200 })
+}
+
+// -----------------------------
+// Bloqueio (placeholder conceitual)
+// -----------------------------
+const blockDialogVisible = ref(false)
+const blockMode = ref('range') // range | day
+const blockStart = ref(new Date())
+const blockEnd = ref(new Date())
+const blockReason = ref('')
+
+const blockDialogHeader = computed(() => {
+  return blockMode.value === 'day' ? 'Bloquear o dia inteiro' : 'Bloquear horário'
+})
+
+const blockMenuItems = [
+  {
+    label: 'Bloquear horário',
+    icon: 'pi pi-clock',
+    command: () => openBlockDialog('range')
+  },
+  {
+    label: 'Bloquear o dia inteiro',
+    icon: 'pi pi-calendar-times',
+    command: () => openBlockDialog('day')
   }
+]
+
+function openBlockDialog (mode) {
+  blockMode.value = mode
+  // sugestão: preenche com range do “agora”
+  const now = new Date()
+  blockStart.value = now
+  blockEnd.value = new Date(now.getTime() + 60 * 60 * 1000)
+  blockReason.value = ''
+  blockDialogVisible.value = true
 }
 
-async function onDialogDelete (id) {
-  try {
-    await remove(id)
-    dialogOpen.value = false
-
-    if (currentRange.value.start && currentRange.value.end) {
-      await loadClinicRange(
-        ownerIds.value,
-        new Date(currentRange.value.start).toISOString(),
-        new Date(currentRange.value.end).toISOString()
-      )
-    }
-
-    toast.add({ severity: 'success', summary: 'Excluído', detail: 'Evento removido.', life: 2500 })
-  } catch (e) {
-    toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || 'Falha ao excluir.', life: 4500 })
-  }
+function confirmBlock () {
+  // aqui você salva no banco + reflete no calendário (evento background / businessHours / etc)
+  blockDialogVisible.value = false
+  toast.add({
+    severity: 'success',
+    summary: 'Bloqueado',
+    detail: blockMode.value === 'day' ? 'Dia inteiro bloqueado' : 'Intervalo bloqueado',
+    life: 2500
+  })
 }
 
-function onSlotSelect ({ ownerId, start, end }) {
-  dialogEventRow.value = null
-  dialogStartISO.value = new Date(start).toISOString()
-  dialogEndISO.value = new Date(end).toISOString()
-  // aqui você pode setar o owner default do dialog via ownerId
-  // o Dialog já tem dropdown, mas você pode passar ownerId no payload quando salvar
-  dialogOpen.value = true
-
-  // opcional: guardar pra preselecionar no dialog (se você implementar isso)
-  // dialogOwnerId.value = ownerId
+// -----------------------------
+// Helpers
+// -----------------------------
+function asISO (baseDate, hm) {
+  const d = new Date(baseDate)
+  const [h, m] = hm.split(':').map(Number)
+  d.setHours(h, m || 0, 0, 0)
+  return d.toISOString()
 }
+
+function formatRange (start, end) {
+  const s = new Date(start).toLocaleString('pt-BR')
+  const e = new Date(end).toLocaleString('pt-BR')
+  return `${s} → ${e}`
+}
+
+function capitalize (s) {
+  if (!s) return s
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+function shiftMonth (date, delta) {
+  const d = new Date(date)
+  d.setMonth(d.getMonth() + delta)
+  return d
+}
+
+function padHourOffset (hhmmss, offsetHours) {
+  // hh:mm:ss
+  const parts = String(hhmmss || '00:00:00').split(':')
+  let h = Number(parts[0] || 0)
+  const m = String(parts[1] || '00').padStart(2, '0')
+  const s = String(parts[2] || '00').padStart(2, '0')
+
+  h = h + offsetHours
+  if (h < 0) h = 0
+  if (h > 24) h = 24
+  const hh = String(h).padStart(2, '0')
+  return `${hh}:${m}:${s}`
+}
+
+onMounted(() => {
+  // se você já tem config real, injeta aqui (tenantStore etc.)
+})
 </script>
 
-<template>
-  <div class="p-4 md:p-6">
-    <Toast />
+<style scoped>
+/* ---------- Shell ---------- */
+.agenda-page {
+  background: transparent;
+}
 
-    <AgendaToolbar
-      title="Agenda da clínica"
-      :view="view"
-      :mode="mode"
-      @today="onToday"
-      @prev="onPrev"
-      @next="onNext"
-      @changeView="onChangeView"
-      @toggleMode="onToggleMode"
-      @createSession="onCreateClinicEvent"
-      @createBlock="() => toast.add({ severity: 'info', summary: 'Bloqueio', detail: 'Próximo passo: bloqueio da clínica.', life: 2500 })"
-    />
+.card-shell {
+  border: 1px solid var(--surface-border);
+  border-radius: 1.5rem;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
+}
 
-    <AgendaClinicMosaic
-      ref="calendarRef"
-      :view="view"
-      :mode="mode"
-      :staff="staffCols"
-      :events="allEvents"
-      :loading="loadingStaff || loadingEvents"
-      @rangeChange="onRangeChange"
-	  @slotSelect="onSlotSelect"
-      @eventClick="onEventClick"
-      @eventDrop="onEventDrop"
-      @eventResize="onEventResize"
-    />
+/* ---------- Topbar ---------- */
+.agenda-topbar {
+  border: 1px solid var(--surface-border);
+  background: var(--surface-card);
+  border-radius: 1.75rem;
+  padding: 1rem;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
+}
 
-    <AgendaEventDialog
-      v-model="dialogOpen"
-      :eventRow="dialogEventRow"
-      :initialStartISO="dialogStartISO"
-      :initialEndISO="dialogEndISO"
-      :ownerId="staffCols?.[0]?.id || ''"
-      :allowOwnerEdit="true"
-      :ownerOptions="ownerOptions"
-      @save="onDialogSave"
-      @delete="onDialogDelete"
-    />
-  </div>
-</template>
\ No newline at end of file
+.topbar-row {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.topbar-left,
+.topbar-right {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.field.compact {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+
+.field .label {
+  font-size: .9rem;
+  opacity: .75;
+}
+
+.search {
+  min-width: 280px;
+}
+
+.nav {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+
+.actions {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+
+.topbar-sub {
+  margin-top: .85rem;
+  padding-top: .75rem;
+  border-top: 1px solid var(--surface-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: .75rem;
+}
+
+.subtitle {
+  font-size: 1.05rem;
+}
+
+.muted {
+  opacity: .7;
+}
+
+.strong {
+  font-weight: 700;
+}
+
+/* ---------- Buttons ---------- */
+.btn-soft :deep(.p-button) {
+  border-radius: 999px;
+}
+
+.icon-only :deep(.p-button) {
+  width: 42px;
+  justify-content: center;
+}
+
+.btn-primary :deep(.p-button) {
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+/* ---------- Calendar ---------- */
+.calendar-shell {
+  padding: .5rem;
+}
+
+.calendar-shell :deep(.fc) {
+  --fc-border-color: var(--surface-border);
+  --fc-today-bg-color: rgba(59, 130, 246, 0.06);
+  font-family: inherit;
+}
+
+.calendar-shell :deep(.fc-scrollgrid) {
+  border-radius: 1.25rem;
+  overflow: hidden;
+}
+
+.calendar-shell :deep(.fc-timegrid-slot-label),
+.calendar-shell :deep(.fc-col-header-cell-cushion),
+.calendar-shell :deep(.fc-timegrid-axis-cushion) {
+  font-size: .85rem;
+  opacity: .85;
+}
+
+.calendar-shell :deep(.fc-event) {
+  border: none;
+  border-radius: 14px;
+  padding: 6px 8px;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
+}
+
+.calendar-shell :deep(.evt-session) {
+  background: rgba(59, 130, 246, 0.10);
+}
+
+.calendar-shell :deep(.evt-other) {
+  background: rgba(16, 185, 129, 0.10);
+}
+
+.calendar-shell :deep(.bg-break) {
+  background: rgba(0,0,0,0.04) !important;
+}
+
+/* ---------- Sidebar ---------- */
+.side-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 800;
+  margin-bottom: .5rem;
+}
+
+.side-nav {
+  display: flex;
+  gap: .25rem;
+}
+
+.mini-cal :deep(.p-datepicker) {
+  width: 100%;
+  border: 0;
+  padding: 0;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: .75rem;
+}
+
+.stat-card {
+  border: 1px solid var(--surface-border);
+  border-radius: 1.25rem;
+  padding: .85rem;
+  background: rgba(255,255,255,0.55);
+}
+
+.stat-card.wide {
+  grid-column: 1 / -1;
+}
+
+.stat-label {
+  font-weight: 800;
+  margin-bottom: .35rem;
+}
+
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: .2rem;
+}
+
+.value {
+  font-weight: 900;
+  font-size: 1.1rem;
+}
+
+.value.warn {
+  color: var(--orange-500);
+}
+
+.stat-hint {
+  margin-top: .35rem;
+  font-size: .85rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/features/agenda/pages/AgendaTerapeutaPage.vue b/src/features/agenda/pages/AgendaTerapeutaPage.vue
index 0a98086..0bd77e4 100644
--- a/src/features/agenda/pages/AgendaTerapeutaPage.vue
+++ b/src/features/agenda/pages/AgendaTerapeutaPage.vue
@@ -1,53 +1,396 @@
-<!-- src/features/agenda/pages/AgendaTerapeutaPage.vue -->
+<!-- src/views/pages/agenda/AgendaTerapeutaPage.vue -->
+<template>
+  <div class="p-3 md:p-5">
+    <Toast />
+
+    <!-- Topbar -->
+    <div class="mb-3 rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-4 shadow-sm">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <!-- Esquerda: filtros -->
+        <div class="flex flex-wrap items-center gap-3">
+          <div class="flex items-center gap-2">
+            <span class="text-sm opacity-70">Exibir:</span>
+            <SelectButton
+              v-model="onlySessions"
+              :options="onlySessionsOptions"
+              optionLabel="label"
+              optionValue="value"
+              class="min-w-fit"
+            />
+          </div>
+
+          <SelectButton
+            v-model="calendarView"
+            :options="viewOptions"
+            optionLabel="label"
+            optionValue="value"
+            class="min-w-fit"
+          />
+
+          <SelectButton
+            v-model="timeMode"
+            :options="timeModeOptions"
+            optionLabel="label"
+            optionValue="value"
+            class="min-w-fit"
+          />
+        </div>
+
+        <!-- Direita: busca + navegação + ações -->
+        <div class="flex flex-wrap items-center gap-3">
+          <div class="w-full sm:w-[320px]">
+            <FloatLabel>
+              <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText
+                  id="agendaSearch"
+                  v-model="search"
+                  class="w-full"
+                  autocomplete="off"
+                />
+              </IconField>
+              <label for="agendaSearch">Buscar paciente...</label>
+            </FloatLabel>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <Button
+              label="Hoje"
+              severity="secondary"
+              outlined
+              class="rounded-full"
+              @click="goToday"
+            />
+            <Button
+              icon="pi pi-chevron-left"
+              severity="secondary"
+              outlined
+              class="h-10 w-10 rounded-full"
+              @click="goPrev"
+            />
+            <Button
+              icon="pi pi-chevron-right"
+              severity="secondary"
+              outlined
+              class="h-10 w-10 rounded-full"
+              @click="goNext"
+            />
+            <Button
+              :label="visibleTitle"
+              icon="pi pi-calendar"
+              severity="secondary"
+              outlined
+              class="rounded-full"
+              @click="toggleMonthPicker"
+            />
+          </div>
+
+          <div class="flex items-center gap-2">
+            <SplitButton
+              label="Bloquear"
+              icon="pi pi-lock"
+              :model="blockMenuItems"
+              class="rounded-full"
+              @click="openBlockDialog('range')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--surface-border)] pt-3">
+        <div class="text-base">
+          <span class="opacity-70">{{ subtitlePrefix }}</span>
+          <span class="font-semibold">{{ subtitleText }}</span>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <Button
+            icon="pi pi-plus"
+            class="h-10 w-10 rounded-full"
+            v-tooltip.top="'Novo compromisso'"
+            @click="onCreateFromButton"
+          />
+          <Button
+            icon="pi pi-refresh"
+            severity="secondary"
+            outlined
+            class="h-10 w-10 rounded-full"
+            v-tooltip.top="'Recarregar'"
+            @click="refetch"
+          />
+          <Button
+            icon="pi pi-cog"
+            severity="secondary"
+            outlined
+            class="h-10 w-10 rounded-full"
+            v-tooltip.top="'Configurações da agenda'"
+            @click="goSettings"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Layout: 2 colunas -->
+    <div class="grid">
+      <!-- Coluna maior: FullCalendar -->
+      <div class="col-12 lg:col-8 xl:col-9">
+        <div class="overflow-hidden rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] shadow-sm">
+          <div class="p-2">
+            <!-- ✅ key força reaplicar slotMin/Max quando trocar modo -->
+            <FullCalendar ref="fcRef" :key="fcKey" :options="fcOptions" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Coluna menor -->
+      <div class="col-12 lg:col-4 xl:col-3">
+        <div class="mb-3 rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 shadow-sm">
+          <div class="mb-2 flex items-center justify-between">
+            <span class="font-semibold">Calendário</span>
+            <div class="flex items-center gap-1">
+              <Button
+                icon="pi pi-chevron-left"
+                severity="secondary"
+                text
+                class="h-9 w-9 rounded-full"
+                @click="miniPrevMonth"
+              />
+              <Button
+                icon="pi pi-chevron-right"
+                severity="secondary"
+                text
+                class="h-9 w-9 rounded-full"
+                @click="miniNextMonth"
+              />
+            </div>
+          </div>
+
+          <Calendar
+            v-model="miniDate"
+            inline
+            showWeek
+            class="w-full"
+            @update:modelValue="onMiniPick"
+          />
+        </div>
+
+        <div class="mb-3 rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 shadow-sm">
+          <div class="mb-3 font-semibold">Visão Geral</div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-0)]/60 p-3">
+              <div class="mb-2 font-semibold">Atendimentos</div>
+              <div class="flex items-baseline justify-between text-sm">
+                <span class="opacity-70">Hoje:</span>
+                <span class="text-base font-bold">{{ stats.today }}</span>
+              </div>
+              <div class="mt-1 flex items-baseline justify-between text-sm">
+                <span class="opacity-70">Semana:</span>
+                <span class="text-base font-bold">{{ stats.week }}</span>
+              </div>
+            </div>
+
+            <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-0)]/60 p-3">
+              <div class="mb-2 font-semibold">Tempo de Leitura</div>
+              <div class="flex items-baseline justify-between text-sm">
+                <span class="opacity-70">Médio:</span>
+                <span class="text-base font-bold">{{ stats.readingAvg }}</span>
+              </div>
+              <div class="mt-2 text-xs opacity-70">Baseado no ritmo recente</div>
+            </div>
+
+            <div class="col-span-2 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-0)]/60 p-3">
+              <div class="mb-2 font-semibold">Pendências</div>
+              <div class="flex items-baseline justify-between text-sm">
+                <span class="opacity-70">Itens:</span>
+                <span class="text-base font-bold text-[var(--orange-500)]">{{ stats.pending }}</span>
+              </div>
+              <Button
+                label="Ver mais"
+                icon="pi pi-arrow-right"
+                link
+                class="mt-1 p-0"
+                @click="openPending"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 shadow-sm">
+          <Button
+            label="Novo Atendimento"
+            icon="pi pi-plus"
+            class="w-full rounded-full"
+            @click="onCreateFromButton"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Month Picker -->
+    <Dialog v-model:visible="monthPickerVisible" modal header="Escolher mês" :style="{ width: '420px' }">
+      <div class="p-2">
+        <Calendar v-model="monthPickerDate" view="month" dateFormat="mm/yy" class="w-full" />
+        <div class="mt-3 flex justify-end gap-2">
+          <Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="monthPickerVisible = false" />
+          <Button label="Ir" class="rounded-full" @click="applyMonthPick" />
+        </div>
+      </div>
+    </Dialog>
+
+    <!-- Block Dialog (placeholder) -->
+    <Dialog v-model:visible="blockDialogVisible" modal :header="blockDialogHeader" :style="{ width: '520px' }">
+      <div class="p-2">
+        <div class="mb-3 text-sm opacity-70">
+          Aqui você pluga o seu fluxo real de bloqueio (agenda inteira ou intervalo), salvando no banco e refletindo no calendário.
+        </div>
+
+        <div class="grid">
+          <div class="col-12 md:col-6">
+            <FloatLabel>
+              <Calendar id="blockStart" v-model="blockStart" showTime hourFormat="24" class="w-full" />
+              <label for="blockStart">Início</label>
+            </FloatLabel>
+          </div>
+          <div class="col-12 md:col-6">
+            <FloatLabel>
+              <Calendar id="blockEnd" v-model="blockEnd" showTime hourFormat="24" class="w-full" />
+              <label for="blockEnd">Fim</label>
+            </FloatLabel>
+          </div>
+          <div class="col-12">
+            <FloatLabel>
+              <InputText id="blockReason" v-model="blockReason" class="w-full" />
+              <label for="blockReason">Motivo (opcional)</label>
+            </FloatLabel>
+          </div>
+        </div>
+
+        <div class="mt-4 flex justify-end gap-2">
+          <Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="blockDialogVisible = false" />
+          <Button label="Bloquear" icon="pi pi-lock" class="rounded-full" @click="confirmBlock" />
+        </div>
+      </div>
+    </Dialog>
+
+    <!-- Dialog real -->
+    <AgendaEventDialog
+      v-model="dialogOpen"
+      :eventRow="dialogEventRow"
+      :initialStartISO="dialogStartISO"
+      :initialEndISO="dialogEndISO"
+      :ownerId="ownerId"
+      @save="onDialogSave"
+      @delete="onDialogDelete"
+    />
+  </div>
+</template>
+
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 
-import AgendaEventDialog from '../components/AgendaEventDialog.vue'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Calendar from 'primevue/calendar'
+import InputText from 'primevue/inputtext'
+import FloatLabel from 'primevue/floatlabel'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import SelectButton from 'primevue/selectbutton'
+import SplitButton from 'primevue/splitbutton'
 
-import AgendaToolbar from '../components/AgendaToolbar.vue'
-import AgendaCalendar from '../components/AgendaCalendar.vue'
-import AgendaRightPanel from '../components/AgendaRightPanel.vue'
-import AgendaNextSessionsCardList from '../components/cards/AgendaNextSessionsCardList.vue'
-import AgendaPulseCardGrid from '../components/cards/AgendaPulseCardGrid.vue'
+import FullCalendar from '@fullcalendar/vue3'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import ptBrLocale from '@fullcalendar/core/locales/pt-br'
 
-import { useAgendaSettings } from '../composables/useAgendaSettings'
-import { useAgendaEvents } from '../composables/useAgendaEvents'
+/**
+ * Dialog “real”
+ */
+import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue'
+
+/**
+ * Composables / serviços
+ */
+import { useAgendaSettings } from '@/features/agenda/composables/useAgendaSettings'
+import { useAgendaEvents } from '@/features/agenda/composables/useAgendaEvents'
 import {
   mapAgendaEventosToCalendarEvents,
-  buildNextSessions,
   buildWeeklyBreakBackgroundEvents,
   calcDefaultSlotDuration,
   minutesToDuration
-} from '../services/agendaMappers'
+} from '@/features/agenda/services/agendaMappers'
 
+const router = useRouter()
 const toast = useToast()
 
 // -----------------------------
-// State
+// Dados reais (settings + events)
 // -----------------------------
-const view = ref('day') // 'day' | 'week'
-const mode = ref('work_hours') // 'full_24h' | 'work_hours'
-const searchQuery = ref('')
+const { error: settingsError, settings, load: loadSettings } = useAgendaSettings()
+const { error: eventsError, rows, loadMyRange, create, update, remove } = useAgendaEvents()
 
-const calendarRef = ref(null)
+const ownerId = computed(() => settings.value?.owner_id || '')
 
-const { loading: loadingSettings, error: settingsError, settings, load: loadSettings } = useAgendaSettings()
-const { loading: loadingEvents, error: eventsError, rows, loadMyRange, create, update, remove } = useAgendaEvents()
+// Range atual
+const currentRange = ref({ start: null, end: null })
 
+// -----------------------------
+// Topbar state
+// -----------------------------
+const onlySessions = ref(true)
+const calendarView = ref('day') // day | week | month
+const timeMode = ref('my') // 24 | 12 | my
+const search = ref('')
+
+// Mini calendário
+const miniDate = ref(new Date())
+
+// Month picker
+const monthPickerVisible = ref(false)
+const monthPickerDate = ref(new Date())
+
+// Cards (mock)
+const stats = ref({ today: 18, week: 124, readingAvg: '45min', pending: 3 })
+
+// -----------------------------
+// Opções UI
+// -----------------------------
+const onlySessionsOptions = [
+  { label: 'Apenas Sessões', value: true },
+  { label: 'Tudo', value: false }
+]
+const viewOptions = [
+  { label: 'Dia', value: 'day' },
+  { label: 'Semana', value: 'week' },
+  { label: 'Mês', value: 'month' }
+]
+const timeModeOptions = [
+  { label: '24h', value: '24' },
+  { label: '12h', value: '12' },
+  { label: 'Meu Horário', value: 'my' }
+]
+
+// -----------------------------
+// Dialog
+// -----------------------------
 const dialogOpen = ref(false)
 const dialogEventRow = ref(null)
 const dialogStartISO = ref('')
 const dialogEndISO = ref('')
-const currentRange = ref({ start: null, end: null })
-
-// Range atual (FullCalendar)
-const currentRange = ref({ start: new Date(), end: new Date() })
 
 // -----------------------------
-// Derived: settings -> calendar behavior
+// Calendário (FullCalendar)
 // -----------------------------
+const fcRef = ref(null)
+const currentDate = ref(new Date())
+
+const fcKey = computed(() => `${calendarView.value}-${timeMode.value}`)
 const timezone = computed(() => settings.value?.timezone || 'America/Sao_Paulo')
 
 const slotDuration = computed(() => {
@@ -55,175 +398,201 @@ const slotDuration = computed(() => {
   return calcDefaultSlotDuration(settings.value)
 })
 
-// work hours recorte (visual)
 const slotMinTime = computed(() => {
-  if (!settings.value) return '06:00:00'
-  // Se estiver no modo "work_hours", você quer mostrar um pouco antes
-  // Aqui respeitamos admin_inicio_visualizacao se usar_horario_admin_custom estiver true,
-  // senão tentamos agenda_custom_start, senão default.
+  if (timeMode.value === '24') return '00:00:00'
+  if (timeMode.value === '12') return '06:00:00'
   const s = settings.value
   const base =
-    (s.usar_horario_admin_custom && s.admin_inicio_visualizacao) ||
-    s.agenda_custom_start ||
-    '06:00:00'
-
-  // padding -1h
+    (s?.usar_horario_admin_custom && s?.admin_inicio_visualizacao) ||
+    s?.agenda_custom_start ||
+    '08:00:00'
   return padTime(base, -60)
 })
 
 const slotMaxTime = computed(() => {
-  if (!settings.value) return '22:00:00'
+  if (timeMode.value === '24') return '24:00:00'
+  if (timeMode.value === '12') return '22:00:00'
   const s = settings.value
   const base =
-    (s.usar_horario_admin_custom && s.admin_fim_visualizacao) ||
-    s.agenda_custom_end ||
-    '22:00:00'
-
-  // padding +1h
+    (s?.usar_horario_admin_custom && s?.admin_fim_visualizacao) ||
+    s?.agenda_custom_end ||
+    '18:00:00'
   return padTime(base, +60)
 })
 
-// business hours “verdadeiro” (sem padding)
 const businessHours = computed(() => {
-  if (!settings.value) return []
+  if (timeMode.value === '24') return []
   const s = settings.value
-
   const start =
-    (s.usar_horario_admin_custom && s.admin_inicio_visualizacao) ||
-    s.agenda_custom_start ||
+    (s?.usar_horario_admin_custom && s?.admin_inicio_visualizacao) ||
+    s?.agenda_custom_start ||
     '08:00:00'
-
   const end =
-    (s.usar_horario_admin_custom && s.admin_fim_visualizacao) ||
-    s.agenda_custom_end ||
+    (s?.usar_horario_admin_custom && s?.admin_fim_visualizacao) ||
+    s?.agenda_custom_end ||
     '18:00:00'
-
-  // Semana inteira (você pode trocar isso pra algo vindo de agenda_regras_semanais depois)
-  return [
-    { daysOfWeek: [1,2,3,4,5], startTime: start, endTime: end }
-  ]
+  return [{ daysOfWeek: [1, 2, 3, 4, 5], startTime: start, endTime: end }]
 })
 
-// Eventos do banco -> FullCalendar
-const calendarEvents = computed(() => {
-  const base = mapAgendaEventosToCalendarEvents(rows.value || [])
+const fcViewName = computed(() => {
+  if (calendarView.value === 'day') return 'timeGridDay'
+  if (calendarView.value === 'week') return 'timeGridWeek'
+  return 'dayGridMonth'
+})
 
-  // Pausas semanais (jsonb) -> background events
-  const breaks = settings.value
-    ? buildWeeklyBreakBackgroundEvents(
-        settings.value.pausas_semanais,
-        currentRange.value.start,
-        currentRange.value.end
-      )
-    : []
+const filteredRows = computed(() => {
+  const list = rows.value || []
+  const q = (search.value || '').trim().toLowerCase()
+
+  return list.filter(r => {
+    const tipo = String(r.tipo || '').toLowerCase()
+    const titulo = String(r.titulo || '').toLowerCase()
+    const obs = String(r.observacoes || '').toLowerCase()
+
+    if (onlySessions.value && !tipo.includes('sess')) return false
+    if (q && !(titulo.includes(q) || obs.includes(q))) return false
+    return true
+  })
+})
+
+const calendarEvents = computed(() => {
+  const base = mapAgendaEventosToCalendarEvents(filteredRows.value || [])
+
+  const breaks =
+    settings.value && currentRange.value.start && currentRange.value.end
+      ? buildWeeklyBreakBackgroundEvents(
+          settings.value.pausas_semanais,
+          currentRange.value.start,
+          currentRange.value.end
+        )
+      : []
 
   return [...base, ...breaks]
 })
 
-// Cards de próximas sessões
-const nextSessions = computed(() => buildNextSessions(rows.value || []))
+const visibleTitle = computed(() => {
+  const d = currentDate.value
+  const month = d.toLocaleDateString('pt-BR', { month: 'long' })
+  const year = d.getFullYear()
+  return `${capitalize(month)} ${year}`
+})
 
-// Pulse stats (bem inicial, mas já útil)
-const pulseStats = computed(() => {
-  const list = rows.value || []
-  const totalSessions = list.filter(r => (r.tipo || '').toLowerCase().includes('sess')).length
-  const totalMinutes = list.reduce((acc, r) => {
-    const ms = new Date(r.fim_em).getTime() - new Date(r.inicio_em).getTime()
-    return acc + Math.max(0, Math.round(ms / 60000))
-  }, 0)
+const subtitlePrefix = computed(() => (calendarView.value === 'month' ? '' : ' '))
+const subtitleText = computed(() => {
+  if (calendarView.value === 'month') return visibleTitle.value
+  const d = currentDate.value
+  const weekday = d.toLocaleDateString('pt-BR', { weekday: 'long' })
+  const day = d.getDate()
+  const month = d.toLocaleDateString('pt-BR', { month: 'long' })
+  return `${capitalize(weekday)}, ${day} de ${capitalize(month)}`
+})
 
-  const pending = list.filter(r => (r.status || '').toLowerCase().includes('pend')).length
-  const reschedules = list.filter(r => (r.status || '').toLowerCase().includes('remarc')).length
-  const attentions = pending + reschedules
+const fcOptions = computed(() => ({
+  plugins: [timeGridPlugin, dayGridPlugin, interactionPlugin],
+  locale: ptBrLocale,
+  timeZone: timezone.value,
 
-  // Sugerir encaixes (placeholder): depois vamos calcular via gaps no range.
-  const suggested1 = '—'
-  const suggested2 = '—'
+  headerToolbar: false,
+  initialView: 'timeGridDay',
 
-  const nextBreak = '—' // depois calculamos pela pausa semanal + "agora"
+  nowIndicator: true,
+  editable: true,
+  selectable: true,
+  selectMirror: true,
 
-  return {
-    totalSessions,
-    totalMinutes,
-    biggestFreeWindow: '—',
-    pending,
-    reschedules,
-    attentions,
-    suggested1,
-    suggested2,
-    nextBreak
+  slotMinTime: slotMinTime.value,
+  slotMaxTime: slotMaxTime.value,
+  slotDuration: slotDuration.value,
+  slotLabelInterval: '01:00',
+  expandRows: true,
+  height: 'auto',
+
+  dayMaxEvents: true,
+  weekends: true,
+
+  businessHours: businessHours.value,
+  events: calendarEvents.value,
+
+  datesSet: async (arg) => {
+    const api = getApi()
+    const cd = api?.getDate?.()
+    const fallback = arg?.start ? new Date(arg.start) : new Date()
+    currentDate.value = cd ? new Date(cd) : fallback
+    miniDate.value = new Date(currentDate.value)
+
+    const start = arg?.start
+    const end = arg?.end
+    if (start && end) {
+      currentRange.value = { start, end }
+      await loadMyRange(new Date(start).toISOString(), new Date(end).toISOString())
+      if (eventsError.value) {
+        toast.add({ severity: 'warn', summary: 'Compromissos', detail: eventsError.value, life: 4500 })
+      }
+    }
+  },
+
+  select: (selection) => onSelectTime(selection),
+  eventClick: (info) => onEventClick(info),
+
+  eventDrop: (info) => persistMoveOrResize(info, 'Movido'),
+  eventResize: (info) => persistMoveOrResize(info, 'Redimensionado'),
+
+  eventClassNames: (arg) => {
+    const tipo = String(arg?.event?.extendedProps?.tipo || arg?.event?.extendedProps?.kind || '').toLowerCase()
+    if (tipo.includes('sess')) return ['evt-session']
+    if (tipo.includes('bloq')) return ['evt-block']
+    return []
   }
+}))
+
+function getApi () {
+  return fcRef.value?.getApi?.() || null
+}
+
+watch(calendarView, async () => {
+  await nextTick()
+  getApi()?.changeView?.(fcViewName.value)
 })
 
 // -----------------------------
-// Lifecycle
+// Ações Topbar
 // -----------------------------
-onMounted(async () => {
-  await loadSettings()
-  if (settingsError.value) {
-    toast.add({ severity: 'warn', summary: 'Agenda', detail: settingsError.value, life: 4500 })
+function goToday () { getApi()?.today?.() }
+function goPrev () { getApi()?.prev?.() }
+function goNext () { getApi()?.next?.() }
+
+function toggleMonthPicker () {
+  monthPickerDate.value = new Date(currentDate.value)
+  monthPickerVisible.value = true
+}
+
+async function applyMonthPick () {
+  monthPickerVisible.value = false
+  await nextTick()
+  getApi()?.gotoDate?.(monthPickerDate.value)
+}
+
+function onMiniPick (d) {
+  if (!d) return
+  getApi()?.gotoDate?.(d)
+}
+
+function miniPrevMonth () { miniDate.value = shiftMonth(miniDate.value, -1) }
+function miniNextMonth () { miniDate.value = shiftMonth(miniDate.value, +1) }
+
+function onCreateFromButton () {
+  if (!ownerId.value) {
+    toast.add({ severity: 'warn', summary: 'Agenda', detail: 'Aguarde carregar as configurações da agenda.', life: 3000 })
+    return
   }
-  // aplica modo inicial vindo da config
-  if (settings.value?.agenda_view_mode) {
-    mode.value = settings.value.agenda_view_mode === 'full_24h' ? 'full_24h' : 'work_hours'
-  }
-})
 
-// -----------------------------
-// Actions: toolbar
-// -----------------------------
-function onToday() { calendarRef.value?.goToday?.() }
-function onPrev() { calendarRef.value?.prev?.() }
-function onNext() { calendarRef.value?.next?.() }
+  const durMin = settings.value?.session_duration_min ?? settings.value?.duracao_padrao_minutos ?? 50
+  const now = new Date()
 
-function onChangeView(v) {
-  view.value = v
-  calendarRef.value?.setView?.(v)
-}
-
-function onToggleMode(m) {
-  mode.value = m
-}
-
-function onSearch(q) {
-  searchQuery.value = q || ''
-  // Por enquanto a busca não filtra o FullCalendar (isso exige requery ou filtro local).
-  // Vamos plugar isso quando tiver patient join e título mais rico.
-}
-
-function onCreateSession() {
-  toast.add({ severity: 'info', summary: 'Nova sessão', detail: 'Abrir modal de criação (próximo passo).', life: 2500 })
-}
-function onCreateBlock() {
-  toast.add({ severity: 'info', summary: 'Bloquear horário', detail: 'Abrir modal de bloqueio (próximo passo).', life: 2500 })
-}
-
-const staffCols = computed(() => (staff.value || [])
-  .filter(s => typeof s.user_id === 'string' && s.user_id && s.user_id !== 'null' && s.user_id !== 'undefined')
-  .map(s => ({
-    id: s.user_id,
-    title: s.full_name || s.nome || s.name || s.email || 'Profissional'
-  }))
-)
-
-const ownerIds = computed(() => staffCols.value.map(s => s.id))
-
-const allEvents = computed(() => mapAgendaEventosToCalendarEvents(rows.value || []))
-
-// -----------------------------
-// FullCalendar callbacks
-// -----------------------------
-async function onRangeChange ({ start, end }) {
-  currentRange.value = { start, end }
-
-  const ids = ownerIds.value
-  if (!ids.length) return
-
-  await loadClinicRange(ids, new Date(start).toISOString(), new Date(end).toISOString())
-
-  if (eventsError.value) {
-    toast.add({ severity: 'warn', summary: 'Eventos', detail: eventsError.value, life: 4500 })
-  }
+  dialogEventRow.value = null
+  dialogStartISO.value = now.toISOString()
+  dialogEndISO.value = new Date(now.getTime() + durMin * 60000).toISOString()
+  dialogOpen.value = true
 }
 
 function onSelectTime (selection) {
@@ -267,21 +636,12 @@ async function persistMoveOrResize (info, actionLabel) {
     const id = ev.id
     const startISO = ev.start ? ev.start.toISOString() : null
     const endISO = ev.end ? ev.end.toISOString() : null
-
-    if (!startISO || !endISO) throw new Error('Evento sem start/end.')
+    if (!startISO || !endISO) throw new Error('Compromisso sem start/end.')
 
     await update(id, { inicio_em: startISO, fim_em: endISO })
-
-    toast.add({
-      severity: 'success',
-      summary: actionLabel,
-      detail: 'Alteração salva.',
-      life: 1800
-    })
+    toast.add({ severity: 'success', summary: actionLabel, detail: 'Alteração salva.', life: 1800 })
   } catch (e) {
-    // desfaz no calendário
     info?.revert?.()
-
     toast.add({
       severity: 'warn',
       summary: 'Erro',
@@ -291,70 +651,45 @@ async function persistMoveOrResize (info, actionLabel) {
   }
 }
 
-function onEventDrop (info) {
-  persistMoveOrResize(info, 'Movido')
+function refetch () {
+  if (currentRange.value.start && currentRange.value.end) {
+    loadMyRange(
+      new Date(currentRange.value.start).toISOString(),
+      new Date(currentRange.value.end).toISOString()
+    )
+  }
+  toast.add({ severity: 'info', summary: 'Agenda', detail: 'Recarregando…', life: 1500 })
 }
 
-function onEventResize (info) {
-  persistMoveOrResize(info, 'Redimensionado')
+function goSettings () {
+  router.push({ path: '/configuracoes/agenda' })
 }
 
-function onOpenFromCard (it) {
-  toast.add({
-    severity: 'info',
-    summary: 'Evento',
-    detail: it?.title || 'Evento',
-    life: 2500
-  })
-}
-
-function onConfirmFromCard () {
-  toast.add({
-    severity: 'success',
-    summary: 'Confirmar',
-    detail: 'Ação de confirmar (próximo passo: update no banco).',
-    life: 2500
-  })
-}
-
-function onRescheduleFromCard () {
-  toast.add({
-    severity: 'info',
-    summary: 'Remarcar',
-    detail: 'Ação de remarcar (próximo passo: fluxo de reagendamento).',
-    life: 2500
-  })
+function openPending () {
+  toast.add({ severity: 'warn', summary: 'Pendências', detail: 'Abrir lista de pendências (placeholder)', life: 2200 })
 }
 
 // -----------------------------
-// Utils
+// Dialog actions
 // -----------------------------
-function padTime(hhmmss, deltaMin) {
-  // hh:mm:ss
-  const [hh, mm, ss] = String(hhmmss || '00:00:00').split(':').map(Number)
-  let total = (hh * 60 + mm) + deltaMin
-  if (total < 0) total = 0
-  if (total > 24 * 60) total = 24 * 60
-  return minutesToDuration(total)
-}
-
 async function onDialogSave ({ id, payload }) {
   try {
     if (id) {
       await update(id, payload)
-      toast.add({ severity: 'success', summary: 'Salvo', detail: 'Evento atualizado.', life: 2500 })
+      toast.add({ severity: 'success', summary: 'Salvo', detail: 'Compromisso atualizado.', life: 2500 })
     } else {
       await create(payload)
-      toast.add({ severity: 'success', summary: 'Criado', detail: 'Evento criado.', life: 2500 })
+      toast.add({ severity: 'success', summary: 'Criado', detail: 'Compromisso criado.', life: 2500 })
     }
 
     dialogOpen.value = false
 
-    // recarrega o range atual
-    await loadMyRange(
-      new Date(currentRange.value.start).toISOString(),
-      new Date(currentRange.value.end).toISOString()
-    )
+    if (currentRange.value.start && currentRange.value.end) {
+      await loadMyRange(
+        new Date(currentRange.value.start).toISOString(),
+        new Date(currentRange.value.end).toISOString()
+      )
+    }
   } catch (e) {
     toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || 'Falha ao salvar.', life: 4500 })
   }
@@ -363,87 +698,88 @@ async function onDialogSave ({ id, payload }) {
 async function onDialogDelete (id) {
   try {
     await remove(id)
-    toast.add({ severity: 'success', summary: 'Excluído', detail: 'Evento removido.', life: 2500 })
+    toast.add({ severity: 'success', summary: 'Excluído', detail: 'Compromisso removido.', life: 2500 })
 
     dialogOpen.value = false
-    await loadMyRange(
-      new Date(currentRange.value.start).toISOString(),
-      new Date(currentRange.value.end).toISOString()
-    )
+
+    if (currentRange.value.start && currentRange.value.end) {
+      await loadMyRange(
+        new Date(currentRange.value.start).toISOString(),
+        new Date(currentRange.value.end).toISOString()
+      )
+    }
   } catch (e) {
     toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || 'Falha ao excluir.', life: 4500 })
   }
 }
-</script>
 
-<template>
-  <div class="p-4 md:p-6">
-    <Toast />
+// -----------------------------
+// Bloqueio (placeholder)
+// -----------------------------
+const blockDialogVisible = ref(false)
+const blockMode = ref('range')
+const blockStart = ref(new Date())
+const blockEnd = ref(new Date())
+const blockReason = ref('')
 
-    <AgendaToolbar
-      title="Minha agenda"
-      :view="view"
-      :mode="mode"
-      @today="onToday"
-      @prev="onPrev"
-      @next="onNext"
-      @changeView="onChangeView"
-      @toggleMode="onToggleMode"
-      @createSession="onCreateSession"
-      @createBlock="onCreateBlock"
-      @search="onSearch"
-    />
+const blockDialogHeader = computed(() => (blockMode.value === 'day' ? 'Bloquear o dia inteiro' : 'Bloquear horário'))
 
-    <div class="grid gap-3 md:gap-4" style="grid-template-columns: 1fr; align-items: stretch;">
-      <div class="grid gap-3 md:gap-4 md:grid-cols-[1fr_380px]">
-        <!-- LEFT: Calendar -->
-        <AgendaCalendar
-          ref="calendarRef"
-          :view="view"
-          :mode="mode"
-          :timezone="timezone"
-          :slotDuration="slotDuration"
-          :slotMinTime="slotMinTime"
-          :slotMaxTime="slotMaxTime"
-          :businessHours="businessHours"
-          :events="calendarEvents"
-          :loading="loadingSettings || loadingEvents"
-          @rangeChange="onRangeChange"
-          @selectTime="onSelectTime"
-          @eventClick="onEventClick"
-          @eventDrop="onEventDrop"
-          @eventResize="onEventResize"
-        />
+const blockMenuItems = [
+  { label: 'Bloquear horário', icon: 'pi pi-clock', command: () => openBlockDialog('range') },
+  { label: 'Bloquear o dia inteiro', icon: 'pi pi-calendar-times', command: () => openBlockDialog('day') }
+]
 
-        <!-- RIGHT: Panel -->
-        <AgendaRightPanel>
-          <template #top>
-            <AgendaNextSessionsCardList
-			  :items="nextSessions"
-			  @open="onOpenFromCard"
-			  @confirm="onConfirmFromCard"
-			  @reschedule="onRescheduleFromCard"
-			/>
-          </template>
+function openBlockDialog (mode) {
+  blockMode.value = mode
+  const now = new Date()
+  blockStart.value = now
+  blockEnd.value = new Date(now.getTime() + 60 * 60 * 1000)
+  blockReason.value = ''
+  blockDialogVisible.value = true
+}
 
-          <template #bottom>
-            <AgendaPulseCardGrid
-              :stats="pulseStats"
-              @quickBlock="onCreateBlock"
-              @quickCreate="onCreateSession"
-            />
-          </template>
-        </AgendaRightPanel>
-      </div>
-    </div>
-	<AgendaEventDialog
-	  v-model="dialogOpen"
-	  :eventRow="dialogEventRow"
-	  :initialStartISO="dialogStartISO"
-	  :initialEndISO="dialogEndISO"
-	  :ownerId="(settings?.owner_id || '')"
-	  @save="onDialogSave"
-	  @delete="onDialogDelete"
-	/>
-  </div>
-</template>
\ No newline at end of file
+function confirmBlock () {
+  blockDialogVisible.value = false
+  toast.add({
+    severity: 'success',
+    summary: 'Bloqueado',
+    detail: blockMode.value === 'day' ? 'Dia inteiro bloqueado' : 'Intervalo bloqueado',
+    life: 2500
+  })
+}
+
+// -----------------------------
+// Helpers
+// -----------------------------
+function shiftMonth (date, delta) {
+  const d = new Date(date)
+  d.setMonth(d.getMonth() + delta)
+  return d
+}
+
+function capitalize (s) {
+  if (!s) return s
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+function padTime (hhmmss, deltaMin) {
+  const [hh, mm] = String(hhmmss || '00:00:00').split(':').map(Number)
+  let total = (hh * 60 + mm) + deltaMin
+  if (total < 0) total = 0
+  if (total > 24 * 60) total = 24 * 60
+  return minutesToDuration(total)
+}
+
+onMounted(async () => {
+  await loadSettings()
+
+  if (settingsError.value) {
+    toast.add({ severity: 'warn', summary: 'Agenda', detail: settingsError.value, life: 4500 })
+  }
+
+  // opcional: refletir modo salvo no banco
+  // if (settings.value?.agenda_view_mode) {
+  //   timeMode.value = settings.value.agenda_view_mode === 'full_24h' ? '24' : 'my'
+  // }
+})
+</script>
\ No newline at end of file
diff --git a/src/features/agenda/services/agendaRepository.js b/src/features/agenda/services/agendaRepository.js
index a719881..e33ebde 100644
--- a/src/features/agenda/services/agendaRepository.js
+++ b/src/features/agenda/services/agendaRepository.js
@@ -1,12 +1,28 @@
 // src/features/agenda/services/agendaRepository.js
 import { supabase } from '@/lib/supabase/client'
+import { useTenantStore } from '@/stores/tenantStore'
 
-export async function getMyAgendaSettings () {
+function assertValidTenantId (tenantId) {
+  if (!tenantId || tenantId === 'null' || tenantId === 'undefined') {
+    throw new Error('Tenant ativo inválido. Selecione a clínica/tenant antes de carregar a agenda.')
+  }
+}
+
+async function getUid () {
   const { data: userRes, error: userErr } = await supabase.auth.getUser()
   if (userErr) throw userErr
 
   const uid = userRes?.user?.id
   if (!uid) throw new Error('Usuário não autenticado.')
+  return uid
+}
+
+/**
+ * Configurações da agenda (por owner)
+ * Se você decidir que configurações são por tenant também, adicionamos tenant_id aqui.
+ */
+export async function getMyAgendaSettings () {
+  const uid = await getUid()
 
   const { data, error } = await supabase
     .from('agenda_configuracoes')
@@ -18,16 +34,23 @@ export async function getMyAgendaSettings () {
   return data
 }
 
-export async function listMyAgendaEvents ({ startISO, endISO }) {
-  const { data: userRes, error: userErr } = await supabase.auth.getUser()
-  if (userErr) throw userErr
+/**
+ * Lista agenda do terapeuta (somente do owner logado) dentro do tenant ativo.
+ * Isso impede misturar eventos caso o terapeuta atue em múltiplas clínicas.
+ */
+export async function listMyAgendaEvents ({ startISO, endISO, tenantId: tenantIdArg } = {}) {
+  const uid = await getUid()
 
-  const uid = userRes?.user?.id
-  if (!uid) throw new Error('Usuário não autenticado.')
+  const tenantStore = useTenantStore()
+  const tenantId = tenantIdArg || tenantStore.activeTenantId
+  assertValidTenantId(tenantId)
+
+  if (!startISO || !endISO) throw new Error('Intervalo inválido (startISO/endISO).')
 
   const { data, error } = await supabase
     .from('agenda_eventos')
     .select('*')
+    .eq('tenant_id', tenantId)
     .eq('owner_id', uid)
     .gte('inicio_em', startISO)
     .lt('inicio_em', endISO)
@@ -37,13 +60,26 @@ export async function listMyAgendaEvents ({ startISO, endISO }) {
   return data || []
 }
 
-export async function listClinicEvents ({ ownerIds, startISO, endISO }) {
+/**
+ * Lista eventos para mosaico da clínica (admin/secretaria) dentro de um tenant específico.
+ * IMPORTANTE: SEM tenant_id aqui vira vazamento multi-tenant.
+ */
+export async function listClinicEvents ({ tenantId, ownerIds, startISO, endISO }) {
+  assertValidTenantId(tenantId)
   if (!ownerIds?.length) return []
+  if (!startISO || !endISO) throw new Error('Intervalo inválido (startISO/endISO).')
+
+  // Sanitiza ownerIds
+  const safeOwnerIds = ownerIds
+    .filter(id => typeof id === 'string' && id && id !== 'null' && id !== 'undefined')
+
+  if (!safeOwnerIds.length) return []
 
   const { data, error } = await supabase
     .from('agenda_eventos')
     .select('*')
-    .in('owner_id', ownerIds)
+    .eq('tenant_id', tenantId)
+    .in('owner_id', safeOwnerIds)
     .gte('inicio_em', startISO)
     .lt('inicio_em', endISO)
     .order('inicio_em', { ascending: true })
@@ -53,7 +89,7 @@ export async function listClinicEvents ({ ownerIds, startISO, endISO }) {
 }
 
 export async function listTenantStaff (tenantId) {
-  if (!tenantId || tenantId === 'null' || tenantId === 'undefined') return []
+  assertValidTenantId(tenantId)
 
   const { data, error } = await supabase
     .from('v_tenant_staff')
@@ -64,10 +100,33 @@ export async function listTenantStaff (tenantId) {
   return data || []
 }
 
+/**
+ * Criação segura:
+ * - injeta tenant_id do tenantStore
+ * - injeta owner_id do usuário logado (ignora owner_id vindo de fora)
+ *
+ * Observação:
+ * - Para admin/secretária criar para outros owners, o ideal é ter uma função separada
+ *   (ex.: createClinicAgendaEvento) que permita owner_id explicitamente.
+ *   Por enquanto, deixo esta função como "safe default" para terapeuta.
+ */
 export async function createAgendaEvento (payload) {
+  const uid = await getUid()
+  const tenantStore = useTenantStore()
+  const tenantId = tenantStore.activeTenantId
+  assertValidTenantId(tenantId)
+
+  if (!payload) throw new Error('Payload vazio.')
+
+  const insertPayload = {
+    ...payload,
+    tenant_id: tenantId,
+    owner_id: uid
+  }
+
   const { data, error } = await supabase
     .from('agenda_eventos')
-    .insert(payload)
+    .insert(insertPayload)
     .select('*')
     .single()
 
@@ -75,11 +134,24 @@ export async function createAgendaEvento (payload) {
   return data
 }
 
-export async function updateAgendaEvento (id, patch) {
+/**
+ * Atualização segura:
+ * - filtra por id + tenant_id (evita update cruzado por acidente)
+ * RLS deve reforçar isso no banco.
+ */
+export async function updateAgendaEvento (id, patch, { tenantId: tenantIdArg } = {}) {
+  if (!id) throw new Error('ID inválido.')
+  if (!patch) throw new Error('Patch vazio.')
+
+  const tenantStore = useTenantStore()
+  const tenantId = tenantIdArg || tenantStore.activeTenantId
+  assertValidTenantId(tenantId)
+
   const { data, error } = await supabase
     .from('agenda_eventos')
     .update(patch)
     .eq('id', id)
+    .eq('tenant_id', tenantId)
     .select('*')
     .single()
 
@@ -87,12 +159,61 @@ export async function updateAgendaEvento (id, patch) {
   return data
 }
 
-export async function deleteAgendaEvento (id) {
+/**
+ * Delete seguro:
+ * - filtra por id + tenant_id
+ */
+export async function deleteAgendaEvento (id, { tenantId: tenantIdArg } = {}) {
+  if (!id) throw new Error('ID inválido.')
+
+  const tenantStore = useTenantStore()
+  const tenantId = tenantIdArg || tenantStore.activeTenantId
+  assertValidTenantId(tenantId)
+
   const { error } = await supabase
     .from('agenda_eventos')
     .delete()
     .eq('id', id)
+    .eq('tenant_id', tenantId)
 
   if (error) throw error
   return true
+}
+
+// Adicione no mesmo arquivo: src/features/agenda/services/agendaRepository.js
+
+/**
+ * Criação para a área da clínica (admin/secretária):
+ * - exige tenantId explícito (ou cai no tenantStore)
+ * - permite definir owner_id (terapeuta dono do compromisso)
+ *
+ * Segurança real deve ser garantida por RLS:
+ * - clinic_admin/tenant_admin pode criar para qualquer owner dentro do tenant
+ * - therapist não deve conseguir passar daqui (guard + RLS)
+ */
+export async function createClinicAgendaEvento (payload, { tenantId: tenantIdArg } = {}) {
+  const tenantStore = useTenantStore()
+  const tenantId = tenantIdArg || tenantStore.activeTenantId
+  assertValidTenantId(tenantId)
+
+  if (!payload) throw new Error('Payload vazio.')
+
+  const ownerId = payload.owner_id
+  if (!ownerId || ownerId === 'null' || ownerId === 'undefined') {
+    throw new Error('owner_id é obrigatório para criação pela clínica.')
+  }
+
+  const insertPayload = {
+    ...payload,
+    tenant_id: tenantId
+  }
+
+  const { data, error } = await supabase
+    .from('agenda_eventos')
+    .insert(insertPayload)
+    .select('*')
+    .single()
+
+  if (error) throw error
+  return data
 }
\ No newline at end of file
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 8aa981c..0999b5f 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -25,19 +25,38 @@ const { layoutState } = useLayout()
 const tenantStore = useTenantStore()
 const entitlementsStore = useEntitlementsStore()
 
+const tenantId = computed(() => tenantStore.activeTenantId || null)
+
 /**
  * ✅ Role canônico pro MENU:
- * - Prioriza o role do tenant (mesma fonte usada pelo router guard)
- * - Faz fallback pro sessionRole (ex.: telas fora de tenant)
+ * - PRIORIDADE 1: contexto de rota (evita menu errado quando role do tenant atrasa/falha)
+ *   Ex.: /therapist/* => força menu therapist; /admin* => força menu admin
+ * - PRIORIDADE 2: se há tenant ativo: usa role do tenant
+ * - PRIORIDADE 3: fallback pro sessionRole (ex.: telas fora de tenant)
+ *
+ * Motivo: o bug que você descreveu (terapeuta vendo admin.menu) geralmente é:
+ * - tenant role ainda não carregou OU tenantId está null
+ * - sessionRole vem como 'admin'
+ * Então, rota > tenant > session elimina o menu “trocar sozinho”.
  */
 const navRole = computed(() => {
-  return tenantStore.activeRole || sessionRole.value || null
+  const p = String(route.path || '')
+
+  // ✅ blindagem por contexto
+  if (p.startsWith('/therapist')) return 'therapist'
+  if (p.startsWith('/admin') || p.startsWith('/clinic')) return 'clinic_admin'
+  if (p.startsWith('/patient')) return 'patient'
+
+  // ✅ dentro de tenant: confia no role do tenant
+  if (tenantId.value) return tenantStore.activeRole || null
+
+  // ✅ fora de tenant: fallback pro sessionRole
+  return sessionRole.value || null
 })
 
 const model = computed(() => {
-  // ✅ fonte correta: tenant role (clinic_admin/therapist/patient)
-  // fallback: profiles.role (admin/therapist/patient)
-  const effectiveRole = tenantStore.activeRole || sessionRole.value
+  // ✅ role efetivo do menu já vem “canônico” do navRole
+  const effectiveRole = navRole.value
 
   const base = getMenuByRole(effectiveRole, { isSaasAdmin: sessionIsSaasAdmin.value }) || []
 
@@ -52,8 +71,6 @@ const model = computed(() => {
   return [...base].sort((a, b) => priorityOrder(a) - priorityOrder(b))
 })
 
-const tenantId = computed(() => tenantStore.activeTenantId || null)
-
 // quando troca tenant -> recarrega entitlements
 watch(
   tenantId,
@@ -64,7 +81,7 @@ watch(
   { immediate: true }
 )
 
-// ✅ quando troca role efetivo do menu (tenant role / session role) -> recarrega entitlements do tenant atual
+// ✅ quando troca role efetivo do menu (via rota/tenant/session) -> recarrega entitlements do tenant atual
 watch(
   () => navRole.value,
   async () => {
diff --git a/src/navigation/menus/admin.menu.js b/src/navigation/menus/admin.menu.js
index 2fb0667..755f6f8 100644
--- a/src/navigation/menus/admin.menu.js
+++ b/src/navigation/menus/admin.menu.js
@@ -15,16 +15,10 @@ export default function adminMenu (ctx = {}) {
           icon: 'pi pi-fw pi-home',
           to: '/admin'
         },
-        {
-		  label: 'Agenda',
-		  icon: 'pi pi-fw pi-calendar',
-		  to: '/admin/agenda',
-		  feature: 'agenda.view'
-		},
 		{
-		  label: 'Agenda da Clínica',
+		  label: 'Agenda do Terapeuta',
 		  icon: 'pi pi-fw pi-sitemap',
-		  to: '/admin/agenda/clinica',
+		  to: '/therapist/agenda',
 		  feature: 'agenda.view'
 		}
       ]
diff --git a/src/router/guards.js b/src/router/guards.js
index 66cf1a7..6966ab1 100644
--- a/src/router/guards.js
+++ b/src/router/guards.js
@@ -233,7 +233,15 @@ export function applyGuards (router) {
       // - se tem memberships active mas activeTenantId está null -> seta e segue
       if (!tenant.activeTenantId) {
         const mem = Array.isArray(tenant.memberships) ? tenant.memberships : []
-        const firstActive = mem.find(m => m && m.status === 'active' && m.tenant_id)
+
+		// 1) tenta casar role da rota (ex.: therapist) com membership
+		const wantedRoles = Array.isArray(to.meta?.roles) ? to.meta.roles : []
+		const preferred = wantedRoles.length
+		  ? mem.find(m => m && m.status === 'active' && m.tenant_id && wantedRoles.includes(m.role))
+		  : null
+
+		// 2) fallback: primeiro active
+		const firstActive = preferred || mem.find(m => m && m.status === 'active' && m.tenant_id)
 
         if (!firstActive) {
           if (to.path === '/pages/access') { console.timeEnd(tlabel); return true }
@@ -292,15 +300,19 @@ export function applyGuards (router) {
       }
 
       // roles guard (plural)
-      const allowedRoles = to.meta?.roles
-      if (Array.isArray(allowedRoles) && allowedRoles.length) {
-        if (!matchesRoles(allowedRoles, tenant.activeRole)) {
-          const fallback = roleToPath(tenant.activeRole)
-          if (to.path === fallback) { console.timeEnd(tlabel); return { path: '/pages/access' } }
-          console.timeEnd(tlabel)
-          return { path: fallback }
-        }
-      }
+      // Se a rota pede roles específicas e o role ativo não bate,
+		// tenta ajustar o activeRole dentro do mesmo tenant (se houver membership compatível).
+		const allowedRoles = Array.isArray(to.meta?.roles) ? to.meta.roles : null
+		if (allowedRoles && allowedRoles.length && !allowedRoles.includes(tenant.activeRole)) {
+		  const mem = Array.isArray(tenant.memberships) ? tenant.memberships : []
+		  const compatible = mem.find(m =>
+			m && m.status === 'active' && m.tenant_id === tenantId && allowedRoles.includes(m.role)
+		  )
+		  if (compatible) {
+			// muda role ativo para o compatível
+			tenant.activeRole = compatible.role
+		  }
+		}	
 
       // role guard (singular) - mantém compatibilidade
       const requiredRole = to.meta?.role
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index a8b26b6..2486fa6 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -108,6 +108,11 @@ async function onSubmit () {
 
     // ✅ fonte de verdade: tenant_members (rpc my_tenants)
     await tenant.loadSessionAndTenant()
+	
+	console.log('[LOGIN] tenant.user', tenant.user)
+	console.log('[LOGIN] memberships', tenant.memberships)
+	console.log('[LOGIN] activeTenantId', tenant.activeTenantId)
+	console.log('[LOGIN] activeRole', tenant.activeRole)
 
     if (!tenant.user) {
       authError.value = 'Não foi possível obter a sessão após login.'