Ajuste usuarios - Inicio agenda

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>
+</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>