SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: enhance 'Almoxarifado' UI with new icons, improved layout, and updated styling for better user experience and accessibility

Browse Source
This commit is contained in:
deyvisonwanderley
2025-12-22 07:21:08 -03:00
parent ec3b5dc7ea
commit e19c24b9ab
1 changed files with 368 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
apps/web/src/routes/(dashboard)/ti/configuracoes-almoxarifado/+page.svelte
View File

@@ -3,7 +3,7 @@
import type { FunctionReference } from 'convex/server';
import { useConvexClient, useQuery } from 'convex-svelte';
import { resolve } from '$app/paths';
import { Settings, Save, AlertTriangle, Info, Barcode, Key, CheckCircle, XCircle } from 'lucide-svelte';
import { Settings, Save, AlertTriangle, Info, Barcode, Key, CheckCircle, XCircle, Warehouse, ClipboardList, Bell, Package, Shield } from 'lucide-svelte';
const client = useConvexClient();
const configAtual = useQuery(api.configuracaoAlmoxarifado.obterConfiguracao, {});
@@ -190,14 +190,16 @@
</div>
<!-- Cabeçalho -->
<div class="mb-6">
<div class="mb-8">
<div class="flex items-center gap-4">
<div class="rounded-xl bg-warning/20 p-3">
<Settings class="h-8 w-8 text-warning" strokeWidth={2} />
<div class="rounded-2xl bg-gradient-to-br from-warning/20 via-warning/10 to-warning/5 p-4 shadow-lg border border-warning/20">
<Settings class="h-10 w-10 text-warning" strokeWidth={2.5} />
</div>
<div>
<h1 class="text-3xl font-bold">Configurações de Almoxarifado</h1>
<p class="text-base-content/70">
<div class="flex-1">
<h1 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-warning to-warning/70 bg-clip-text text-transparent">
Configurações de Almoxarifado
</h1>
<p class="text-base-content/70 text-lg mt-1">
Configure parâmetros do sistema de almoxarifado. Acesso restrito à TI.
</p>
</div>
@@ -205,11 +207,11 @@
</div>
<!-- Alerta de Acesso Restrito -->
<div class="alert alert-warning mb-6 shadow-lg">
<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" />
<div class="alert alert-warning mb-8 shadow-lg border-warning/30 bg-warning/10">
<Shield class="h-6 w-6 shrink-0 text-warning" strokeWidth={2.5} />
<div>
<h3 class="font-bold">Acesso Restrito</h3>
<div class="text-sm">
<h3 class="font-bold text-base-content">Acesso Restrito</h3>
<div class="text-sm text-base-content/80 mt-1">
Esta página é restrita apenas para usuários com permissão de TI. Alterações aqui afetam
o comportamento de todo o sistema de almoxarifado.
</div>
@@ -224,121 +226,137 @@
{/if}
<!-- Formulário -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="card bg-base-100 border border-base-300 shadow-2xl">
<div class="card-body p-8">
<form onsubmit={(e) => { e.preventDefault(); salvarConfiguracao(); }}>
<!-- Configurações Gerais -->
<div class="divider">
<h2 class="text-xl font-bold">Configurações Gerais</h2>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
<div class="rounded-lg bg-primary/10 p-2.5">
<Warehouse class="h-5 w-5 text-primary" strokeWidth={2.5} />
</div>
<h2 class="text-xl font-bold text-base-content">Configurações Gerais</h2>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="form-control">
<label class="label">
<span class="label-text font-bold">Estoque Mínimo Padrão</span>
<label class="label pb-2">
<span class="label-text font-semibold">Estoque Mínimo Padrão</span>
</label>
<input
type="number"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
min="0"
step="1"
bind:value={estoqueMinimoPadrao}
required
/>
<label class="label">
<span class="label-text-alt"
<label class="label pt-1">
<span class="label-text-alt text-base-content/60"
>Valor padrão usado para novos materiais quando não especificado</span
>
</label>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-bold">Dias de Antecedência para Alerta</span>
<label class="label pb-2">
<span class="label-text font-semibold">Dias de Antecedência para Alerta</span>
</label>
<input
type="number"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
min="0"
step="1"
bind:value={diasAntecedenciaAlerta}
required
/>
<label class="label">
<span class="label-text-alt"
<label class="label pt-1">
<span class="label-text-alt text-base-content/60"
>Dias antes do estoque mínimo para gerar alerta</span
>
</label>
</div>
<div class="form-control md:col-span-2">
<label class="label cursor-pointer justify-start gap-2">
<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
<input
type="checkbox"
class="checkbox checkbox-warning"
bind:checked={permitirEstoqueNegativo}
/>
<span class="label-text font-bold">Permitir Estoque Negativo</span>
<span class="label-text font-semibold">Permitir Estoque Negativo</span>
</label>
<label class="label">
<span class="label-text-alt"
<label class="label pt-1">
<span class="label-text-alt text-base-content/60"
>Permite registrar saídas mesmo quando o estoque é insuficiente</span
>
</label>
</div>
</div>
</div>
<!-- Configurações de Requisições -->
<div class="divider">
<h2 class="text-xl font-bold">Requisições</h2>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-info/20 pb-4">
<div class="rounded-lg bg-info/10 p-2.5">
<ClipboardList class="h-5 w-5 text-info" strokeWidth={2.5} />
</div>
<h2 class="text-xl font-bold text-base-content">Requisições</h2>
</div>
<div class="grid grid-cols-1 gap-6">
<div class="form-control">
<label class="label cursor-pointer justify-start gap-2">
<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
<input
type="checkbox"
class="checkbox checkbox-warning"
bind:checked={requerAprovacaoRequisicao}
/>
<span class="label-text font-bold">Requer Aprovação de Requisições</span>
<span class="label-text font-semibold">Requer Aprovação de Requisições</span>
</label>
<label class="label">
<span class="label-text-alt"
<label class="label pt-1">
<span class="label-text-alt text-base-content/60"
>Se ativado, requisições precisam ser aprovadas antes de serem atendidas</span
>
</label>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Roles que Podem Aprovar</span>
<label class="label pb-2">
<span class="label-text font-semibold">Roles que Podem Aprovar</span>
</label>
<div class="alert alert-info">
<Info class="h-5 w-5" />
<span class="text-sm"
<div class="alert alert-info border-info/30 bg-info/10">
<Info class="h-5 w-5 text-info shrink-0" />
<span class="text-sm text-base-content/80"
>Configure as roles no painel de permissões. Roles com permissão
'almoxarifado.aprovar_requisicao' podem aprovar requisições.</span
>
</div>
</div>
</div>
</div>
<!-- Alertas e Notificações -->
<div class="divider">
<h2 class="text-xl font-bold">Alertas e Notificações</h2>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-warning/20 pb-4">
<div class="rounded-lg bg-warning/10 p-2.5">
<Bell class="h-5 w-5 text-warning" strokeWidth={2.5} />
</div>
<h2 class="text-xl font-bold text-base-content">Alertas e Notificações</h2>
</div>
<div class="grid grid-cols-1 gap-6">
<div class="form-control">
<label class="label cursor-pointer justify-start gap-2">
<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
<input
type="checkbox"
class="checkbox checkbox-warning"
bind:checked={emailAlertasAtivo}
/>
<span class="label-text font-bold">Ativar Alertas por Email</span>
<span class="label-text font-semibold">Ativar Alertas por Email</span>
</label>
<label class="label">
<span class="label-text-alt"
<label class="label pt-1">
<span class="label-text-alt text-base-content/60"
>Envia emails quando alertas de estoque são gerados</span
>
</label>
@@ -346,13 +364,13 @@
{#if emailAlertasAtivo}
<div class="form-control">
<label class="label">
<span class="label-text font-bold">Emails Destinatários</span>
<label class="label pb-2">
<span class="label-text font-semibold">Emails Destinatários</span>
</label>
<div class="flex gap-2 mb-2">
<div class="flex gap-3 mb-4">
<input
type="email"
class="input input-bordered flex-1"
class="input input-bordered flex-1 focus:input-primary transition-colors h-12"
placeholder="email@exemplo.com"
bind:value={novoEmail}
onkeypress={(e) => {
@@ -362,19 +380,20 @@
}
}}
/>
<button type="button" class="btn btn-primary" onclick={adicionarEmail}>
<button type="button" class="btn btn-primary h-12 shadow-lg hover:shadow-xl transition-all" onclick={adicionarEmail}>
Adicionar
</button>
</div>
{#if emailsDestinatarios.length > 0}
<div class="flex flex-wrap gap-2">
{#each emailsDestinatarios as email}
<div class="badge badge-lg gap-2">
<div class="badge badge-lg gap-2 badge-primary">
{email}
<button
type="button"
class="btn btn-ghost btn-xs"
class="btn btn-ghost btn-xs hover:btn-error"
onclick={() => removerEmail(email)}
title="Remover email"
>
×
</button>
@@ -382,49 +401,57 @@
{/each}
</div>
{:else}
<div class="alert alert-warning">
<AlertTriangle class="h-5 w-5" />
<span class="text-sm">Nenhum email adicionado</span>
<div class="alert alert-warning border-warning/30 bg-warning/10">
<AlertTriangle class="h-5 w-5 text-warning" />
<span class="text-sm font-medium">Nenhum email adicionado</span>
</div>
{/if}
</div>
{/if}
</div>
</div>
<!-- Inventário -->
<div class="divider">
<h2 class="text-xl font-bold">Inventário</h2>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-success/20 pb-4">
<div class="rounded-lg bg-success/10 p-2.5">
<Package class="h-5 w-5 text-success" strokeWidth={2.5} />
</div>
<h2 class="text-xl font-bold text-base-content">Inventário</h2>
</div>
<div class="grid grid-cols-1 gap-6">
<div class="form-control">
<label class="label">
<span class="label-text font-bold">Periodicidade de Inventário (dias)</span>
<label class="label pb-2">
<span class="label-text font-semibold">Periodicidade de Inventário (dias)</span>
</label>
<input
type="number"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
min="1"
step="1"
bind:value={periodicidadeInventario}
required
/>
<label class="label">
<span class="label-text-alt"
<label class="label pt-1">
<span class="label-text-alt text-base-content/60"
>Intervalo recomendado entre inventários físicos</span
>
</label>
</div>
</div>
</div>
<!-- Botões -->
<div class="card-actions mt-6 justify-end">
<button type="submit" class="btn btn-warning" disabled={processando}>
<div class="card-actions mt-8 justify-end border-t-2 border-base-300 pt-6">
<button type="submit" class="btn btn-warning btn-lg min-w-[200px] shadow-lg hover:shadow-xl transition-all" disabled={processando}>
{#if processando}
<span class="loading loading-spinner loading-sm"></span>
Salvando...
{:else}
<Save class="h-5 w-5" />
{/if}
Salvar Configurações
{/if}
</button>
</div>
</form>
@@ -432,19 +459,21 @@
</div>
<!-- Configurações de Busca de Código de Barras -->
<div class="card bg-base-100 shadow-xl mt-6">
<div class="card-body">
<h2 class="card-title mb-6 text-2xl">
<Barcode class="h-6 w-6" />
Configurações de Busca de Código de Barras
</h2>
<div class="card bg-base-100 border border-base-300 shadow-2xl mt-8">
<div class="card-body p-8">
<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
<div class="rounded-lg bg-primary/10 p-2.5">
<Barcode class="h-5 w-5 text-primary" strokeWidth={2.5} />
</div>
<h2 class="text-xl font-bold text-base-content">Configurações de Busca de Código de Barras</h2>
</div>
<!-- Informação sobre APIs Gratuitas -->
<div class="alert alert-info mb-6 shadow-lg">
<Info class="h-6 w-6 shrink-0" />
<div class="alert alert-info mb-8 shadow-lg border-info/30 bg-info/10">
<Info class="h-6 w-6 shrink-0 text-info" strokeWidth={2.5} />
<div>
<p class="font-semibold">APIs Gratuitas Disponíveis</p>
<p class="text-sm">
<p class="font-semibold text-base-content">APIs Gratuitas Disponíveis</p>
<p class="text-sm text-base-content/80 mt-1">
As APIs <strong>Busca Unificada</strong> e <strong>Open Food Facts</strong> funcionam sem
credenciais e estão sempre disponíveis. Você só precisa configurar as credenciais abaixo
se desejar usar as APIs pagas (GS1 Brasil, Bluesoft Cosmo, Product-Search.net).
@@ -453,134 +482,139 @@
</div>
<!-- GS1 Brasil -->
<div class="divider">
<div class="flex items-center gap-2">
<Key class="h-5 w-5 text-primary" />
<span class="font-semibold">GS1 Brasil</span>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
<div class="rounded-lg bg-primary/10 p-2.5">
<Key class="h-5 w-5 text-primary" strokeWidth={2.5} />
</div>
<h3 class="text-lg font-bold text-base-content">GS1 Brasil</h3>
</div>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text font-medium">Ativar GS1 Brasil</span>
<div class="form-control mb-6">
<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
<input type="checkbox" class="toggle toggle-primary" bind:checked={gs1BrasilAtivo} />
<span class="label-text font-semibold">Ativar GS1 Brasil</span>
</label>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-6">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="form-control">
<label class="label" for="gs1-client-id">
<span class="label-text font-medium">Client ID</span>
<label class="label pb-2" for="gs1-client-id">
<span class="label-text font-semibold">Client ID</span>
</label>
<input
id="gs1-client-id"
type="text"
bind:value={gs1BrasilClientId}
placeholder="Seu Client ID"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!gs1BrasilAtivo}
/>
</div>
<div class="form-control">
<label class="label" for="gs1-client-secret">
<span class="label-text font-medium">Client Secret</span>
<label class="label pb-2" for="gs1-client-secret">
<span class="label-text font-semibold">Client Secret</span>
</label>
<input
id="gs1-client-secret"
type="password"
bind:value={gs1BrasilClientSecret}
placeholder="Deixe em branco para manter atual"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!gs1BrasilAtivo}
/>
</div>
<div class="form-control">
<label class="label" for="gs1-token-url">
<span class="label-text font-medium">Token URL</span>
<label class="label pb-2" for="gs1-token-url">
<span class="label-text font-semibold">Token URL</span>
</label>
<input
id="gs1-token-url"
type="text"
bind:value={gs1BrasilTokenUrl}
placeholder="https://apicnp.gs1br.org/oauth/token"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!gs1BrasilAtivo}
/>
</div>
<div class="form-control">
<label class="label" for="gs1-api-url">
<span class="label-text font-medium">API URL</span>
<label class="label pb-2" for="gs1-api-url">
<span class="label-text font-semibold">API URL</span>
</label>
<input
id="gs1-api-url"
type="text"
bind:value={gs1BrasilApiUrl}
placeholder="https://apicnp.gs1br.org/api/v1/products"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!gs1BrasilAtivo}
/>
</div>
</div>
</div>
<!-- Bluesoft Cosmo -->
<div class="divider">
<div class="flex items-center gap-2">
<Key class="h-5 w-5 text-info" />
<span class="font-semibold">Bluesoft Cosmo</span>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-info/20 pb-4">
<div class="rounded-lg bg-info/10 p-2.5">
<Key class="h-5 w-5 text-info" strokeWidth={2.5} />
</div>
<h3 class="text-lg font-bold text-base-content">Bluesoft Cosmo</h3>
</div>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text font-medium">Ativar Bluesoft Cosmo</span>
<div class="form-control mb-6">
<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
<input type="checkbox" class="toggle toggle-info" bind:checked={bluesoftAtivo} />
<span class="label-text font-semibold">Ativar Bluesoft Cosmo</span>
</label>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-6">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="form-control">
<label class="label" for="bluesoft-api-key">
<span class="label-text font-medium">API Key</span>
<label class="label pb-2" for="bluesoft-api-key">
<span class="label-text font-semibold">API Key</span>
</label>
<input
id="bluesoft-api-key"
type="password"
bind:value={bluesoftApiKey}
placeholder="Deixe em branco para manter atual"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!bluesoftAtivo}
/>
</div>
<div class="form-control">
<label class="label" for="bluesoft-api-url">
<span class="label-text font-medium">API URL</span>
<label class="label pb-2" for="bluesoft-api-url">
<span class="label-text font-semibold">API URL</span>
</label>
<input
id="bluesoft-api-url"
type="text"
bind:value={bluesoftApiUrl}
placeholder="https://api.cosmos.bluesoft.io/v1/products"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!bluesoftAtivo}
/>
</div>
</div>
</div>
<!-- Product-Search.net -->
<div class="divider">
<div class="flex items-center gap-2">
<Key class="h-5 w-5 text-warning" />
<span class="font-semibold">Product-Search.net</span>
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b-2 border-warning/20 pb-4">
<div class="rounded-lg bg-warning/10 p-2.5">
<Key class="h-5 w-5 text-warning" strokeWidth={2.5} />
</div>
<h3 class="text-lg font-bold text-base-content">Product-Search.net</h3>
</div>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text font-medium">Ativar Product-Search.net</span>
<div class="form-control mb-6">
<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
<span class="label-text font-semibold">Ativar Product-Search.net</span>
<input
type="checkbox"
class="toggle toggle-warning"
@@ -589,49 +623,51 @@
</label>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-6">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="form-control">
<label class="label" for="product-search-api-key">
<span class="label-text font-medium">API Key (Opcional)</span>
<label class="label pb-2" for="product-search-api-key">
<span class="label-text font-semibold">API Key (Opcional)</span>
</label>
<input
id="product-search-api-key"
type="password"
bind:value={productSearchApiKey}
placeholder="Deixe em branco para manter atual"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!productSearchAtivo}
/>
</div>
<div class="form-control">
<label class="label" for="product-search-api-url">
<span class="label-text font-medium">API URL</span>
<label class="label pb-2" for="product-search-api-url">
<span class="label-text font-semibold">API URL</span>
</label>
<input
id="product-search-api-url"
type="text"
bind:value={productSearchApiUrl}
placeholder="https://api.product-search.net/v1/products"
class="input input-bordered"
class="input input-bordered w-full focus:input-primary transition-colors h-12"
disabled={!productSearchAtivo}
/>
</div>
</div>
</div>
<!-- Botões -->
<div class="card-actions justify-end mt-6">
<div class="card-actions justify-end mt-8 border-t-2 border-base-300 pt-6">
<button
class="btn btn-primary"
class="btn btn-primary btn-lg min-w-[280px] shadow-lg hover:shadow-xl transition-all"
onclick={salvarConfiguracaoCodigoBarras}
disabled={processandoCodigoBarras}
>
{#if processandoCodigoBarras}
<span class="loading loading-spinner loading-sm"></span>
Salvando...
{:else}
<Save class="h-5 w-5" />
{/if}
Salvar Configurações de Código de Barras
{/if}
</button>
</div>
</div>