Nutridash

Dashboard de nutrição em React, convertido a partir do protótipo HTML original em ../Nutridash. Toda a estilização foi migrada para Tailwind CSS (com daisyUI v5 como plugin) e a UI foi quebrada em componentes reutilizáveis.

Stack

• Vite 6 + React 19 + TypeScript
• Tailwind CSS v4 (via @tailwindcss/vite)
• daisyUI v5 (plugin do Tailwind)
• @phosphor-icons/react para os ícones
• ESLint 9 (flat config) + typescript-eslint

Estrutura

src/
├── components/
│   ├── cards/      # AddMealCard, TotalMealsCard
│   ├── forms/      # FormField
│   ├── layout/     # Sidebar, SidebarBrand, SidebarItem, Header
│   ├── macros/     # MacroStat, MacroStatsBar
│   ├── meals/      # MealActionButton, MealFab, MealsList/Table…
│   └── modal/      # AddMealModal e suas sub-partes
├── constants/      # MEAL_CATEGORIES, NAV_ITEMS
├── data/           # mocks de usuário, macros e refeições
├── hooks/          # useMealModal
├── pages/          # DashboardPage
├── styles/         # tailwind + tema sinutre
├── types/          # tipos de domínio
├── App.tsx
└── main.tsx

Scripts

npm install     # instala dependências
npm run dev     # servidor de desenvolvimento (vite)
npm run build   # build de produção (tsc -b + vite build)
npm run lint    # ESLint em todo o projeto
npm run preview # preview do build

Tema

O tema customizado sinutre (paleta verde) está definido em src/styles/theme.css usando a sintaxe @plugin 'daisyui/theme' do daisyUI v5.