Ajuste em Massa - Paciente, Terapeuta, Clinica e Admin - Inicio agenda

src/features/agenda/components/AgendaToolbar.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+import Button from 'primevue/button'
+import SelectButton from 'primevue/selectbutton'
+import ToggleButton from 'primevue/togglebutton'
+import FloatLabel from 'primevue/floatlabel'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+
+const props = defineProps({
+  title: { type: String, default: 'Agenda' },
+
+  // 'day' | 'week'
+  view: { type: String, default: 'day' },
+
+  // 'full_24h' | 'work_hours'
+  mode: { type: String, default: 'work_hours' },
+
+  showSearch: { type: Boolean, default: true },
+  searchPlaceholder: { type: String, default: ' ' },
+
+  // controla se exibe botões de ação
+  showActions: { type: Boolean, default: true }
+})
+
+const emit = defineEmits([
+  'today',
+  'prev',
+  'next',
+  'changeView',
+  'toggleMode',
+  'createSession',
+  'createBlock',
+  'search'
+])
+
+const viewOptions = [
+  { label: 'Dia', value: 'day' },
+  { label: 'Semana', value: 'week' }
+]
+
+const search = ref('')
+
+watch(search, (v) => emit('search', v))
+
+const modeLabel = computed(() => (props.mode === 'full_24h' ? '24h' : 'Horário'))
+</script>
+
+<template>
+  <div class="mb-4 overflow-hidden rounded-[1.5rem] border border-[var(--surface-border)] bg-[var(--surface-card)]">
+    <div class="p-4 md:p-5 flex flex-col gap-3">
+      <!-- topo -->
+      <div class="flex items-center justify-between gap-3">
+        <div class="min-w-0">
+          <div class="text-lg md:text-xl font-semibold truncate">{{ title }}</div>
+          <div class="text-sm opacity-70">Operação do dia com visão e ação.</div>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <Button label="Hoje" icon="pi pi-calendar" severity="secondary" outlined @click="$emit('today')" />
+          <Button icon="pi pi-chevron-left" severity="secondary" outlined @click="$emit('prev')" />
+          <Button icon="pi pi-chevron-right" severity="secondary" outlined @click="$emit('next')" />
+        </div>
+      </div>
+
+      <!-- controles -->
+      <div class="flex flex-col md:flex-row md:items-center gap-3 md:justify-between">
+        <div class="flex flex-wrap items-center gap-2">
+          <SelectButton
+            :modelValue="view"
+            :options="viewOptions"
+            optionLabel="label"
+            optionValue="value"
+            @update:modelValue="$emit('changeView', $event)"
+          />
+
+          <ToggleButton
+            :modelValue="mode === 'full_24h'"
+            onLabel="24h"
+            offLabel="Horário"
+            @update:modelValue="$emit('toggleMode', $event ? 'full_24h' : 'work_hours')"
+          />
+
+          <div class="text-sm opacity-70">
+            Modo: <b>{{ modeLabel }}</b>
+          </div>
+        </div>
+
+        <div class="flex flex-col md:flex-row items-stretch md:items-center gap-2">
+          <template v-if="showActions">
+            <Button label="Nova sessão" icon="pi pi-plus" @click="$emit('createSession')" />
+            <Button label="Bloquear" icon="pi pi-lock" severity="secondary" outlined @click="$emit('createBlock')" />
+          </template>
+
+          <div v-if="showSearch" class="md:w-72 w-full">
+            <FloatLabel>
+              <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText
+                  id="agendaSearch"
+                  class="w-full"
+                  v-model="search"
+                  :placeholder="searchPlaceholder"
+                />
+              </IconField>
+              <label for="agendaSearch">Buscar por paciente/título</label>
+            </FloatLabel>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>