Skip to content

plan.md

Latest commit

 

History

History
238 lines (178 loc) · 6.74 KB

plan.md

File metadata and controls

238 lines (178 loc) · 6.74 KB

Implement the following plan:

Plano: Implementação Frontend com Catppuccin

Resumo

Implementar frontend React completo com:

  • Tema dark (Catppuccin Mocha) e light (Catppuccin Latte)
  • Autenticação (Login/Register)
  • Layout responsivo com Navbar e Sidebar
  • Dashboard, User Management (admin) e Profile
  • Atualizar CLAUDE.md e PROJECT.md ao final

Fase 1: Theming Catppuccin

1.1 Atualizar /apps/frontend/src/index.css

Substituir cores neutras por paletas Catppuccin:

Latte (Light - :root):

  • background: #eff1f5, foreground: #4c4f69
  • primary: #1e66f5 (Blue), accent: #8839ef (Mauve)
  • destructive: #d20f39 (Red), muted: #bcc0cc (Surface1)

Mocha (Dark - .dark):

  • background: #1e1e2e, foreground: #cdd6f4
  • primary: #89b4fa (Blue), accent: #cba6f7 (Mauve)
  • destructive: #f38ba8 (Red), muted: #45475a (Surface1)

1.2 Criar /apps/frontend/src/stores/theme.ts

Store Zustand com persist para tema (light/dark/system)

1.3 Criar /apps/frontend/src/hooks/use-theme.ts

Hook que aplica classe .dark no <html> baseado no tema

Fase 2: Instalar shadcn/ui Components

cd apps/frontend
npx shadcn@latest add button input label card alert
npx shadcn@latest add dropdown-menu avatar separator sheet
npx shadcn@latest add table badge skeleton dialog
npx shadcn@latest add sonner

Dependências adicionais (para forms):

npm install react-hook-form @hookform/resolvers zod

Fase 3: Layout Components

Criar /apps/frontend/src/components/layout/

Arquivo Descrição
ThemeToggle.tsx Dropdown com opções Light/Dark/System
UserMenu.tsx Avatar + dropdown com Profile/Logout
Sidebar.tsx Nav lateral com links (Dashboard, Users, Files, Profile)
Navbar.tsx Header com logo, ThemeToggle e UserMenu
MainLayout.tsx Wrapper com Navbar + Sidebar + content area

Fase 4: Authentication

4.1 Criar /apps/frontend/src/features/auth/

auth/
├── types.ts          # Zod schemas (loginSchema, registerSchema)
└── pages/
├── LoginPage.tsx
└── RegisterPage.tsx

4.2 LoginPage

  • Form com email/password
  • Validação com react-hook-form + zod
  • Integração com authApi.login()
  • Redirect para / após sucesso

4.3 RegisterPage

  • Form com name/email/password/confirmPassword
  • Validação com zod
  • Integração com authApi.register()
  • Redirect para /login após sucesso

Fase 5: Dashboard

Criar /apps/frontend/src/features/dashboard/pages/DashboardPage.tsx

  • Welcome card com nome do usuário
  • Info de role (admin/user)
  • Cards de resumo (placeholder para métricas futuras)

Fase 6: User Management (Admin)

6.1 Criar /apps/frontend/src/stores/users.ts

Store para lista de usuários com actions: setUsers, addUser, updateUser, removeUser

6.2 Criar /apps/frontend/src/features/users/

users/
├── pages/
│   └── UsersPage.tsx       # Tabela com lista de usuários
└── components/
├── UserDialog.tsx      # Modal criar/editar usuário
└── DeleteUserDialog.tsx # Confirmação de exclusão

6.3 UsersPage

  • Tabela com colunas: Name, Email, Role, Actions
  • Botão "Add User" (abre UserDialog)
  • Actions: Edit (abre UserDialog), Delete (abre DeleteUserDialog)
  • Integração com usersApi.list(), usersApi.create(), etc.

Fase 7: Profile Page

Criar /apps/frontend/src/features/profile/pages/ProfilePage.tsx

  • Card com dados do usuário logado
  • Nome, email, role (badge), data de criação
  • (Opcional) Botão para editar perfil

Fase 8: Atualizar App.tsx

  • Importar todos os novos componentes
  • Configurar rotas com MainLayout
  • Adicionar AdminRoute para /users
  • Inicializar tema com useTheme()

Fase 9: Atualizar Documentação

9.1 CLAUDE.md

  • Adicionar seção Frontend Implementado
  • Listar componentes criados
  • Comandos para rodar frontend

9.2 PROJECT.md

  • Atualizar estado do frontend
  • Marcar tarefas como concluídas
  • Documentar estrutura de pastas final

Estrutura Final de Arquivos

src/
├── components/
│   ├── ui/                    # shadcn/ui (button, card, table, etc.)
│   └── layout/
│       ├── ThemeToggle.tsx
│       ├── UserMenu.tsx
│       ├── Sidebar.tsx
│       ├── Navbar.tsx
│       └── MainLayout.tsx
├── features/
│   ├── auth/
│   │   ├── types.ts
│   │   └── pages/
│   │       ├── LoginPage.tsx
│   │       └── RegisterPage.tsx
│   ├── dashboard/
│   │   └── pages/
│   │       └── DashboardPage.tsx
│   ├── users/
│   │   ├── pages/
│   │   │   └── UsersPage.tsx
│   │   └── components/
│   │       ├── UserDialog.tsx
│   │       └── DeleteUserDialog.tsx
│   └── profile/
│       └── pages/
│           └── ProfilePage.tsx
├── hooks/
│   └── use-theme.ts
├── stores/
│   ├── auth.ts               # (existente)
│   ├── theme.ts
│   └── users.ts
├── services/
│   └── api.ts                # (existente)
├── lib/
│   └── utils.ts              # (existente)
├── App.tsx
├── main.tsx
└── index.css                 # Catppuccin colors

Verificação

  1. npm run dev - Verificar que app inicia sem erros
  2. Testar toggle de tema (Light/Dark/System)
  3. Testar fluxo de Login/Register
  4. Verificar proteção de rotas (redirect para /login se não autenticado)
  5. Testar CRUD de usuários (como admin)
  6. Verificar responsividade (sidebar mobile via Sheet)
  7. npm run build - Verificar que build passa sem erros

Commits (seguindo CLAUDE.md)

  1. feat(theme): add Catppuccin Mocha/Latte theme with toggle
  2. feat(layout): add Navbar, Sidebar, and MainLayout components
  3. feat(auth-pages): add Login and Register pages with validation
  4. feat(dashboard): add Dashboard page
  5. feat(users): add User management with CRUD operations
  6. feat(profile): add Profile page
  7. docs: update CLAUDE.md and PROJECT.md with frontend status

If you need specific details from before exiting plan mode (like exact code snippets, error messages, or content you generated), read the full transcript at: /home/shotler/.claude/projects/-home-shotler-github-python-study-python-hexagonal-study/d7f7205c-1eb0-4c91-9b86-4ac1dc7d3cce.jsonl