plans(C141,C143,C142): permissões granulares por assessor + responsáveis de demanda + UI por perfil
This commit is contained in:
Francisco Solla
parent
bd3c653ac6
commit
5660e21771
6 changed files with 276 additions and 91 deletions
|
|
@ -20,10 +20,16 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Material de campanha</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Em aberto</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Material de campanha</span
|
||||
>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Em aberto</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2 text-lg font-bold text-zinc-900">
|
||||
Cartazes para a caminhada do fim de semana
|
||||
</div>
|
||||
<div class="mt-2 text-lg font-bold text-zinc-900">Cartazes para a caminhada do fim de semana</div>
|
||||
<div class="mt-1 text-sm text-zinc-500">Ilhéus · liderança: Nome da liderança</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,11 +61,22 @@
|
|||
<div class="text-xs text-zinc-400">Só quem é responsável vê esta demanda</div>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Assessora de campo</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Outro assessor</span>
|
||||
<span class="inline-flex h-6 items-center rounded bg-zinc-100 px-2 text-xs text-zinc-500">+2</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700"
|
||||
>Assessora de campo</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700"
|
||||
>Outro assessor</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-6 items-center rounded bg-zinc-100 px-2 text-xs text-zinc-500"
|
||||
>+2</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Adicionar responsável…
|
||||
</div>
|
||||
<div class="mt-3 h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500">Adicionar responsável…</div>
|
||||
<div class="mt-2 text-[11px] text-zinc-500">
|
||||
Criador já entra como responsável automaticamente. Assessores do município aparecem
|
||||
como sugestão, mas só quem for marcado enxerga.
|
||||
|
|
@ -68,8 +85,8 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-4 rounded-md bg-zinc-100 px-4 py-2 text-xs leading-relaxed text-zinc-600">
|
||||
Assessor do município que não é responsável: a demanda não aparece na lista dele nem abre
|
||||
por URL — mesmo com permissão "Visão Tudo".
|
||||
Assessor do município que não é responsável: a demanda não aparece na lista dele nem
|
||||
abre por URL — mesmo com permissão "Visão Tudo".
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -83,18 +100,26 @@
|
|||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-zinc-700">Título</div>
|
||||
<div class="mt-1 h-9 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-500">Cartazes para a caminhada do fim de semana</div>
|
||||
<div
|
||||
class="mt-1 h-9 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Cartazes para a caminhada do fim de semana
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-zinc-700">Município</div>
|
||||
<div class="mt-1 flex h-9 w-full items-center justify-between rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-800">
|
||||
<div
|
||||
class="mt-1 flex h-9 w-full items-center justify-between rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-800"
|
||||
>
|
||||
Ilhéus
|
||||
<span class="text-xs text-zinc-400">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-zinc-700">Tipo</div>
|
||||
<div class="mt-1 flex h-9 w-full items-center justify-between rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-800">
|
||||
<div
|
||||
class="mt-1 flex h-9 w-full items-center justify-between rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-800"
|
||||
>
|
||||
Material de campanha
|
||||
<span class="text-xs text-zinc-400">▾</span>
|
||||
</div>
|
||||
|
|
@ -104,10 +129,18 @@
|
|||
<div class="rounded-lg border border-zinc-200 bg-white p-4">
|
||||
<div class="text-xs font-bold text-zinc-700">Responsáveis pela demanda</div>
|
||||
<div class="mt-2 flex flex-wrap gap-1.5">
|
||||
<span class="rounded bg-zinc-300 px-2 py-1 text-xs font-bold text-zinc-800">Você (criador)</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Assessora de campo</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-1 text-xs font-bold text-zinc-800"
|
||||
>Você (criador)</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700"
|
||||
>Assessora de campo</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Buscar assessor…
|
||||
</div>
|
||||
<div class="mt-3 h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500">Buscar assessor…</div>
|
||||
<div class="mt-2 text-[11px] text-zinc-500">
|
||||
Sugestões: assessores do município. Se ninguém for marcado além de você, só você,
|
||||
candidato e coordenador verão a demanda.
|
||||
|
|
@ -116,8 +149,16 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-5 flex justify-end gap-2">
|
||||
<div class="inline-flex h-9 items-center rounded-lg border border-zinc-300 px-4 text-sm font-bold text-zinc-700">Cancelar</div>
|
||||
<div class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white">Criar demanda</div>
|
||||
<div
|
||||
class="inline-flex h-9 items-center rounded-lg border border-zinc-300 px-4 text-sm font-bold text-zinc-700"
|
||||
>
|
||||
Cancelar
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white"
|
||||
>
|
||||
Criar demanda
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
|
@ -16,52 +16,80 @@
|
|||
|
||||
<!-- Cena 1: lista desktop com editor aberto numa linha -->
|
||||
<section data-shot="desktop" class="mt-6 overflow-hidden rounded-xl border border-zinc-800">
|
||||
<div class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100 px-6 py-4">
|
||||
<div
|
||||
class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100 px-6 py-4"
|
||||
>
|
||||
<div>
|
||||
<div class="h-5 w-44 rounded bg-zinc-500"></div>
|
||||
<div class="mt-1 h-2 w-64 rounded bg-zinc-400"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-9 w-44 rounded-full border border-zinc-300 bg-white px-3 text-sm text-zinc-500">Buscar assessor…</div>
|
||||
<div class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white">+ Novo assessor</div>
|
||||
<div
|
||||
class="h-9 w-44 rounded-full border border-zinc-300 bg-white px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Buscar assessor…
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white"
|
||||
>
|
||||
+ Novo assessor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-zinc-100 px-6 pb-6">
|
||||
<!-- tabela -->
|
||||
<div class="overflow-hidden rounded-lg border border-zinc-200 bg-white">
|
||||
<div class="grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-2 text-xs font-bold text-zinc-500">
|
||||
<div
|
||||
class="grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-2 text-xs font-bold text-zinc-500"
|
||||
>
|
||||
<div>Nome</div>
|
||||
<div>E-mail</div>
|
||||
<div>Celular</div>
|
||||
<div>Municípios</div>
|
||||
<div>Permissão</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="font-semibold text-zinc-900">Nome do assessor</div>
|
||||
<div class="text-zinc-600">assessor@exemplo.org</div>
|
||||
<div class="text-zinc-600">(71) 90000-0000</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700">Salvador (19)</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700">Feira de Santana</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700"
|
||||
>Salvador (19)</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700"
|
||||
>Feira de Santana</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700">+3</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Carteira · Edita carteira</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Carteira · Edita carteira</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="font-semibold text-zinc-900">Outra assessora</div>
|
||||
<div class="text-zinc-600">outra@exemplo.org</div>
|
||||
<div class="text-zinc-600">(71) 90000-0001</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700">Camaçari</div>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700"
|
||||
>Camaçari</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Tudo · Somente leitura</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Tudo · Somente leitura</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] items-center gap-2 bg-zinc-50 px-4 py-3 text-sm pb-[28rem]">
|
||||
<div
|
||||
class="relative grid grid-cols-[1.3fr_1.7fr_1.1fr_1.7fr_1.5fr] items-center gap-2 bg-zinc-50 px-4 py-3 text-sm pb-[28rem]"
|
||||
>
|
||||
<div class="font-semibold text-zinc-900">Assessora de campo</div>
|
||||
<div class="text-zinc-600">campo@exemplo.org</div>
|
||||
<div class="text-zinc-600">(71) 90000-0002</div>
|
||||
|
|
@ -70,26 +98,36 @@
|
|||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700">Itabuna</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Carteira · Edita carteira</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Carteira · Edita carteira</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- popover editor -->
|
||||
<div class="absolute left-4 top-6 z-10 w-80 rounded-lg border border-zinc-200 bg-white p-4 shadow-xl">
|
||||
<div
|
||||
class="absolute left-4 top-6 z-10 w-80 rounded-lg border border-zinc-200 bg-white p-4 shadow-xl"
|
||||
>
|
||||
<div class="text-sm font-bold text-zinc-900">Permissão da conta</div>
|
||||
<div class="mt-1 text-xs text-zinc-500">Vale para todas as telas do /campanha.</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="text-xs font-bold text-zinc-700">Visão</div>
|
||||
<div class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800">
|
||||
<div
|
||||
class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800"
|
||||
>
|
||||
Carteira — municípios que administra
|
||||
<span class="text-xs text-zinc-400">▾</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-zinc-500">Tudo: enxerga todos os municípios e lideranças.</div>
|
||||
<div class="mt-1 text-[11px] text-zinc-500">
|
||||
Tudo: enxerga todos os municípios e lideranças.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="text-xs font-bold text-zinc-700">Edição</div>
|
||||
<div class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800">
|
||||
<div
|
||||
class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800"
|
||||
>
|
||||
Carteira — edita só o que administra
|
||||
<span class="text-xs text-zinc-400">▾</span>
|
||||
</div>
|
||||
|
|
@ -98,44 +136,72 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 rounded-md bg-zinc-100 px-3 py-2 text-[11px] leading-relaxed text-zinc-600">
|
||||
Demandas seguem regra própria: só quem é responsável pela demanda (e candidato/coordenador)
|
||||
a vê — mesmo com visão "Tudo".
|
||||
<div
|
||||
class="mt-4 rounded-md bg-zinc-100 px-3 py-2 text-[11px] leading-relaxed text-zinc-600"
|
||||
>
|
||||
Demandas seguem regra própria: só quem é responsável pela demanda (e
|
||||
candidato/coordenador) a vê — mesmo com visão "Tudo".
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<div class="inline-flex h-9 items-center rounded-lg border border-zinc-300 px-4 text-sm font-bold text-zinc-700">Cancelar</div>
|
||||
<div class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white">Salvar</div>
|
||||
<div
|
||||
class="inline-flex h-9 items-center rounded-lg border border-zinc-300 px-4 text-sm font-bold text-zinc-700"
|
||||
>
|
||||
Cancelar
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white"
|
||||
>
|
||||
Salvar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 text-xs text-zinc-500">
|
||||
Padrão de contas novas: Carteira · Edita carteira (comportamento atual). Alterações valem
|
||||
na hora — ninguém precisa reenviar senha.
|
||||
Padrão de contas novas: Carteira · Edita carteira (comportamento atual). Alterações
|
||||
valem na hora — ninguém precisa reenviar senha.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cena 2: mobile — lista em cards -->
|
||||
<section data-shot="mobile" class="mt-6 w-[390px] overflow-hidden rounded-xl border border-zinc-800">
|
||||
<section
|
||||
data-shot="mobile"
|
||||
class="mt-6 w-[390px] overflow-hidden rounded-xl border border-zinc-800"
|
||||
>
|
||||
<div class="bg-zinc-100 p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="h-5 w-36 rounded bg-zinc-500"></div>
|
||||
<div class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white">+ Novo</div>
|
||||
<div
|
||||
class="inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-sm font-extrabold text-white"
|
||||
>
|
||||
+ Novo
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 h-9 w-full rounded-full border border-zinc-300 bg-white px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Buscar assessor…
|
||||
</div>
|
||||
<div class="mt-3 h-9 w-full rounded-full border border-zinc-300 bg-white px-3 text-sm text-zinc-500">Buscar assessor…</div>
|
||||
|
||||
<div class="mt-3 rounded-lg border border-zinc-200 bg-white p-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Nome do assessor</div>
|
||||
<span class="shrink-0 rounded bg-zinc-300 px-2 py-0.5 text-[11px] font-bold text-zinc-800">Carteira · Edita</span>
|
||||
<span
|
||||
class="shrink-0 rounded bg-zinc-300 px-2 py-0.5 text-[11px] font-bold text-zinc-800"
|
||||
>Carteira · Edita</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-zinc-600">assessor@exemplo.org · (71) 90000-0000</div>
|
||||
<div class="mt-2 flex flex-wrap gap-1">
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700">Salvador (19)</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700">Feira de Santana</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700"
|
||||
>Salvador (19)</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700"
|
||||
>Feira de Santana</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700">+3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,23 +209,35 @@
|
|||
<div class="mt-2 rounded-lg border border-zinc-200 bg-white p-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Outra assessora</div>
|
||||
<span class="shrink-0 rounded bg-zinc-300 px-2 py-0.5 text-[11px] font-bold text-zinc-800">Tudo · Só leitura</span>
|
||||
<span
|
||||
class="shrink-0 rounded bg-zinc-300 px-2 py-0.5 text-[11px] font-bold text-zinc-800"
|
||||
>Tudo · Só leitura</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-zinc-600">outra@exemplo.org · (71) 90000-0001</div>
|
||||
<div class="mt-2 flex flex-wrap gap-1">
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700">Camaçari</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700"
|
||||
>Camaçari</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 rounded-lg border border-zinc-200 bg-white p-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Assessora de campo</div>
|
||||
<span class="shrink-0 rounded bg-zinc-300 px-2 py-0.5 text-[11px] font-bold text-zinc-800">Carteira · Edita</span>
|
||||
<span
|
||||
class="shrink-0 rounded bg-zinc-300 px-2 py-0.5 text-[11px] font-bold text-zinc-800"
|
||||
>Carteira · Edita</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-zinc-600">campo@exemplo.org · (71) 90000-0002</div>
|
||||
<div class="mt-2 flex flex-wrap gap-1">
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700">Ilhéus</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700">Itabuna</span>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700"
|
||||
>Ilhéus</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-700"
|
||||
>Itabuna</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -176,7 +254,11 @@
|
|||
<div class="text-sm text-zinc-500">assessor@exemplo.org · (71) 90000-0000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-bold text-zinc-700">Enviar link de redefinição de senha</div>
|
||||
<div
|
||||
class="rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-bold text-zinc-700"
|
||||
>
|
||||
Enviar link de redefinição de senha
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
|
|
@ -184,36 +266,53 @@
|
|||
<div class="text-sm font-bold text-zinc-900">Permissão da conta</div>
|
||||
<div class="mt-3">
|
||||
<div class="text-xs font-bold text-zinc-700">Visão</div>
|
||||
<div class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800">
|
||||
<div
|
||||
class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800"
|
||||
>
|
||||
Carteira — municípios que administra
|
||||
<span class="text-xs text-zinc-400">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div class="text-xs font-bold text-zinc-700">Edição</div>
|
||||
<div class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800">
|
||||
<div
|
||||
class="mt-1 flex h-9 items-center justify-between rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-800"
|
||||
>
|
||||
Carteira — edita só o que administra
|
||||
<span class="text-xs text-zinc-400">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 rounded-md bg-zinc-100 px-3 py-2 text-[11px] leading-relaxed text-zinc-600">
|
||||
<div
|
||||
class="mt-3 rounded-md bg-zinc-100 px-3 py-2 text-[11px] leading-relaxed text-zinc-600"
|
||||
>
|
||||
Demandas ficam sempre limitadas aos municípios de responsabilidade. Decisões de
|
||||
coordenação (nível de envolvimento, contas, demandas escaladas) continuam restritas a
|
||||
coordenador e candidato.
|
||||
coordenação (nível de envolvimento, contas, demandas escaladas) continuam restritas
|
||||
a coordenador e candidato.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-5">
|
||||
<div class="text-sm font-bold text-zinc-900">Municípios administrados</div>
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Salvador (19)</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Feira de Santana</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700"
|
||||
>Salvador (19)</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700"
|
||||
>Feira de Santana</span
|
||||
>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Camaçari</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Ilhéus</span>
|
||||
<span class="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700">Itabuna</span>
|
||||
<span class="inline-flex h-6 items-center rounded bg-zinc-100 px-2 text-xs text-zinc-500">+8</span>
|
||||
<span
|
||||
class="inline-flex h-6 items-center rounded bg-zinc-100 px-2 text-xs text-zinc-500"
|
||||
>+8</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Adicionar município…
|
||||
</div>
|
||||
<div class="mt-3 h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500">Adicionar município…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,23 +10,29 @@
|
|||
<main class="mx-auto max-w-6xl p-8">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Depois do perfil de permissão (C141): as telas param de oferecer edição a quem não pode
|
||||
editar e passam a renderizar o escopo completo para quem vê tudo — cenas: lista de municípios
|
||||
em modo leitura, lista com visão total, detalhe de demanda somente leitura.
|
||||
editar e passam a renderizar o escopo completo para quem vê tudo — cenas: lista de
|
||||
municípios em modo leitura, lista com visão total, detalhe de demanda somente leitura.
|
||||
</p>
|
||||
|
||||
<!-- Cena 1: lista de municípios — assessor somente leitura -->
|
||||
<section data-shot="municipios-leitura" class="mt-6 overflow-hidden rounded-xl border border-zinc-800">
|
||||
<div class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100 px-6 py-4">
|
||||
<section
|
||||
data-shot="municipios-leitura"
|
||||
class="mt-6 overflow-hidden rounded-xl border border-zinc-800"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100 px-6 py-4"
|
||||
>
|
||||
<div>
|
||||
<div class="h-5 w-44 rounded bg-zinc-500"></div>
|
||||
<div class="mt-1 h-2 w-64 rounded bg-zinc-400"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bg-zinc-100 px-6 pb-6">
|
||||
<div class="overflow-hidden rounded-lg border border-zinc-200 bg-white">
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-2 text-xs font-bold text-zinc-500">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-2 text-xs font-bold text-zinc-500"
|
||||
>
|
||||
<div>Município</div>
|
||||
<div>Tendência</div>
|
||||
<div>Nível</div>
|
||||
|
|
@ -34,7 +40,9 @@
|
|||
<div>Cobertura</div>
|
||||
<div>Últ. atualização</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Salvador (19 zonas)</div>
|
||||
<div class="min-w-0 text-zinc-600">Favorável</div>
|
||||
<div class="min-w-0 text-zinc-600">N3</div>
|
||||
|
|
@ -42,7 +50,9 @@
|
|||
<div class="min-w-0 text-zinc-600">82%</div>
|
||||
<div class="min-w-0 text-zinc-600">há 2 dias</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Feira de Santana</div>
|
||||
<div class="min-w-0 text-zinc-600">Neutro</div>
|
||||
<div class="min-w-0 text-zinc-600">N2</div>
|
||||
|
|
@ -50,7 +60,9 @@
|
|||
<div class="min-w-0 text-zinc-600">41%</div>
|
||||
<div class="min-w-0 text-zinc-600">há 5 dias</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Ilhéus</div>
|
||||
<div class="min-w-0 text-zinc-600">Favorável</div>
|
||||
<div class="min-w-0 whitespace-nowrap text-zinc-600">—</div>
|
||||
|
|
@ -60,25 +72,36 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-xs text-zinc-500">
|
||||
Mesma lista de sempre — mas sem autosave, sem chips editáveis, sem "Registrar atualização":
|
||||
nenhum caminho de escrita visível.
|
||||
Mesma lista de sempre — mas sem autosave, sem chips editáveis, sem "Registrar
|
||||
atualização": nenhum caminho de escrita visível.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cena 2: mesma lista para assessor com visão Tudo -->
|
||||
<section data-shot="municipios-visao-tudo" class="mt-6 overflow-hidden rounded-xl border border-zinc-800">
|
||||
<div class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100 px-6 py-4">
|
||||
<section
|
||||
data-shot="municipios-visao-tudo"
|
||||
class="mt-6 overflow-hidden rounded-xl border border-zinc-800"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100 px-6 py-4"
|
||||
>
|
||||
<div>
|
||||
<div class="h-5 w-44 rounded bg-zinc-500"></div>
|
||||
<div class="mt-1 h-2 w-64 rounded bg-zinc-400"></div>
|
||||
</div>
|
||||
<div class="h-9 w-44 rounded-full border border-zinc-300 bg-white px-3 text-sm text-zinc-500">Buscar município…</div>
|
||||
<div
|
||||
class="h-9 w-44 rounded-full border border-zinc-300 bg-white px-3 text-sm text-zinc-500"
|
||||
>
|
||||
Buscar município…
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-zinc-100 px-6 pb-6">
|
||||
<div class="overflow-hidden rounded-lg border border-zinc-200 bg-white">
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-2 text-xs font-bold text-zinc-500">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-2 text-xs font-bold text-zinc-500"
|
||||
>
|
||||
<div>Município</div>
|
||||
<div>Tendência</div>
|
||||
<div>Nível</div>
|
||||
|
|
@ -86,7 +109,9 @@
|
|||
<div>Cobertura</div>
|
||||
<div>Últ. atualização</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Salvador (19 zonas)</div>
|
||||
<div class="min-w-0 text-zinc-600">Favorável</div>
|
||||
<div class="min-w-0 text-zinc-600">N3</div>
|
||||
|
|
@ -94,7 +119,9 @@
|
|||
<div class="min-w-0 text-zinc-600">82%</div>
|
||||
<div class="min-w-0 text-zinc-600">há 2 dias</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Vitória da Conquista</div>
|
||||
<div class="min-w-0 text-zinc-600">Neutro</div>
|
||||
<div class="min-w-0 text-zinc-600">N1</div>
|
||||
|
|
@ -102,7 +129,9 @@
|
|||
<div class="min-w-0 text-zinc-600">12%</div>
|
||||
<div class="min-w-0 text-zinc-600">há 9 dias</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Barreiras</div>
|
||||
<div class="min-w-0 text-zinc-600">Favorável</div>
|
||||
<div class="min-w-0 text-zinc-600">N2</div>
|
||||
|
|
@ -110,7 +139,9 @@
|
|||
<div class="min-w-0 text-zinc-600">38%</div>
|
||||
<div class="min-w-0 text-zinc-600">há 4 dias</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 px-4 py-3 text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[1.5fr_1.05fr_0.95fr_1.05fr_0.8fr_1.1fr] items-center gap-2 px-4 py-3 text-sm"
|
||||
>
|
||||
<div class="min-w-0 truncate font-semibold text-zinc-900">Juazeiro</div>
|
||||
<div class="min-w-0 text-zinc-600">Desfavorável</div>
|
||||
<div class="min-w-0 text-zinc-600">N1</div>
|
||||
|
|
@ -120,22 +151,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-xs text-zinc-500">
|
||||
Mesma mesa de trabalho de um coordenador (menos apoiadores fora da carteira e demandas de
|
||||
que não é responsável) — ver regras no plano C141.
|
||||
Mesma mesa de trabalho de um coordenador (menos apoiadores fora da carteira e demandas
|
||||
de que não é responsável) — ver regras no plano C141.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cena 3: detalhe de demanda em modo leitura -->
|
||||
<section data-shot="demanda-leitura" class="mt-6 overflow-hidden rounded-xl border border-zinc-800">
|
||||
<section
|
||||
data-shot="demanda-leitura"
|
||||
class="mt-6 overflow-hidden rounded-xl border border-zinc-800"
|
||||
>
|
||||
<div class="bg-zinc-100 px-8 py-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Material de campanha</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800">Em aberto</span>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Material de campanha</span
|
||||
>
|
||||
<span class="rounded bg-zinc-300 px-2 py-0.5 text-xs font-bold text-zinc-800"
|
||||
>Em aberto</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2 text-lg font-bold text-zinc-900">
|
||||
Cartazes para a caminhada do fim de semana
|
||||
</div>
|
||||
<div class="mt-2 text-lg font-bold text-zinc-900">Cartazes para a caminhada do fim de semana</div>
|
||||
<div class="mt-1 text-sm text-zinc-500">Ilhéus · liderança: Nome da liderança</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,18 +203,23 @@
|
|||
<div class="flex gap-3">
|
||||
<div class="h-2 w-2 shrink-0 rounded-full bg-zinc-400"></div>
|
||||
<div class="text-xs text-zinc-600">
|
||||
<span class="font-bold text-zinc-800">Em aberto</span> — criada por Assessora de campo · 12 ago
|
||||
<span class="font-bold text-zinc-800">Em aberto</span> — criada por Assessora de
|
||||
campo · 12 ago
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="h-2 w-2 shrink-0 rounded-full bg-zinc-400"></div>
|
||||
<div class="text-xs text-zinc-600">
|
||||
<span class="font-bold text-zinc-800">Encaminhada</span> — decidida por Coordenador Geral · 14 ago
|
||||
<span class="font-bold text-zinc-800">Encaminhada</span> — decidida por
|
||||
Coordenador Geral · 14 ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 rounded-md bg-zinc-100 px-3 py-2 text-[11px] leading-relaxed text-zinc-600">
|
||||
Sem botões de transição, sem "registrar pedido", sem edição — só leitura do andamento.
|
||||
<div
|
||||
class="mt-4 rounded-md bg-zinc-100 px-3 py-2 text-[11px] leading-relaxed text-zinc-600"
|
||||
>
|
||||
Sem botões de transição, sem "registrar pedido", sem edição — só leitura do
|
||||
andamento.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue