Documentos + Templates + Relatorios nativas (so resta online-scheduling)
Promove '/melissa/documentos', '/melissa/documentos-templates' e '/melissa/relatorios' do embed pra paginas nativas Melissa. MelissaDocumentos (~700L): - Sidebar com stats (Total / Tamanho / Tipos / Pendentes amber) + filtro Tipo (Select com TIPOS_DOCUMENTO 11 opcoes) + filtro Tag (Select dinamico com usedTags) + footer fixo Limpar filtros - Main: toolbar busca + lista de DocumentCard (componente reusado) - Modo "todos os pacientes" — patientId null. Upload/Gerar exigem abrir paciente especifico no prontuario (botoes nao aparecem). - Dialogs reusados: PreviewDialog + SignatureDialog + ShareDialog + ConfirmDialog (delete). MelissaDocumentosTemplates (~700L): - Layout 1-col empilhado, 3 views: list / create / edit - Header com botao "Novo template" (list) ou "Cancelar/Salvar" (create/edit) + back button - 2 sections distintas: "Templates padrao do sistema" (info-blue, click duplica) e "Meus templates" (accent, click edita + menu de acoes Duplicar/Editar/Desativar) - Cards em grid responsivo (auto-fill 280px), com badge "padrao"/ "inativo" e count de variaveis - DocumentTemplateEditor reusado pra create/edit - ConfirmDialog reusado MelissaRelatorios (~1100L): - Sidebar com 6 stats (Total / Realizadas verde / Faltas red / Canceladas warn / Agendadas info / Taxa realizacao) + filtro Periodo (button list: semana/mes/3meses/6meses) + filtro Status (Realizadas/Faltas/Canceladas/Agendadas com cores) + footer Limpar filtros - Main: card Grafico (Chart.js stacked bar agrupado por semana/mes) + card DataTable de sessoes filtradas (Data/Hora sortable / Paciente / Sessao / Modalidade / Status) - Empty states distintos: sem sessoes no periodo / sem resultado do filtro Logica preservada das paginas originais. Composables/services nao foram tocados — apenas adaptacao do chrome pra blueprint Melissa. DocumentsListPage / DocumentTemplatesPage / RelatoriosPage continuam intactas no layout Rail (/therapist/*, /admin/*). Wire-up MelissaLayout: imports + 3 render blocks + 'documentos', 'documentos-templates', 'relatorios' literais em NON_CONFIG_SLUGS; removidos de MELISSA_EMBED_KEYS. Entries removidos do EMBED_MAP em MelissaEmbed (resta apenas 'online-scheduling'). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -0,0 +1,708 @@
|
||||
<script setup>
|
||||
/*
|
||||
* MelissaDocumentosTemplates — Página nativa Melissa pros templates de
|
||||
* documentos (substitui o embed). 3 views: list / create / edit.
|
||||
*
|
||||
* Layout 1-col empilhado (sem sidebar — separação global/tenant é visual
|
||||
* via cards distintos).
|
||||
*
|
||||
* Lógica idêntica à DocumentTemplatesPage (composable
|
||||
* useDocumentTemplates + DocumentTemplateEditor reusado).
|
||||
*/
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
|
||||
import { useDocumentTemplates } from '@/features/documents/composables/useDocumentTemplates';
|
||||
import DocumentTemplateEditor from '@/features/documents/components/DocumentTemplateEditor.vue';
|
||||
// Button/Menu/Skeleton: auto via PrimeVueResolver
|
||||
import Menu from 'primevue/menu';
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
|
||||
const {
|
||||
templates, loading,
|
||||
globalTemplates, tenantTemplates,
|
||||
TIPOS_TEMPLATE,
|
||||
fetchTemplates, create, update, remove, duplicate
|
||||
} = useDocumentTemplates();
|
||||
|
||||
// ── Views ───────────────────────────────────────────────
|
||||
const view = ref('list');
|
||||
const editingTemplate = ref({});
|
||||
const editingId = ref(null);
|
||||
|
||||
// ── Acoes ───────────────────────────────────────────────
|
||||
function openCreate() {
|
||||
editingId.value = null;
|
||||
editingTemplate.value = {};
|
||||
view.value = 'create';
|
||||
}
|
||||
|
||||
function openEdit(tpl) {
|
||||
if (tpl.is_global) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Somente leitura',
|
||||
detail: 'Templates padrão não podem ser editados. Duplique para personalizar.',
|
||||
life: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
editingId.value = tpl.id;
|
||||
editingTemplate.value = { ...tpl };
|
||||
view.value = 'edit';
|
||||
}
|
||||
|
||||
async function onSave(payload) {
|
||||
try {
|
||||
if (view.value === 'create') {
|
||||
await create(payload);
|
||||
toast.add({ severity: 'success', summary: 'Criado', detail: payload.nome_template, life: 3000 });
|
||||
} else {
|
||||
await update(editingId.value, payload);
|
||||
toast.add({ severity: 'success', summary: 'Salvo', detail: payload.nome_template, life: 3000 });
|
||||
}
|
||||
view.value = 'list';
|
||||
fetchTemplates(true);
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
|
||||
function onDuplicate(tpl) {
|
||||
confirm.require({
|
||||
message: `Deseja copiar "${tpl.nome_template}" para os seus templates? Você poderá editá-lo livremente.`,
|
||||
header: 'Duplicar template',
|
||||
icon: 'pi pi-copy',
|
||||
acceptLabel: 'Copiar',
|
||||
rejectLabel: 'Cancelar',
|
||||
accept: async () => {
|
||||
try {
|
||||
await duplicate(tpl.id);
|
||||
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Meus Templates.`, life: 3000 });
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onDelete(tpl) {
|
||||
confirm.require({
|
||||
message: `Desativar template "${tpl.nome_template}"?`,
|
||||
header: 'Confirmar',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: async () => {
|
||||
try {
|
||||
await remove(tpl.id);
|
||||
toast.add({ severity: 'success', summary: 'Desativado', life: 2000 });
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
view.value = 'list';
|
||||
}
|
||||
|
||||
function tipoLabel(tipo) {
|
||||
return TIPOS_TEMPLATE.find((t) => t.value === tipo)?.label || tipo;
|
||||
}
|
||||
|
||||
// ── Card menu (templates do tenant) ─────────────────────
|
||||
function getCardMenuItems(tpl) {
|
||||
const items = [
|
||||
{ label: 'Duplicar', icon: 'pi pi-copy', command: () => onDuplicate(tpl) }
|
||||
];
|
||||
if (!tpl.is_global) {
|
||||
items.push(
|
||||
{ label: 'Editar', icon: 'pi pi-pencil', command: () => openEdit(tpl) },
|
||||
{ separator: true },
|
||||
{ label: 'Desativar', icon: 'pi pi-trash', class: 'text-red-500', command: () => onDelete(tpl) }
|
||||
);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTemplates(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ConfirmDialog />
|
||||
|
||||
<section class="mdt-page">
|
||||
<header class="mdt-page__head">
|
||||
<div class="mdt-page__title">
|
||||
<button
|
||||
v-if="view !== 'list'"
|
||||
class="mdt-back-btn"
|
||||
v-tooltip.bottom="'Voltar à lista'"
|
||||
@click="view = 'list'"
|
||||
>
|
||||
<i class="pi pi-arrow-left" />
|
||||
</button>
|
||||
<i v-else class="pi pi-file-edit mdt-page__title-icon" />
|
||||
<span>
|
||||
<template v-if="view === 'list'">Templates de documentos</template>
|
||||
<template v-else-if="view === 'create'">Novo template</template>
|
||||
<template v-else>Editar template</template>
|
||||
</span>
|
||||
<span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
|
||||
</div>
|
||||
<div class="mdt-page__actions">
|
||||
<template v-if="view === 'list'">
|
||||
<button
|
||||
class="mdt-act-btn mdt-act-btn--primary"
|
||||
v-tooltip.bottom="'Criar novo template personalizado'"
|
||||
@click="openCreate"
|
||||
>
|
||||
<i class="pi pi-plus" />
|
||||
<span>Novo template</span>
|
||||
</button>
|
||||
<button
|
||||
class="mdt-head-btn"
|
||||
v-tooltip.bottom="'Atualizar'"
|
||||
:disabled="loading"
|
||||
@click="fetchTemplates(true)"
|
||||
>
|
||||
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="mdt-act-btn"
|
||||
@click="view = 'list'"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
<span>Cancelar</span>
|
||||
</button>
|
||||
<button
|
||||
class="mdt-act-btn mdt-act-btn--primary"
|
||||
@click="onSave(editingTemplate)"
|
||||
>
|
||||
<i class="pi pi-check" />
|
||||
<span>{{ view === 'create' ? 'Criar template' : 'Salvar' }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button class="mdt-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Subheader -->
|
||||
<div v-if="view === 'list'" class="mdt-subheader">
|
||||
<i class="pi pi-info-circle mdt-subheader__icon" />
|
||||
<span class="mdt-subheader__text">
|
||||
Modelos reutilizáveis pra <strong>declarações</strong>,
|
||||
<strong>atestados</strong>, <strong>recibos</strong> e outros documentos.
|
||||
Templates padrão são <strong>somente leitura</strong> — duplique pra
|
||||
personalizar.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="mdt-body">
|
||||
<!-- ══ LIST VIEW ══ -->
|
||||
<template v-if="view === 'list'">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading && !templates.length" class="mdt-loading">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<span>Carregando templates…</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="!templates.length" class="mdt-empty">
|
||||
<i class="pi pi-file-edit mdt-empty__icon" />
|
||||
<div class="mdt-empty__title">Nenhum template encontrado</div>
|
||||
<div class="mdt-empty__hint">Crie seu primeiro template personalizado.</div>
|
||||
<button class="mdt-act-btn mdt-act-btn--primary mdt-empty__btn" @click="openCreate">
|
||||
<i class="pi pi-plus" />
|
||||
<span>Criar primeiro template</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Templates globais (padrão) -->
|
||||
<div v-if="globalTemplates.length" class="mdt-section">
|
||||
<div class="mdt-section__head">
|
||||
<div class="mdt-section__title">
|
||||
<i class="pi pi-shield" />
|
||||
<span>Templates padrão do sistema</span>
|
||||
</div>
|
||||
<span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
|
||||
</div>
|
||||
<div class="mdt-grid">
|
||||
<button
|
||||
v-for="tpl in globalTemplates"
|
||||
:key="tpl.id"
|
||||
class="mdt-card mdt-card--global"
|
||||
type="button"
|
||||
@click="onDuplicate(tpl)"
|
||||
>
|
||||
<div class="mdt-card__head">
|
||||
<span class="mdt-card__icon mdt-card__icon--info">
|
||||
<i class="pi pi-file" />
|
||||
</span>
|
||||
<div class="mdt-card__main">
|
||||
<div class="mdt-card__name">{{ tpl.nome_template }}</div>
|
||||
<div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
|
||||
<div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mdt-card__badge mdt-card__badge--info">padrão</span>
|
||||
<div class="mdt-card__hint">
|
||||
<i class="pi pi-copy" />
|
||||
Click pra duplicar e personalizar
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Templates do tenant (meus) -->
|
||||
<div v-if="tenantTemplates.length" class="mdt-section">
|
||||
<div class="mdt-section__head">
|
||||
<div class="mdt-section__title">
|
||||
<i class="pi pi-user-edit" />
|
||||
<span>Meus templates</span>
|
||||
</div>
|
||||
<span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
|
||||
</div>
|
||||
<div class="mdt-grid">
|
||||
<div
|
||||
v-for="tpl in tenantTemplates"
|
||||
:key="tpl.id"
|
||||
class="mdt-card mdt-card--tenant"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="openEdit(tpl)"
|
||||
@keydown.enter.prevent="openEdit(tpl)"
|
||||
>
|
||||
<div class="mdt-card__head">
|
||||
<span class="mdt-card__icon mdt-card__icon--primary">
|
||||
<i class="pi pi-file-edit" />
|
||||
</span>
|
||||
<div class="mdt-card__main">
|
||||
<div class="mdt-card__name">{{ tpl.nome_template }}</div>
|
||||
<div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
|
||||
<div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu de ações -->
|
||||
<div class="mdt-card__menu" @click.stop>
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
text
|
||||
rounded
|
||||
size="small"
|
||||
class="!w-7 !h-7"
|
||||
@click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
|
||||
/>
|
||||
<Menu
|
||||
:ref="`menu_${tpl.id}`"
|
||||
:model="getCardMenuItems(tpl)"
|
||||
:popup="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mdt-card__foot">
|
||||
<span v-if="!tpl.ativo" class="mdt-card__badge mdt-card__badge--inactive">
|
||||
inativo
|
||||
</span>
|
||||
<span class="mdt-card__vars">
|
||||
<i class="pi pi-code" />
|
||||
{{ tpl.variaveis?.length || 0 }} variáveis
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- ══ CREATE / EDIT VIEW ══ -->
|
||||
<template v-if="view === 'create' || view === 'edit'">
|
||||
<DocumentTemplateEditor
|
||||
v-model="editingTemplate"
|
||||
:mode="view"
|
||||
@save="onSave"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ─── Page chrome ─── */
|
||||
.mdt-page {
|
||||
position: absolute;
|
||||
inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--m-bg-medium);
|
||||
backdrop-filter: blur(32px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
color: var(--m-text);
|
||||
animation: mdt-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
||||
}
|
||||
@keyframes mdt-page-enter {
|
||||
from { opacity: 0; transform: scale(0.985); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.mdt-page__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
.mdt-page__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.mdt-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
|
||||
.mdt-page__title > span:not(.mdt-page__count) {
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.mdt-page__count {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-accent);
|
||||
background: var(--m-accent-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mdt-back-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.mdt-back-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.mdt-back-btn > i { font-size: 0.85rem; }
|
||||
|
||||
.mdt-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
|
||||
.mdt-close, .mdt-head-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.mdt-close:hover, .mdt-head-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.mdt-head-btn > i { font-size: 0.85rem; }
|
||||
.mdt-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.mdt-act-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
transition: background-color 140ms ease, transform 140ms ease;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
}
|
||||
.mdt-act-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.mdt-act-btn--primary {
|
||||
background: var(--m-accent);
|
||||
border-color: var(--m-accent);
|
||||
color: white;
|
||||
}
|
||||
.mdt-act-btn--primary:hover {
|
||||
background: color-mix(in srgb, var(--m-accent) 88%, white);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.mdt-act-btn > i { font-size: 0.78rem; }
|
||||
|
||||
/* Subheader */
|
||||
.mdt-subheader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
background: var(--m-bg-soft);
|
||||
font-size: 0.78rem;
|
||||
color: var(--m-text-muted);
|
||||
line-height: 1.45;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mdt-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
|
||||
.mdt-subheader__text { flex: 1; min-width: 0; }
|
||||
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
||||
|
||||
/* Body */
|
||||
.mdt-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--m-border-strong) transparent;
|
||||
}
|
||||
.mdt-body::-webkit-scrollbar { width: 5px; }
|
||||
.mdt-body::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
||||
|
||||
/* Loading + Empty */
|
||||
.mdt-loading,
|
||||
.mdt-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 28px;
|
||||
text-align: center;
|
||||
color: var(--m-text-muted);
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
.mdt-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
|
||||
.mdt-empty__icon { font-size: 2.2rem; color: var(--m-text-faint); margin-bottom: 4px; }
|
||||
.mdt-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
|
||||
.mdt-empty__hint { font-size: 0.82rem; }
|
||||
.mdt-empty__btn { margin-top: 8px; }
|
||||
|
||||
/* ─── Section (cards de templates) ─── */
|
||||
.mdt-section {
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.mdt-section__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
}
|
||||
.mdt-section__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--m-text);
|
||||
}
|
||||
.mdt-section__title > i {
|
||||
font-size: 0.92rem;
|
||||
color: var(--m-text-muted);
|
||||
}
|
||||
.mdt-section__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mdt-section__count.is-info {
|
||||
background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
.mdt-section__count.is-accent {
|
||||
background: var(--m-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mdt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Card de template (global ou tenant) */
|
||||
.mdt-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 10px;
|
||||
color: var(--m-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
|
||||
}
|
||||
.mdt-card:hover {
|
||||
background: var(--m-bg-soft-hover);
|
||||
border-color: var(--p-primary-color);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.mdt-card:focus-visible {
|
||||
outline: 2px solid var(--p-primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.mdt-card__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
.mdt-card__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.mdt-card__icon--info {
|
||||
background: color-mix(in srgb, rgb(37, 99, 235) 15%, transparent);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
.mdt-card__icon--primary {
|
||||
background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
|
||||
color: var(--p-primary-color);
|
||||
}
|
||||
.mdt-card__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.mdt-card__name {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.mdt-card__tipo {
|
||||
font-size: 0.72rem;
|
||||
color: var(--m-text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.mdt-card__desc {
|
||||
font-size: 0.72rem;
|
||||
color: var(--m-text-muted);
|
||||
line-height: 1.5;
|
||||
margin-top: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.mdt-card__badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.mdt-card__badge--info {
|
||||
background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
.mdt-card__badge--inactive {
|
||||
background: rgba(220, 38, 38, 0.15);
|
||||
color: rgb(220, 38, 38);
|
||||
}
|
||||
.mdt-card__hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--m-text-muted);
|
||||
opacity: 0;
|
||||
transition: opacity 140ms ease;
|
||||
margin-top: auto;
|
||||
}
|
||||
.mdt-card:hover .mdt-card__hint { opacity: 1; }
|
||||
.mdt-card__hint > i { font-size: 0.7rem; }
|
||||
|
||||
.mdt-card__menu {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 140ms ease;
|
||||
}
|
||||
.mdt-card:hover .mdt-card__menu { opacity: 1; }
|
||||
|
||||
.mdt-card__foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.mdt-card__vars {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--m-text-muted);
|
||||
}
|
||||
.mdt-card__vars > i { font-size: 0.65rem; }
|
||||
|
||||
/* Mobile (<1024px) */
|
||||
@media (max-width: 1023px) {
|
||||
.mdt-page__title > span:nth-child(2):not(.mdt-page__count) {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.mdt-act-btn span { display: none; }
|
||||
.mdt-act-btn { width: 32px; padding: 0; justify-content: center; }
|
||||
.mdt-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user