mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-18 22:37:51 +00:00
Compare commits
No commits in common. "b8562bfda180cd1185e8a5dc840c72bdbc80d85e" and "634fa6fb480a29720217fab33c2ff5a71bfb7676" have entirely different histories.
b8562bfda1
...
634fa6fb48
@ -1,38 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist/
|
|
||||||
build/
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
|
|
||||||
.env
|
|
||||||
.env.local
|
|
||||||
.env.*.local
|
|
||||||
.env*
|
|
||||||
.env.*
|
|
||||||
.env.production
|
|
||||||
.env.development
|
|
||||||
|
|
||||||
# Backup files
|
|
||||||
*copy*
|
|
||||||
*.bak
|
|
||||||
96
CHANGELOG.md
96
CHANGELOG.md
@ -1,23 +1,85 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
Todas as mudanças notáveis neste projeto serão documentadas neste arquivo.
|
## [1.3.0] - 2024-03-21
|
||||||
|
|
||||||
O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.0.0/),
|
|
||||||
e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/).
|
|
||||||
|
|
||||||
## [1.1.0] - 2024-03-19
|
|
||||||
|
|
||||||
### Adicionado
|
### Adicionado
|
||||||
- Nova aba "Interesses" nas configurações do aluno para capturar preferências
|
- Implementada funcionalidade de deleção de histórias com confirmação
|
||||||
- Sistema de notificações toast usando Radix UI
|
- Adicionado modal de confirmação para exclusão
|
||||||
- Tabela `interests` no banco de dados para armazenar interesses dos alunos
|
- Integrado sistema de limpeza automática de recursos
|
||||||
|
|
||||||
### Modificado
|
|
||||||
- Menu lateral do dashboard agora é responsivo e colapsável
|
|
||||||
- Menu lateral do dashboard do aluno agora é responsivo e colapsável
|
|
||||||
- Menus laterais agora colapsam automaticamente ao clicar em um item
|
|
||||||
|
|
||||||
### Técnico
|
### Técnico
|
||||||
- Implementação do hook `useToast` para gerenciamento de notificações
|
- Implementada lógica de deleção em cascata para recursos relacionados
|
||||||
- Correção dos caminhos de importação para compatibilidade com Vite
|
- Criado fluxo otimizado para remoção de arquivos no storage
|
||||||
- Adição de políticas de segurança RLS na tabela `interests`
|
- Adicionado tratamento de erros robusto para o processo de deleção
|
||||||
|
|
||||||
|
### Modificado
|
||||||
|
- Melhorada interface de gerenciamento de histórias
|
||||||
|
- Adicionado feedback visual durante processo de exclusão
|
||||||
|
- Implementada navegação automática após deleção bem-sucedida
|
||||||
|
|
||||||
|
## [1.2.0] - 2024-12-31
|
||||||
|
|
||||||
|
### Adicionado
|
||||||
|
|
||||||
|
- Implementado componente `WordHighlighter` para destacar palavras importantes durante a leitura
|
||||||
|
- Adicionado modal de detalhes da palavra com significado, sílabas e exemplos
|
||||||
|
- Integrado sistema de tracking de palavras difíceis por aluno
|
||||||
|
|
||||||
|
### Técnico
|
||||||
|
|
||||||
|
- Criado sistema de teste para o componente `WordHighlighter`
|
||||||
|
- Implementada integração com Jest/Vitest para testes de componentes
|
||||||
|
- Adicionado suporte a ARIA labels para acessibilidade
|
||||||
|
- Configurado ambiente de teste com setup adequado
|
||||||
|
|
||||||
|
### Modificado
|
||||||
|
|
||||||
|
- Melhorada a experiência de leitura com destaque visual de palavras importantes
|
||||||
|
- Implementado feedback visual para palavras difíceis e importantes
|
||||||
|
- Adicionado suporte a interatividade nas palavras destacadas
|
||||||
|
|
||||||
|
## [1.2.1] - 2024-03-21
|
||||||
|
|
||||||
|
### Técnico
|
||||||
|
- Corrigida ordem de deleção de histórias para evitar problemas de integridade
|
||||||
|
- Otimizado processo de limpeza de arquivos no storage
|
||||||
|
- Melhorado tratamento de erros na deleção de histórias
|
||||||
|
|
||||||
|
### Modificado
|
||||||
|
- Aprimorado fluxo de exclusão de histórias para garantir remoção completa de recursos
|
||||||
|
- Adicionada confirmação visual durante processo de deleção
|
||||||
|
|
||||||
|
## [1.4.0] - 2024-03-21
|
||||||
|
|
||||||
|
### Adicionado
|
||||||
|
- Implementado sistema de exercícios de alfabetização
|
||||||
|
- Adicionados três tipos de exercícios: formação de palavras, completar frases e treino de pronúncia
|
||||||
|
- Criada página dedicada para exercícios
|
||||||
|
- Implementado tracking de progresso nos exercícios
|
||||||
|
|
||||||
|
### Técnico
|
||||||
|
- Criada nova rota para exercícios
|
||||||
|
- Adicionada tabela exercise_progress
|
||||||
|
- Implementada lógica de navegação entre exercícios
|
||||||
|
|
||||||
|
## [Não Publicado]
|
||||||
|
|
||||||
|
### Modificado
|
||||||
|
- Melhorada a interface do exercício de Formação de Palavras
|
||||||
|
- Adicionada barra de progresso com animação
|
||||||
|
- Adicionado feedback visual para acertos e erros
|
||||||
|
- Adicionada lista de palavras encontradas
|
||||||
|
- Melhorada a interatividade dos botões de sílabas
|
||||||
|
- Adicionados estados visuais para feedback do usuário
|
||||||
|
- Melhorada a área de exibição da palavra atual
|
||||||
|
- Adicionado contador de progresso
|
||||||
|
- Melhorada a consistência visual com outros exercícios
|
||||||
|
|
||||||
|
### Técnico
|
||||||
|
- Refatorado componente WordFormation para melhor gerenciamento de estado
|
||||||
|
- Adicionada validação para palavras repetidas
|
||||||
|
- Implementado sistema de feedback temporário
|
||||||
|
- Otimizadas transições e animações
|
||||||
|
- Corrigidos erros de tipagem no ExercisePage
|
||||||
|
- Adicionadas interfaces para Story e StoryRecording
|
||||||
|
- Melhorada type safety no acesso aos dados
|
||||||
|
|||||||
79
package-lock.json
generated
79
package-lock.json
generated
@ -13,14 +13,12 @@
|
|||||||
"@radix-ui/react-accordion": "^1.2.2",
|
"@radix-ui/react-accordion": "^1.2.2",
|
||||||
"@radix-ui/react-dialog": "^1.1.4",
|
"@radix-ui/react-dialog": "^1.1.4",
|
||||||
"@radix-ui/react-tabs": "^1.1.2",
|
"@radix-ui/react-tabs": "^1.1.2",
|
||||||
"@radix-ui/react-toast": "^1.2.4",
|
|
||||||
"@supabase/supabase-js": "^2.39.7",
|
"@supabase/supabase-js": "^2.39.7",
|
||||||
"@tanstack/react-query": "^5.62.8",
|
"@tanstack/react-query": "^5.62.8",
|
||||||
"@testing-library/react": "^16.1.0",
|
"@testing-library/react": "^16.1.0",
|
||||||
"@types/ioredis": "^4.28.10",
|
"@types/ioredis": "^4.28.10",
|
||||||
"@types/jest": "^29.5.14",
|
"@types/jest": "^29.5.14",
|
||||||
"@types/next": "^8.0.7",
|
"@types/next": "^8.0.7",
|
||||||
"class-variance-authority": "^0.7.1",
|
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"ioredis": "^5.4.2",
|
"ioredis": "^5.4.2",
|
||||||
"lucide-react": "^0.344.0",
|
"lucide-react": "^0.344.0",
|
||||||
@ -32,7 +30,7 @@
|
|||||||
"recharts": "^2.15.0",
|
"recharts": "^2.15.0",
|
||||||
"resend": "^3.2.0",
|
"resend": "^3.2.0",
|
||||||
"shadcn-ui": "^0.9.4",
|
"shadcn-ui": "^0.9.4",
|
||||||
"tailwind-merge": "^2.6.0",
|
"tailwind-merge": "^2.5.5",
|
||||||
"uuid": "^11.0.3",
|
"uuid": "^11.0.3",
|
||||||
"vitest": "^2.1.8"
|
"vitest": "^2.1.8"
|
||||||
},
|
},
|
||||||
@ -2201,40 +2199,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@radix-ui/react-toast": {
|
|
||||||
"version": "1.2.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.4.tgz",
|
|
||||||
"integrity": "sha512-Sch9idFJHJTMH9YNpxxESqABcAFweJG4tKv+0zo0m5XBvUSL8FM5xKcJLFLXononpePs8IclyX1KieL5SDUNgA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@radix-ui/primitive": "1.1.1",
|
|
||||||
"@radix-ui/react-collection": "1.1.1",
|
|
||||||
"@radix-ui/react-compose-refs": "1.1.1",
|
|
||||||
"@radix-ui/react-context": "1.1.1",
|
|
||||||
"@radix-ui/react-dismissable-layer": "1.1.3",
|
|
||||||
"@radix-ui/react-portal": "1.1.3",
|
|
||||||
"@radix-ui/react-presence": "1.1.2",
|
|
||||||
"@radix-ui/react-primitive": "2.0.1",
|
|
||||||
"@radix-ui/react-use-callback-ref": "1.1.0",
|
|
||||||
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
||||||
"@radix-ui/react-use-layout-effect": "1.1.0",
|
|
||||||
"@radix-ui/react-visually-hidden": "1.1.1"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@types/react": "*",
|
|
||||||
"@types/react-dom": "*",
|
|
||||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
|
||||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"@types/react": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@types/react-dom": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
|
||||||
@ -2301,29 +2265,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@radix-ui/react-visually-hidden": {
|
|
||||||
"version": "1.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.1.tgz",
|
|
||||||
"integrity": "sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@radix-ui/react-primitive": "2.0.1"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@types/react": "*",
|
|
||||||
"@types/react-dom": "*",
|
|
||||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
|
||||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"@types/react": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@types/react-dom": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@react-email/render": {
|
"node_modules/@react-email/render": {
|
||||||
"version": "0.0.16",
|
"version": "0.0.16",
|
||||||
"resolved": "https://registry.npmjs.org/@react-email/render/-/render-0.0.16.tgz",
|
"resolved": "https://registry.npmjs.org/@react-email/render/-/render-0.0.16.tgz",
|
||||||
@ -4150,18 +4091,6 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/class-variance-authority": {
|
|
||||||
"version": "0.7.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
|
|
||||||
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"dependencies": {
|
|
||||||
"clsx": "^2.1.1"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://polar.sh/cva"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/cli-cursor": {
|
"node_modules/cli-cursor": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
|
||||||
@ -8493,9 +8422,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/tailwind-merge": {
|
"node_modules/tailwind-merge": {
|
||||||
"version": "2.6.0",
|
"version": "2.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
|
||||||
"integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
|
"integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
|
|||||||
@ -20,14 +20,12 @@
|
|||||||
"@radix-ui/react-accordion": "^1.2.2",
|
"@radix-ui/react-accordion": "^1.2.2",
|
||||||
"@radix-ui/react-dialog": "^1.1.4",
|
"@radix-ui/react-dialog": "^1.1.4",
|
||||||
"@radix-ui/react-tabs": "^1.1.2",
|
"@radix-ui/react-tabs": "^1.1.2",
|
||||||
"@radix-ui/react-toast": "^1.2.4",
|
|
||||||
"@supabase/supabase-js": "^2.39.7",
|
"@supabase/supabase-js": "^2.39.7",
|
||||||
"@tanstack/react-query": "^5.62.8",
|
"@tanstack/react-query": "^5.62.8",
|
||||||
"@testing-library/react": "^16.1.0",
|
"@testing-library/react": "^16.1.0",
|
||||||
"@types/ioredis": "^4.28.10",
|
"@types/ioredis": "^4.28.10",
|
||||||
"@types/jest": "^29.5.14",
|
"@types/jest": "^29.5.14",
|
||||||
"@types/next": "^8.0.7",
|
"@types/next": "^8.0.7",
|
||||||
"class-variance-authority": "^0.7.1",
|
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"ioredis": "^5.4.2",
|
"ioredis": "^5.4.2",
|
||||||
"lucide-react": "^0.344.0",
|
"lucide-react": "^0.344.0",
|
||||||
@ -39,7 +37,7 @@
|
|||||||
"recharts": "^2.15.0",
|
"recharts": "^2.15.0",
|
||||||
"resend": "^3.2.0",
|
"resend": "^3.2.0",
|
||||||
"shadcn-ui": "^0.9.4",
|
"shadcn-ui": "^0.9.4",
|
||||||
"tailwind-merge": "^2.6.0",
|
"tailwind-merge": "^2.5.5",
|
||||||
"uuid": "^11.0.3",
|
"uuid": "^11.0.3",
|
||||||
"vitest": "^2.1.8"
|
"vitest": "^2.1.8"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -11,7 +11,6 @@ import { User, Theme } from './types';
|
|||||||
import { AuthProvider } from './contexts/AuthContext'
|
import { AuthProvider } from './contexts/AuthContext'
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
import { Toaster } from './components/ui/toaster';
|
|
||||||
|
|
||||||
type AppStep =
|
type AppStep =
|
||||||
| 'welcome'
|
| 'welcome'
|
||||||
@ -123,7 +122,6 @@ export function App() {
|
|||||||
onStorySelect={handleStorySelect}
|
onStorySelect={handleStorySelect}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Toaster />
|
|
||||||
</div>
|
</div>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
|
|||||||
@ -1,127 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
|
||||||
import { X } from "lucide-react"
|
|
||||||
import { cn } from "../../lib/utils"
|
|
||||||
|
|
||||||
const ToastProvider = ToastPrimitives.Provider
|
|
||||||
|
|
||||||
const ToastViewport = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<ToastPrimitives.Viewport
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
|
||||||
|
|
||||||
const toastVariants = cva(
|
|
||||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-gray-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: "border bg-white text-gray-900",
|
|
||||||
destructive:
|
|
||||||
"destructive group border-red-500 bg-red-500 text-white",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const Toast = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
|
||||||
VariantProps<typeof toastVariants>
|
|
||||||
>(({ className, variant, ...props }, ref) => {
|
|
||||||
console.log('Toast component props:', { className, variant, ...props })
|
|
||||||
return (
|
|
||||||
<ToastPrimitives.Root
|
|
||||||
ref={ref}
|
|
||||||
className={cn(toastVariants({ variant }), className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
Toast.displayName = ToastPrimitives.Root.displayName
|
|
||||||
|
|
||||||
const ToastAction = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<ToastPrimitives.Action
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-red-200 group-[.destructive]:hover:bg-red-100 group-[.destructive]:focus:ring-red-400",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
|
||||||
|
|
||||||
const ToastClose = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<ToastPrimitives.Close
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"absolute right-1 top-1 rounded-md p-1 text-gray-400 opacity-0 transition-opacity hover:text-gray-900 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-100 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
toast-close=""
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</ToastPrimitives.Close>
|
|
||||||
))
|
|
||||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
|
||||||
|
|
||||||
const ToastTitle = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<ToastPrimitives.Title
|
|
||||||
ref={ref}
|
|
||||||
className={cn("text-sm font-semibold text-gray-900", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
|
||||||
|
|
||||||
const ToastDescription = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<ToastPrimitives.Description
|
|
||||||
ref={ref}
|
|
||||||
className={cn("text-sm text-gray-600", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
|
||||||
|
|
||||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
|
||||||
|
|
||||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
|
||||||
|
|
||||||
export {
|
|
||||||
type ToastProps,
|
|
||||||
type ToastActionElement,
|
|
||||||
ToastProvider,
|
|
||||||
ToastViewport,
|
|
||||||
Toast,
|
|
||||||
ToastTitle,
|
|
||||||
ToastDescription,
|
|
||||||
ToastClose,
|
|
||||||
ToastAction,
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import {
|
|
||||||
Toast,
|
|
||||||
ToastClose,
|
|
||||||
ToastDescription,
|
|
||||||
ToastProvider,
|
|
||||||
ToastTitle,
|
|
||||||
ToastViewport,
|
|
||||||
} from "./toast"
|
|
||||||
import { useToast } from "../../hooks/useToast"
|
|
||||||
|
|
||||||
export function Toaster() {
|
|
||||||
const { toasts } = useToast()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ToastProvider duration={3000}>
|
|
||||||
{toasts.map(function ({ id, title, description, action, open, ...props }) {
|
|
||||||
return (
|
|
||||||
<Toast key={id} {...props} open={open}>
|
|
||||||
<div className="grid gap-1">
|
|
||||||
{title && <ToastTitle>{title}</ToastTitle>}
|
|
||||||
{description && (
|
|
||||||
<ToastDescription>{description}</ToastDescription>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{action}
|
|
||||||
<ToastClose />
|
|
||||||
</Toast>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
<ToastViewport />
|
|
||||||
</ToastProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
|
|
||||||
import type {
|
|
||||||
ToastActionElement,
|
|
||||||
ToastProps,
|
|
||||||
} from "../components/ui/toast"
|
|
||||||
|
|
||||||
const TOAST_LIMIT = 1
|
|
||||||
const TOAST_REMOVE_DELAY = 3000 // 3 segundos
|
|
||||||
|
|
||||||
type ToasterToast = ToastProps & {
|
|
||||||
id: string
|
|
||||||
title?: React.ReactNode
|
|
||||||
description?: React.ReactNode
|
|
||||||
action?: ToastActionElement
|
|
||||||
}
|
|
||||||
|
|
||||||
const actionTypes = {
|
|
||||||
ADD_TOAST: "ADD_TOAST",
|
|
||||||
UPDATE_TOAST: "UPDATE_TOAST",
|
|
||||||
DISMISS_TOAST: "DISMISS_TOAST",
|
|
||||||
REMOVE_TOAST: "REMOVE_TOAST",
|
|
||||||
} as const
|
|
||||||
|
|
||||||
let count = 0
|
|
||||||
|
|
||||||
function genId() {
|
|
||||||
count = (count + 1) % Number.MAX_VALUE
|
|
||||||
return count.toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
type ActionType = typeof actionTypes
|
|
||||||
|
|
||||||
type Action =
|
|
||||||
| {
|
|
||||||
type: ActionType["ADD_TOAST"]
|
|
||||||
toast: ToasterToast
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType["UPDATE_TOAST"]
|
|
||||||
toast: Partial<ToasterToast>
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType["DISMISS_TOAST"]
|
|
||||||
toastId?: ToasterToast["id"]
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType["REMOVE_TOAST"]
|
|
||||||
toastId?: ToasterToast["id"]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
toasts: ToasterToast[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
|
||||||
|
|
||||||
const addToRemoveQueue = (toastId: string) => {
|
|
||||||
if (toastTimeouts.has(toastId)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeout = setTimeout(() => {
|
|
||||||
toastTimeouts.delete(toastId)
|
|
||||||
dispatch({
|
|
||||||
type: "REMOVE_TOAST",
|
|
||||||
toastId: toastId,
|
|
||||||
})
|
|
||||||
}, TOAST_REMOVE_DELAY)
|
|
||||||
|
|
||||||
toastTimeouts.set(toastId, timeout)
|
|
||||||
}
|
|
||||||
|
|
||||||
const reducer = (state: State, action: Action): State => {
|
|
||||||
switch (action.type) {
|
|
||||||
case "ADD_TOAST":
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
|
||||||
}
|
|
||||||
|
|
||||||
case "UPDATE_TOAST":
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: state.toasts.map((t) =>
|
|
||||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
|
||||||
),
|
|
||||||
}
|
|
||||||
|
|
||||||
case "DISMISS_TOAST": {
|
|
||||||
const { toastId } = action
|
|
||||||
|
|
||||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
|
||||||
// but I'll keep it here for simplicity
|
|
||||||
if (toastId) {
|
|
||||||
addToRemoveQueue(toastId)
|
|
||||||
} else {
|
|
||||||
state.toasts.forEach((toast) => {
|
|
||||||
addToRemoveQueue(toast.id)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: state.toasts.map((t) =>
|
|
||||||
t.id === toastId || toastId === undefined
|
|
||||||
? {
|
|
||||||
...t,
|
|
||||||
open: false,
|
|
||||||
}
|
|
||||||
: t
|
|
||||||
),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
case "REMOVE_TOAST":
|
|
||||||
if (action.toastId === undefined) {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: [],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const listeners: Array<(state: State) => void> = []
|
|
||||||
|
|
||||||
let memoryState: State = { toasts: [] }
|
|
||||||
|
|
||||||
function dispatch(action: Action) {
|
|
||||||
memoryState = reducer(memoryState, action)
|
|
||||||
listeners.forEach((listener) => {
|
|
||||||
listener(memoryState)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
type Toast = Omit<ToasterToast, "id">
|
|
||||||
|
|
||||||
function toast({ ...props }: Toast) {
|
|
||||||
const id = genId()
|
|
||||||
|
|
||||||
const update = (props: ToasterToast) =>
|
|
||||||
dispatch({
|
|
||||||
type: "UPDATE_TOAST",
|
|
||||||
toast: { ...props, id },
|
|
||||||
})
|
|
||||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
|
||||||
|
|
||||||
dispatch({
|
|
||||||
type: "ADD_TOAST",
|
|
||||||
toast: {
|
|
||||||
...props,
|
|
||||||
id,
|
|
||||||
open: true,
|
|
||||||
onOpenChange: (open) => {
|
|
||||||
if (!open) dismiss()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: id,
|
|
||||||
dismiss,
|
|
||||||
update,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function useToast() {
|
|
||||||
const [state, setState] = React.useState<State>(memoryState)
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
listeners.push(setState)
|
|
||||||
return () => {
|
|
||||||
const index = listeners.indexOf(setState)
|
|
||||||
if (index > -1) {
|
|
||||||
listeners.splice(index, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [state])
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toast,
|
|
||||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { useToast, toast }
|
|
||||||
20
src/main.tsx
20
src/main.tsx
@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
|
|||||||
import { RouterProvider } from 'react-router-dom';
|
import { RouterProvider } from 'react-router-dom';
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
import { router } from './routes';
|
import { router } from './routes';
|
||||||
import { Toaster } from './components/ui/toaster';
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
const queryClient = new QueryClient({
|
const queryClient = new QueryClient({
|
||||||
@ -16,15 +15,10 @@ const queryClient = new QueryClient({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function Root() {
|
createRoot(document.getElementById('root')!).render(
|
||||||
return (
|
<StrictMode>
|
||||||
<StrictMode>
|
<QueryClientProvider client={queryClient}>
|
||||||
<QueryClientProvider client={queryClient}>
|
<RouterProvider router={router} />
|
||||||
<RouterProvider router={router} />
|
</QueryClientProvider>
|
||||||
<Toaster />
|
</StrictMode>
|
||||||
</QueryClientProvider>
|
);
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(<Root />);
|
|
||||||
@ -8,205 +8,126 @@ import {
|
|||||||
Settings,
|
Settings,
|
||||||
LogOut,
|
LogOut,
|
||||||
School,
|
School,
|
||||||
UserRound,
|
UserRound
|
||||||
Menu,
|
|
||||||
X,
|
|
||||||
ChevronLeft,
|
|
||||||
ChevronRight
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAuth } from '../../hooks/useAuth';
|
import { useAuth } from '../../hooks/useAuth';
|
||||||
import * as Dialog from '@radix-ui/react-dialog';
|
|
||||||
|
|
||||||
export function DashboardLayout() {
|
export function DashboardLayout() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { signOut } = useAuth();
|
const { signOut } = useAuth();
|
||||||
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
|
|
||||||
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
await signOut();
|
await signOut();
|
||||||
navigate('/');
|
navigate('/');
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleNavigation = () => {
|
|
||||||
setIsMobileMenuOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const NavItems = () => (
|
|
||||||
<nav className="p-4 space-y-1">
|
|
||||||
<NavLink
|
|
||||||
to="/dashboard"
|
|
||||||
end
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<LayoutDashboard className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Visão Geral</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/dashboard/turmas"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Users className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Turmas</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/dashboard/professores"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<GraduationCap className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Professores</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/dashboard/alunos"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<UserRound className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Alunos</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/dashboard/historias"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<BookOpen className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Histórias</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/dashboard/configuracoes"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Settings className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Configurações</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
handleNavigation();
|
|
||||||
handleLogout();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full mt-4"
|
|
||||||
>
|
|
||||||
<LogOut className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Sair</span>}
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Mobile Menu Button */}
|
{/* Sidebar */}
|
||||||
<button
|
<aside className="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200">
|
||||||
onClick={() => setIsMobileMenuOpen(true)}
|
|
||||||
className="fixed top-4 left-4 p-2 bg-white rounded-lg shadow-sm border border-gray-200 lg:hidden z-50"
|
|
||||||
>
|
|
||||||
<Menu className="h-6 w-6 text-gray-600" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Desktop Sidebar */}
|
|
||||||
<aside
|
|
||||||
className={`fixed left-0 top-0 h-full bg-white border-r border-gray-200 transition-all duration-300 hidden lg:block ${
|
|
||||||
isCollapsed ? 'w-20' : 'w-64'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 p-6 border-b border-gray-200">
|
<div className="flex items-center gap-2 p-6 border-b border-gray-200">
|
||||||
<School className="h-8 w-8 text-purple-600" />
|
<School className="h-8 w-8 text-purple-600" />
|
||||||
{!isCollapsed && (
|
<span className="font-semibold text-gray-900">Histórias Mágicas</span>
|
||||||
<span className="font-semibold text-gray-900">Histórias Mágicas</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<nav className="p-4 space-y-1">
|
||||||
|
<NavLink
|
||||||
|
to="/dashboard"
|
||||||
|
end
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<LayoutDashboard className="h-5 w-5" />
|
||||||
|
Visão Geral
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
<NavItems />
|
<NavLink
|
||||||
|
to="/dashboard/turmas"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Users className="h-5 w-5" />
|
||||||
|
Turmas
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
{/* Collapse Button */}
|
<NavLink
|
||||||
<button
|
to="/dashboard/professores"
|
||||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
className={({ isActive }) =>
|
||||||
className="absolute bottom-4 -right-4 p-2 bg-white rounded-full shadow-sm border border-gray-200"
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
>
|
isActive
|
||||||
{isCollapsed ? (
|
? 'bg-purple-50 text-purple-700'
|
||||||
<ChevronRight className="h-4 w-4 text-gray-600" />
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
) : (
|
}`
|
||||||
<ChevronLeft className="h-4 w-4 text-gray-600" />
|
}
|
||||||
)}
|
>
|
||||||
</button>
|
<GraduationCap className="h-5 w-5" />
|
||||||
|
Professores
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
to="/dashboard/alunos"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<UserRound className="h-5 w-5" />
|
||||||
|
Alunos
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
to="/dashboard/historias"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<BookOpen className="h-5 w-5" />
|
||||||
|
Histórias
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
to="/dashboard/configuracoes"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Settings className="h-5 w-5" />
|
||||||
|
Configurações
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full"
|
||||||
|
>
|
||||||
|
<LogOut className="h-5 w-5" />
|
||||||
|
Sair
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
{/* Mobile Menu Dialog */}
|
|
||||||
<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
|
|
||||||
<Dialog.Portal>
|
|
||||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
|
|
||||||
<Dialog.Content className="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50 lg:hidden">
|
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<School className="h-8 w-8 text-purple-600" />
|
|
||||||
<span className="font-semibold text-gray-900">
|
|
||||||
Histórias Mágicas
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsMobileMenuOpen(false)}
|
|
||||||
className="p-2 hover:bg-gray-100 rounded-lg"
|
|
||||||
>
|
|
||||||
<X className="h-5 w-5 text-gray-600" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<NavItems />
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Portal>
|
|
||||||
</Dialog.Root>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main
|
<main className="ml-64 p-8">
|
||||||
className={`transition-all duration-300 ${
|
|
||||||
isCollapsed ? 'lg:ml-20' : 'lg:ml-64'
|
|
||||||
} p-8`}
|
|
||||||
>
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,190 +7,134 @@ import {
|
|||||||
LogOut,
|
LogOut,
|
||||||
School,
|
School,
|
||||||
Trophy,
|
Trophy,
|
||||||
History,
|
History
|
||||||
Menu,
|
|
||||||
X,
|
|
||||||
ChevronLeft,
|
|
||||||
ChevronRight
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAuth } from '../../hooks/useAuth';
|
import { useAuth } from '../../hooks/useAuth';
|
||||||
import * as Dialog from '@radix-ui/react-dialog';
|
|
||||||
|
|
||||||
export function StudentDashboardLayout() {
|
export function StudentDashboardLayout() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { signOut } = useAuth();
|
const { signOut } = useAuth();
|
||||||
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
|
|
||||||
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
await signOut();
|
await signOut();
|
||||||
navigate('/');
|
navigate('/');
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleNavigation = () => {
|
|
||||||
setIsMobileMenuOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const NavItems = () => (
|
|
||||||
<nav className="p-4 space-y-1">
|
|
||||||
<NavLink
|
|
||||||
to="/aluno"
|
|
||||||
end
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<LayoutDashboard className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Início</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/aluno/historias"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<BookOpen className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Minhas Histórias</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/aluno/conquistas"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Trophy className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Conquistas</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/aluno/historico"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-700'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<History className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Histórico</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink
|
|
||||||
to="/aluno/configuracoes"
|
|
||||||
onClick={handleNavigation}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
|
||||||
isActive
|
|
||||||
? 'bg-purple-50 text-purple-600'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Settings className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Configurações</span>}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
handleNavigation();
|
|
||||||
handleLogout();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full mt-4"
|
|
||||||
>
|
|
||||||
<LogOut className="h-5 w-5" />
|
|
||||||
{!isCollapsed && <span>Sair</span>}
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Mobile Menu Button */}
|
{/* Sidebar */}
|
||||||
<button
|
<aside className="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200">
|
||||||
onClick={() => setIsMobileMenuOpen(true)}
|
|
||||||
className="fixed top-4 left-4 p-2 bg-white rounded-lg shadow-sm border border-gray-200 lg:hidden z-50"
|
|
||||||
>
|
|
||||||
<Menu className="h-6 w-6 text-gray-600" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Desktop Sidebar */}
|
|
||||||
<aside
|
|
||||||
className={`fixed left-0 top-0 h-full bg-white border-r border-gray-200 transition-all duration-300 hidden lg:block ${
|
|
||||||
isCollapsed ? 'w-20' : 'w-64'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 p-6 border-b border-gray-200">
|
<div className="flex items-center gap-2 p-6 border-b border-gray-200">
|
||||||
<School className="h-8 w-8 text-purple-600" />
|
<School className="h-8 w-8 text-purple-600" />
|
||||||
{!isCollapsed && (
|
<span className="font-semibold text-gray-900">Histórias Mágicas</span>
|
||||||
<span className="font-semibold text-gray-900">Histórias Mágicas</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<nav className="p-4 space-y-1">
|
||||||
|
<NavLink
|
||||||
|
to="/aluno"
|
||||||
|
end
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<LayoutDashboard className="h-5 w-5" />
|
||||||
|
Início
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
<NavItems />
|
<NavLink
|
||||||
|
to="/aluno/historias"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<BookOpen className="h-5 w-5" />
|
||||||
|
Minhas Histórias
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
{/* Collapse Button */}
|
<NavLink
|
||||||
<button
|
to="/aluno/conquistas"
|
||||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
className={({ isActive }) =>
|
||||||
className="absolute bottom-4 -right-4 p-2 bg-white rounded-full shadow-sm border border-gray-200"
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
>
|
isActive
|
||||||
{isCollapsed ? (
|
? 'bg-purple-50 text-purple-700'
|
||||||
<ChevronRight className="h-4 w-4 text-gray-600" />
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
) : (
|
}`
|
||||||
<ChevronLeft className="h-4 w-4 text-gray-600" />
|
}
|
||||||
)}
|
>
|
||||||
</button>
|
<Trophy className="h-5 w-5" />
|
||||||
|
Conquistas
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
to="/aluno/historico"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-700'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<History className="h-5 w-5" />
|
||||||
|
Histórico
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
to="/aluno/configuracoes"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
|
||||||
|
isActive
|
||||||
|
? 'bg-purple-50 text-purple-600'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Settings className="h-5 w-5" />
|
||||||
|
Configurações
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full mt-4"
|
||||||
|
>
|
||||||
|
<LogOut className="h-5 w-5" />
|
||||||
|
Sair
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Footer com informações do aluno */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-sm font-medium text-purple-600">
|
||||||
|
{/* Primeira letra do nome do aluno */}
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-gray-900 truncate">
|
||||||
|
{/* Nome do aluno */}
|
||||||
|
Aluno da Silva
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 truncate">
|
||||||
|
{/* Turma do aluno */}
|
||||||
|
5º Ano A
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
{/* Mobile Menu Dialog */}
|
|
||||||
<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
|
|
||||||
<Dialog.Portal>
|
|
||||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
|
|
||||||
<Dialog.Content className="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50 lg:hidden">
|
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<School className="h-8 w-8 text-purple-600" />
|
|
||||||
<span className="font-semibold text-gray-900">
|
|
||||||
Histórias Mágicas
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsMobileMenuOpen(false)}
|
|
||||||
className="p-2 hover:bg-gray-100 rounded-lg"
|
|
||||||
>
|
|
||||||
<X className="h-5 w-5 text-gray-600" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<NavItems />
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Portal>
|
|
||||||
</Dialog.Root>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main
|
<main className="ml-64 p-8">
|
||||||
className={`transition-all duration-300 ${
|
|
||||||
isCollapsed ? 'lg:ml-20' : 'lg:ml-64'
|
|
||||||
} p-8`}
|
|
||||||
>
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,246 +3,8 @@ import { Input } from '../../components/ui/input';
|
|||||||
import { DatePicker } from '../../components/ui/date-picker';
|
import { DatePicker } from '../../components/ui/date-picker';
|
||||||
import { Select } from '../../components/ui/select';
|
import { Select } from '../../components/ui/select';
|
||||||
import { AvatarUpload } from '../../components/ui/avatar-upload';
|
import { AvatarUpload } from '../../components/ui/avatar-upload';
|
||||||
import React from 'react';
|
|
||||||
import { Heart, Gamepad2, Dog, Map, Pizza, School as SchoolIcon, Tv, Music, Palette, Trophy, Loader2 } from 'lucide-react';
|
|
||||||
import { supabase } from '../../lib/supabase';
|
|
||||||
import { useToast } from '../../hooks/useToast';
|
|
||||||
|
|
||||||
interface InterestState {
|
|
||||||
category: string;
|
|
||||||
items: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function StudentSettingsPage() {
|
export function StudentSettingsPage() {
|
||||||
const { toast } = useToast();
|
|
||||||
const [interests, setInterests] = React.useState<InterestState[]>([
|
|
||||||
{ category: 'pets', items: [] },
|
|
||||||
{ category: 'entertainment', items: [] },
|
|
||||||
{ category: 'hobbies', items: [] },
|
|
||||||
{ category: 'places', items: [] },
|
|
||||||
{ category: 'food', items: [] },
|
|
||||||
{ category: 'school', items: [] },
|
|
||||||
{ category: 'shows', items: [] },
|
|
||||||
{ category: 'music', items: [] },
|
|
||||||
{ category: 'art', items: [] },
|
|
||||||
{ category: 'dreams', items: [] }
|
|
||||||
]);
|
|
||||||
const [loading, setLoading] = React.useState(false);
|
|
||||||
const [saving, setSaving] = React.useState(false);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
const loadInterests = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const { data: { session } } = await supabase.auth.getSession();
|
|
||||||
if (!session?.user?.id) return;
|
|
||||||
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('interests')
|
|
||||||
.select('*')
|
|
||||||
.eq('student_id', session.user.id);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
if (data) {
|
|
||||||
// Agrupa os interesses por categoria
|
|
||||||
const groupedInterests = data.reduce((acc, interest) => {
|
|
||||||
const category = interest.category;
|
|
||||||
if (!acc[category]) {
|
|
||||||
acc[category] = [];
|
|
||||||
}
|
|
||||||
if (interest.item) {
|
|
||||||
acc[category].push(interest.item);
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {} as Record<string, string[]>);
|
|
||||||
|
|
||||||
// Atualiza o estado com os interesses agrupados
|
|
||||||
const loadedInterests = interests.map(interest => ({
|
|
||||||
...interest,
|
|
||||||
items: groupedInterests[interest.category] || []
|
|
||||||
}));
|
|
||||||
setInterests(loadedInterests);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Erro ao carregar interesses:', error);
|
|
||||||
toast({
|
|
||||||
title: 'Erro',
|
|
||||||
description: 'Não foi possível carregar seus interesses',
|
|
||||||
variant: 'destructive'
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
loadInterests();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleInterestChange = async (category: string, value: string) => {
|
|
||||||
try {
|
|
||||||
const { data: { session } } = await supabase.auth.getSession();
|
|
||||||
if (!session?.user?.id) {
|
|
||||||
toast({
|
|
||||||
title: 'Erro',
|
|
||||||
description: 'Você precisa estar logado para adicionar interesses',
|
|
||||||
variant: 'destructive'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adiciona o novo interesse no banco de dados
|
|
||||||
const { error } = await supabase
|
|
||||||
.from('interests')
|
|
||||||
.insert({
|
|
||||||
student_id: session.user.id,
|
|
||||||
category: category,
|
|
||||||
item: value,
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
// Atualiza o estado local
|
|
||||||
setInterests(prev =>
|
|
||||||
prev.map(interest =>
|
|
||||||
interest.category === category
|
|
||||||
? { ...interest, items: [...interest.items, value] }
|
|
||||||
: interest
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
toast({
|
|
||||||
title: 'Sucesso',
|
|
||||||
description: 'Interesse adicionado com sucesso',
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Erro ao adicionar interesse:', error);
|
|
||||||
toast({
|
|
||||||
title: 'Erro',
|
|
||||||
description: 'Não foi possível adicionar o interesse',
|
|
||||||
variant: 'destructive'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemoveInterest = async (category: string, item: string) => {
|
|
||||||
try {
|
|
||||||
const { data: { session } } = await supabase.auth.getSession();
|
|
||||||
if (!session?.user?.id) {
|
|
||||||
toast({
|
|
||||||
title: 'Erro',
|
|
||||||
description: 'Você precisa estar logado para remover interesses',
|
|
||||||
variant: 'destructive'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove o interesse do banco de dados
|
|
||||||
const { error } = await supabase
|
|
||||||
.from('interests')
|
|
||||||
.delete()
|
|
||||||
.match({
|
|
||||||
student_id: session.user.id,
|
|
||||||
category: category,
|
|
||||||
item: item
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
// Atualiza o estado local
|
|
||||||
setInterests(prev =>
|
|
||||||
prev.map(interest =>
|
|
||||||
interest.category === category
|
|
||||||
? { ...interest, items: interest.items.filter(i => i !== item) }
|
|
||||||
: interest
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
toast({
|
|
||||||
title: 'Sucesso',
|
|
||||||
description: 'Interesse removido com sucesso',
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Erro ao remover interesse:', error);
|
|
||||||
toast({
|
|
||||||
title: 'Erro',
|
|
||||||
description: 'Não foi possível remover o interesse',
|
|
||||||
variant: 'destructive'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const InterestInput = ({ category, icon, placeholder }: { category: string; icon: React.ReactNode; placeholder: string }) => {
|
|
||||||
const [inputValue, setInputValue] = React.useState('');
|
|
||||||
const [isAdding, setIsAdding] = React.useState(false);
|
|
||||||
|
|
||||||
const handleAdd = async () => {
|
|
||||||
const value = inputValue.trim();
|
|
||||||
if (value && !isAdding) {
|
|
||||||
setIsAdding(true);
|
|
||||||
await handleInterestChange(category, value);
|
|
||||||
setInputValue('');
|
|
||||||
setIsAdding(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-2 text-sm font-medium text-gray-700">
|
|
||||||
{icon}
|
|
||||||
<span className="capitalize">{category}</span>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
|
||||||
value={inputValue}
|
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
|
||||||
placeholder={placeholder}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
handleAdd();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
disabled={!inputValue.trim() || isAdding}
|
|
||||||
className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
|
||||||
>
|
|
||||||
{isAdding ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
Adicionando...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
'Adicionar'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{interests.find(i => i.category === category)?.items.map((item) => (
|
|
||||||
<span
|
|
||||||
key={item}
|
|
||||||
className="inline-flex items-center gap-1 px-2 py-1 bg-purple-50 text-purple-700 rounded-full text-sm"
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
<button
|
|
||||||
onClick={() => handleRemoveInterest(category, item)}
|
|
||||||
className="hover:text-purple-900"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="max-w-4xl mx-auto">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">
|
<h1 className="text-2xl font-bold text-gray-900 mb-6">
|
||||||
@ -252,7 +14,6 @@ export function StudentSettingsPage() {
|
|||||||
<Tabs defaultValue="personal">
|
<Tabs defaultValue="personal">
|
||||||
<TabsList>
|
<TabsList>
|
||||||
<TabsTrigger value="personal">Informações Pessoais</TabsTrigger>
|
<TabsTrigger value="personal">Informações Pessoais</TabsTrigger>
|
||||||
<TabsTrigger value="interests">Interesses</TabsTrigger>
|
|
||||||
<TabsTrigger value="preferences">Preferências</TabsTrigger>
|
<TabsTrigger value="preferences">Preferências</TabsTrigger>
|
||||||
<TabsTrigger value="accessibility">Acessibilidade</TabsTrigger>
|
<TabsTrigger value="accessibility">Acessibilidade</TabsTrigger>
|
||||||
<TabsTrigger value="notifications">Notificações</TabsTrigger>
|
<TabsTrigger value="notifications">Notificações</TabsTrigger>
|
||||||
@ -299,83 +60,6 @@ export function StudentSettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="interests">
|
|
||||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex items-center justify-center py-8">
|
|
||||||
<Loader2 className="h-8 w-8 text-purple-600 animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
||||||
<InterestInput
|
|
||||||
category="pets"
|
|
||||||
icon={<Dog className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione seus pets ou animais favoritos..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="entertainment"
|
|
||||||
icon={<Gamepad2 className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione seus jogos e diversões favoritos..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="hobbies"
|
|
||||||
icon={<Heart className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione seus hobbies e atividades..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="places"
|
|
||||||
icon={<Map className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione lugares que você gosta..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="food"
|
|
||||||
icon={<Pizza className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione suas comidas favoritas..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="school"
|
|
||||||
icon={<SchoolIcon className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione suas matérias favoritas..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="shows"
|
|
||||||
icon={<Tv className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione seus programas e séries favoritos..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="music"
|
|
||||||
icon={<Music className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione suas músicas e artistas favoritos..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="art"
|
|
||||||
icon={<Palette className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione suas artes e criações favoritas..."
|
|
||||||
/>
|
|
||||||
<InterestInput
|
|
||||||
category="dreams"
|
|
||||||
icon={<Trophy className="h-5 w-5 text-purple-600" />}
|
|
||||||
placeholder="Adicione seus sonhos e conquistas..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="preferences">
|
|
||||||
{/* Conteúdo da tab de preferências */}
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="accessibility">
|
|
||||||
{/* Conteúdo da tab de acessibilidade */}
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="notifications">
|
|
||||||
{/* Conteúdo da tab de notificações */}
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -147,89 +147,4 @@ export interface StoryRecording {
|
|||||||
suggestions: string;
|
suggestions: string;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
processed_at: string | null;
|
processed_at: string | null;
|
||||||
}
|
|
||||||
|
|
||||||
export interface Interest {
|
|
||||||
id: string;
|
|
||||||
student_id: string;
|
|
||||||
category: string;
|
|
||||||
items: string[];
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Student {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
avatar_url?: string;
|
|
||||||
class_id: string;
|
|
||||||
school_id: string;
|
|
||||||
status: 'active' | 'inactive';
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
interests?: Interest[];
|
|
||||||
class?: {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
grade: string;
|
|
||||||
};
|
|
||||||
school?: {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Story {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
student_id: string;
|
|
||||||
status: 'draft' | 'published';
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
cover?: {
|
|
||||||
id: string;
|
|
||||||
image_url: string;
|
|
||||||
};
|
|
||||||
students?: {
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Class {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
grade: string;
|
|
||||||
school_id: string;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
students?: {
|
|
||||||
count: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface School {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
phone?: string;
|
|
||||||
address?: string;
|
|
||||||
city?: string;
|
|
||||||
state?: string;
|
|
||||||
zip_code?: string;
|
|
||||||
director_name?: string;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SchoolSettings {
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
phone: string;
|
|
||||||
address: string;
|
|
||||||
city: string;
|
|
||||||
state: string;
|
|
||||||
zipCode: string;
|
|
||||||
directorName: string;
|
|
||||||
}
|
}
|
||||||
@ -1,51 +0,0 @@
|
|||||||
-- Create the interests table
|
|
||||||
CREATE TABLE IF NOT EXISTS interests (
|
|
||||||
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
|
|
||||||
student_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
|
|
||||||
category TEXT NOT NULL,
|
|
||||||
item TEXT NOT NULL,
|
|
||||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
|
|
||||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
|
|
||||||
UNIQUE(student_id, category, item)
|
|
||||||
);
|
|
||||||
|
|
||||||
-- Enable Row Level Security
|
|
||||||
ALTER TABLE interests ENABLE ROW LEVEL SECURITY;
|
|
||||||
|
|
||||||
-- Create policies
|
|
||||||
CREATE POLICY "Students can view their own interests"
|
|
||||||
ON interests FOR SELECT
|
|
||||||
USING (auth.uid() = student_id);
|
|
||||||
|
|
||||||
CREATE POLICY "Students can insert their own interests"
|
|
||||||
ON interests FOR INSERT
|
|
||||||
WITH CHECK (auth.uid() = student_id);
|
|
||||||
|
|
||||||
CREATE POLICY "Students can update their own interests"
|
|
||||||
ON interests FOR UPDATE
|
|
||||||
USING (auth.uid() = student_id)
|
|
||||||
WITH CHECK (auth.uid() = student_id);
|
|
||||||
|
|
||||||
CREATE POLICY "Students can delete their own interests"
|
|
||||||
ON interests FOR DELETE
|
|
||||||
USING (auth.uid() = student_id);
|
|
||||||
|
|
||||||
-- Create indexes
|
|
||||||
CREATE INDEX interests_student_id_idx ON interests(student_id);
|
|
||||||
CREATE INDEX interests_category_idx ON interests(category);
|
|
||||||
CREATE INDEX interests_item_idx ON interests(item);
|
|
||||||
|
|
||||||
-- Create function to automatically update updated_at
|
|
||||||
CREATE OR REPLACE FUNCTION update_updated_at_column()
|
|
||||||
RETURNS TRIGGER AS $$
|
|
||||||
BEGIN
|
|
||||||
NEW.updated_at = timezone('utc'::text, now());
|
|
||||||
RETURN NEW;
|
|
||||||
END;
|
|
||||||
$$ language 'plpgsql';
|
|
||||||
|
|
||||||
-- Create trigger to automatically update updated_at
|
|
||||||
CREATE TRIGGER update_interests_updated_at
|
|
||||||
BEFORE UPDATE ON interests
|
|
||||||
FOR EACH ROW
|
|
||||||
EXECUTE FUNCTION update_updated_at_column();
|
|
||||||
@ -6,45 +6,6 @@ export default {
|
|||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter', 'sans-serif'],
|
sans: ['Inter', 'sans-serif'],
|
||||||
},
|
},
|
||||||
animation: {
|
|
||||||
'in': 'in 200ms ease-in',
|
|
||||||
'out': 'out 200ms ease-out',
|
|
||||||
'slide-in-from-top': 'slide-in-from-top 200ms ease-out',
|
|
||||||
'slide-in-from-bottom': 'slide-in-from-bottom 200ms ease-out',
|
|
||||||
'slide-out-to-right': 'slide-out-to-right 200ms ease-out',
|
|
||||||
'fade-in': 'fade-in 200ms ease-in',
|
|
||||||
'fade-out': 'fade-out 200ms ease-out',
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
in: {
|
|
||||||
'0%': { transform: 'translateX(100%)' },
|
|
||||||
'100%': { transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
out: {
|
|
||||||
'0%': { transform: 'translateX(0)' },
|
|
||||||
'100%': { transform: 'translateX(100%)' },
|
|
||||||
},
|
|
||||||
'slide-in-from-top': {
|
|
||||||
'0%': { transform: 'translateY(-100%)' },
|
|
||||||
'100%': { transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
'slide-in-from-bottom': {
|
|
||||||
'0%': { transform: 'translateY(100%)' },
|
|
||||||
'100%': { transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
'slide-out-to-right': {
|
|
||||||
'0%': { transform: 'translateX(0)' },
|
|
||||||
'100%': { transform: 'translateX(100%)' },
|
|
||||||
},
|
|
||||||
'fade-in': {
|
|
||||||
'0%': { opacity: 0 },
|
|
||||||
'100%': { opacity: 1 },
|
|
||||||
},
|
|
||||||
'fade-out': {
|
|
||||||
'0%': { opacity: 1 },
|
|
||||||
'100%': { opacity: 0 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user