Add daisyui integration, remove Header and page components, and update layout structure

apps/web/package.json

@@ -16,6 +16,7 @@
     "@sveltejs/kit": "^2.31.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.2",
     "@tailwindcss/vite": "^4.1.12",
+    "daisyui": "^5.3.8",
     "svelte": "^5.38.1",
     "svelte-check": "^4.3.1",
     "tailwindcss": "^4.1.12",

apps/web/src/app.css

@@ -1,5 +1,2 @@
-@import 'tailwindcss';
-
-body {
-    @apply bg-neutral-950 text-neutral-100;
-}
+@import "tailwindcss";
+@plugin "daisyui";

apps/web/src/components/Header.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-
-    const links = [
-        { to: "/", label: "Home" },
-        { to: "/todos", label: "Todos" },
-    ];
-
-</script>
-
-<div>
-	<div class="flex flex-row items-center justify-between px-4 py-2 md:px-6">
-		<nav class="flex gap-4 text-lg">
-			{#each links as link (link.to)}
-				<a
-					href={link.to}
-					class=""
-				>
-					{link.label}
-				</a>
-			{/each}
-		</nav>
-		<div class="flex items-center gap-2">
-		</div>
-	</div>
-	<hr class="border-neutral-800" />
-</div>

apps/web/src/lib/components/Button.svelte

@@ -0,0 +1 @@
+<button class="btn">Default</button>

apps/web/src/lib/components/Header.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import logo from "$lib/assets/logo_governo_PE.png";
+</script>
+
+<div class="navbar bg-base-200 shadow-sm p-4 w-76">
+  <img src={logo} alt="Logo" class="" />
+</div>

apps/web/src/lib/components/Sidebar.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import logo from "$lib/assets/logo_governo_PE.png";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+
+  const setores = [
+    { nome: "Recursos Humanos", link: "/recursos-humanos" },
+    { nome: "Financeiro", link: "/financeiro" },
+    { nome: "Controladoria", link: "/controladoria" },
+    { nome: "Licitações", link: "/licitacoes" },
+    { nome: "Compras", link: "/compras" },
+    { nome: "Jurídico", link: "/juridico" },
+    { nome: "Comunicação", link: "/comunicacao" },
+    { nome: "Secretaria Executiva", link: "/secretaria-executiva" },
+    {
+      nome: "Secretaria de Gestão de Pessoas",
+      link: "/gestao-pessoas",
+    },
+    { nome: "Tecnologia da Informação", link: "/ti" },
+  ];
+</script>
+
+<div class="drawer lg:drawer-open">
+  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+  <div class="drawer-content flex flex-col items-center">
+    <!-- Page content here -->
+    {@render children?.()}
+
+    <label for="my-drawer-3" class="btn drawer-button lg:hidden">
+      Open drawer
+    </label>
+  </div>
+  <div class="drawer-side">
+    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
+    ></label>
+    <ul class="menu bg-base-200 min-h-full w-76 p-4 gap-4">
+      <img src={logo} alt="Logo" class="" />
+      <!-- Sidebar content here -->
+      <li class="bg-primary rounded-2xl mt-4">
+        <a href="/">
+          <span>Dashboard</span>
+        </a>
+      </li>
+      {#each setores as s}
+        <li class="bg-primary rounded-2xl">
+          <a
+            href={s.link}
+            class:active={page.url.pathname === s.link}
+            aria-current={page.url.pathname === s.link ? "page" : undefined}
+          >
+            <span>{s.nome}</span>
+          </a>
+        </li>
+      {/each}
+      <li class="bg-primary rounded-2xl">
+        <a href="/">
+          <span>Solicitar acesso</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>

apps/web/src/routes/(dashboard)/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+  const { children } = $props();
+</script>
+
+<div class="max-w-[1600px w-full">
+  <main
+    id="container-central"
+    class="m-3 rounded-xl shadow-sm overflow-y-auto p-4"
+  >
+    {@render children()}
+  </main>
+</div>

apps/web/src/routes/(dashboard)/+page.svelte

@@ -0,0 +1,8 @@
+<div class="space-y-4">
+  <h2 class="text-2xl font-bold text-brand-dark">Dashboard</h2>
+  <div class="grid md:grid-cols-3 gap-4">
+    <div class="p-4 rounded-xl border">Bem-vindo ao SGSE.</div>
+    <div class="p-4 rounded-xl border">Selecione um setor no menu lateral.</div>
+    <div class="p-4 rounded-xl border">KPIs e gráficos virão aqui.</div>
+  </div>
+</div>

apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte

@@ -0,0 +1 @@
+<h1 class="text-2xl font-bold">Recursos Humanos</h1>

apps/web/src/routes/+layout.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import '../app.css';
-    import Header from '../components/Header.svelte';
-    import { PUBLIC_CONVEX_URL } from '$env/static/public';
-	import { setupConvex } from 'convex-svelte';
+  import "../app.css";
+  import Header from "$lib/components/Header.svelte";
+  import Sidebar from "$lib/components/Sidebar.svelte";
+  import { PUBLIC_CONVEX_URL } from "$env/static/public";
+  import { setupConvex } from "convex-svelte";
 
   const { children } = $props();
   setupConvex(PUBLIC_CONVEX_URL);
 </script>
 
-<div class="grid h-svh grid-rows-[auto_1fr]">
-	<Header />
-	<main class="overflow-y-auto">
-		{@render children()}
-	</main>
+<div>
+  <div class="flex">
+    <Sidebar>{@render children()}</Sidebar>
+  </div>
 </div>

apps/web/src/routes/+page.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-import { useQuery } from 'convex-svelte';
-import { api } from "@sgse-app/backend/convex/_generated/api";
-
-const healthCheck = useQuery(api.healthCheck.get, {});
-
-const TITLE_TEXT = `
-   ██████╗ ███████╗████████╗████████╗███████╗██████╗
-   ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
-   ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
-   ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
-   ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
-   ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
-
-   ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
-   ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
-      ██║       ███████╗   ██║   ███████║██║     █████╔╝
-      ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
-      ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
-      ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
-   `;
-</script>
-
-<div class="container mx-auto max-w-3xl px-4 py-2">
-	<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
-	<div class="grid gap-6">
-		<section class="rounded-lg border p-4">
-			<h2 class="mb-2 font-medium">API Status</h2>
-			<div class="flex items-center gap-2">
-				<div
-					class={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-				></div>
-				<span class="text-muted-foreground text-sm">
-					{healthCheck.isLoading
-						? "Checking..."
-						: healthCheck.data
-							? "Connected"
-							: "Disconnected"}
-				</span>
-			</div>
-		</section>
-	</div>
-</div>

bun.lock

@@ -25,6 +25,7 @@
         "@sveltejs/kit": "^2.31.1",
         "@sveltejs/vite-plugin-svelte": "^6.1.2",
         "@tailwindcss/vite": "^4.1.12",
+        "daisyui": "^5.3.8",
         "svelte": "^5.38.1",
         "svelte-check": "^4.3.1",
         "tailwindcss": "^4.1.12",
@@ -49,6 +50,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@convex-dev/better-auth": "^0.9.6",
+        "better-auth": "catalog:",
         "convex": "catalog:",
       },
       "devDependencies": {
@@ -323,6 +325,8 @@
 
     "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
 
+    "daisyui": ["daisyui@5.3.8", "", {}, "sha512-ihDXb07IzM/2ugkwBWdy2LFCaepdn1oGsKIsR3gNG/VuTAmS60+HUG9rskjR5BzyJOVVUDDpWoiX3PBDIT3DYQ=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],