sgse-app/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte

<script lang="ts">
	import { Building2, ChevronRight, ClipboardCopy, FileText, Workflow } from 'lucide-svelte';
	import type { Component } from 'svelte';
	import { resolve } from '$app/paths';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
</script>

<ProtectedRoute>
	<main class="container mx-auto px-4 py-4">
		<!-- Breadcrumb -->
		<div class="breadcrumbs mb-4 text-sm">
			<ul>
				<li>
					<a href={resolve('/')} class="text-primary hover:underline">Dashboard</a>
				</li>
				<li>Licitações</li>
			</ul>
		</div>

		<!-- Cabeçalho -->
		<div class="mb-8">
			<h1 class="text-primary mb-2 text-4xl font-bold">Licitações</h1>
			<p class="text-base-content/70 text-lg">
				Gerencie empresas, contratos e processos licitatórios
			</p>
		</div>

		<!-- Cards Principais -->
		<div class="mb-8 grid gap-4 md:grid-cols-3">
			<a
				href={resolve('/licitacoes/empresas')}
				class="card bg-base-100 border-base-200 hover:border-primary border shadow-md transition-shadow hover:shadow-lg"
			>
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-primary/10 rounded-lg p-2">
							<Building2 class="text-primary h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="font-semibold">Empresas</h4>
					</div>
					<p class="text-base-content/70 text-sm">
						Cadastro, listagem e edição de empresas e seus contatos.
					</p>
				</div>
			</a>

			<a
				href={resolve('/licitacoes/contratos')}
				class="card bg-base-100 border-base-200 hover:border-primary border shadow-md transition-shadow hover:shadow-lg"
			>
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-primary/10 rounded-lg p-2">
							<FileText class="text-primary h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="font-semibold">Contratos</h4>
					</div>
					<p class="text-base-content/70 text-sm">Gestão de contratos, vigências e situações.</p>
				</div>
			</a>

			<div class="card bg-base-100 opacity-70 shadow-md">
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-base-200 rounded-lg p-2">
							<ClipboardCopy class="text-base-content/50 h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="text-base-content/70 font-semibold">Processos Licitatórios</h4>
					</div>
					<p class="text-base-content/60 text-sm">
						Em breve: cadastro e acompanhamento de licitações.
					</p>
				</div>
			</div>

			<div class="card bg-base-100 opacity-70 shadow-md">
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-base-200 rounded-lg p-2">
							<FileText class="text-base-content/50 h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="text-base-content/70 font-semibold">Documentação</h4>
					</div>
					<p class="text-base-content/60 text-sm">Em breve: gestão de documentos e editais.</p>
				</div>
			</div>
		</div>

		<!-- Seção Fluxos -->
		<div class="card bg-base-100 shadow-xl transition-all duration-300 hover:shadow-2xl">
			<div class="card-body">
				<!-- Cabeçalho da Categoria -->
				<div class="mb-6 flex items-start gap-6">
					<div class="bg-secondary/20 rounded-2xl p-4">
						<Workflow class="text-secondary h-12 w-12" strokeWidth={2} />
					</div>
					<div class="flex-1">
						<h2 class="card-title text-secondary mb-2 text-2xl">Fluxos de Trabalho</h2>
						<p class="text-base-content/70">
							Gerencie templates e fluxos de trabalho para contratos e processos
						</p>
					</div>
				</div>

				<!-- Grid de Opções -->
				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
					<a
						href={resolve('/fluxos')}
						class="group border-base-300 from-secondary/10 to-secondary/20 hover:border-secondary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
					>
						<div class="flex h-full flex-col">
							<div class="mb-4 flex items-start justify-between">
								<div
									class="bg-base-100 group-hover:bg-secondary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
								>
									<Workflow
										class="text-secondary h-5 w-5 transition-colors duration-300 group-hover:text-white"
										strokeWidth={2}
									/>
								</div>
								<ChevronRight
									class="text-base-content/30 group-hover:text-secondary h-5 w-5 transition-colors duration-300"
									strokeWidth={2}
								/>
							</div>
							<h3
								class="text-base-content group-hover:text-secondary mb-2 text-lg font-bold transition-colors duration-300"
							>
								Meus Fluxos
							</h3>
							<p class="text-base-content/70 flex-1 text-sm">
								Visualize e gerencie os fluxos de trabalho em execução
							</p>
						</div>
					</a>

					<a
						href={resolve('/fluxos/templates')}
						class="group border-base-300 from-secondary/10 to-secondary/20 hover:border-secondary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
					>
						<div class="flex h-full flex-col">
							<div class="mb-4 flex items-start justify-between">
								<div
									class="bg-base-100 group-hover:bg-secondary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
								>
									<FileText
										class="text-secondary h-5 w-5 transition-colors duration-300 group-hover:text-white"
										strokeWidth={2}
									/>
								</div>
								<ChevronRight
									class="text-base-content/30 group-hover:text-secondary h-5 w-5 transition-colors duration-300"
									strokeWidth={2}
								/>
							</div>
							<h3
								class="text-base-content group-hover:text-secondary mb-2 text-lg font-bold transition-colors duration-300"
							>
								Templates
							</h3>
							<p class="text-base-content/70 flex-1 text-sm">
								Crie e edite templates de fluxos de trabalho
							</p>
						</div>
					</a>
				</div>
			</div>
		</div>
	</main>
</ProtectedRoute>