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