feature/medical-history

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-radio-group": "1.3.6",
     "@radix-ui/react-slot": "1.2.0",
     "@tanstack/react-query": "5.83.0",
+    "baseui": "15.0.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
@@ -37,6 +38,8 @@
     "react-hook-form": "7.55.0",
     "recharts": "3.1.0",
     "sonner": "2.0.4",
+    "styletron-engine-atomic": "1.6.2",
+    "styletron-react": "6.1.1",
     "tailwind-merge": "3.2.0",
     "zod": "3.24.3",
     "zustand": "5.0.6"

src/app/(dashboard)/_sidebar/header.tsx

@@ -13,15 +13,13 @@ export function SidebarHeader() {
   return (
     <header className='relative flex items-center'>
       <Link href={ROUTES.dashboard.main}>
-        <div className='flex items-center'>
+        <div className='flex items-center gap-3'>
           <Image src={icon} alt='Símbolo do SVM' className='size-10 shrink-0' />
           <span
             data-visible={expanded}
-            className='text-primary absolute left-13 text-lg leading-none font-bold whitespace-nowrap opacity-0 transition-opacity duration-200 data-[visible=true]:opacity-100 data-[visible=true]:delay-150'
+            className='text-lg font-bold opacity-0 transition-opacity duration-200 data-[visible=true]:opacity-100 data-[visible=true]:delay-150'
           >
-            Sistema
-            <br />
-            Viver Melhor
+            SVM
           </span>
         </div>
       </Link>

src/app/(dashboard)/_sidebar/index.tsx

@@ -1,9 +1,10 @@
 import {
-  BoltIcon,
-  HeartHandshakeIcon,
-  LayoutDashboardIcon,
-  Share2Icon,
-  UserRoundCheckIcon,
+  Bolt,
+  Headset,
+  LayoutDashboard,
+  Share2,
+  UserRoundCheck,
+  UserRoundCog,
   Users2Icon,
 } from 'lucide-react'
 
@@ -36,11 +37,11 @@ export async function DashboardSidebar() {
 
 const SIDEBAR_SECTIONS = [
   {
-    id: 'common',
+    title: 'Geral',
     links: [
       {
         label: 'Visão Geral',
-        icon: <LayoutDashboardIcon />,
+        icon: <LayoutDashboard />,
         path: ROUTES.dashboard.main,
       },
       {
@@ -50,34 +51,34 @@ const SIDEBAR_SECTIONS = [
       },
       {
         label: 'Encaminhados',
-        icon: <Share2Icon />,
-        path: ROUTES.dashboard.referrals.main,
+        icon: <Share2 />,
+        path: ROUTES.dashboard.forwarded.main,
       },
       {
         label: 'Aprovações',
-        icon: <UserRoundCheckIcon />,
+        icon: <UserRoundCheck />,
         path: ROUTES.dashboard.approvals.main,
       },
-      {
-        label: 'Equipe',
-        icon: <HeartHandshakeIcon />,
-        path: ROUTES.dashboard.teams.main,
-      },
     ],
   },
   {
-    id: 'others',
+    title: 'Outros',
     links: [
+      {
+        label: 'Equipes',
+        icon: <UserRoundCog />,
+        path: ROUTES.dashboard.teams.main,
+      },
       {
         label: 'Configurações',
-        icon: <BoltIcon />,
+        icon: <Bolt />,
         path: ROUTES.dashboard.settings.main,
       },
-      // {
-      //   label: 'Suporte',
-      //   icon: <HeadsetIcon />,
-      //   path: ROUTES.dashboard.support.main,
-      // },
+      {
+        label: 'Suporte',
+        icon: <Headset />,
+        path: ROUTES.dashboard.support.main,
+      },
     ],
   },
 ]

src/app/(dashboard)/_sidebar/menu-section.tsx

@@ -8,7 +8,7 @@ import { cn } from '@/utils/class-name-merge'
 
 interface DashboardSidebarMenuSectionProps {
   sections: {
-    id: string
+    title: string
     links: {
       label: string
       icon: React.ReactNode
@@ -26,7 +26,14 @@ export function DashboardSidebarMenuSection({
   return (
     <section className='mb-auto space-y-8'>
       {sections.map((section) => (
-        <section key={section.id} className='transition-all'>
+        <section key={section.title} className='transition-all'>
+          <p
+            data-visible={expanded}
+            className='text-disabled mb-4 text-xs font-medium uppercase opacity-0 transition-opacity delay-75 data-[visible=true]:opacity-100'
+          >
+            {section.title}
+          </p>
+
           <nav className='flex flex-col gap-2'>
             {section.links.map((link) => {
               const isActive = link.path === pathname