[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/financeiro/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Plus, Search, MoreHorizontal, Edit, Trash, CheckCircle, Calendar } from "lucide-react" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { Badge } from "@/components/ui/badge" // Dados de exemplo const transacoesIniciais = [ { id: 1, cliente: "Empresa ABC Ltda", descricao: "Desenvolvimento de website", valor: 3500, data: "2025-03-15", status: "pendente", tipo: "receber", }, { id: 2, cliente: "João Silva", descricao: "Consultoria mensal", valor: 1200, data: "2025-03-10", status: "pago", tipo: "receber", }, { id: 3, cliente: "Fornecedor XYZ", descricao: "Licença de software", valor: 850, data: "2025-03-05", status: "pendente", tipo: "pagar", }, { id: 4, cliente: "Comércio XYZ", descricao: "Manutenção de sistema", valor: 1500, data: "2025-03-20", status: "pendente", tipo: "receber", }, { id: 5, cliente: "Aluguel Escritório", descricao: "Aluguel mensal", valor: 2200, data: "2025-03-05", status: "pago", tipo: "pagar", }, ] export default function FinanceiroPage() { const [transacoes, setTransacoes] = useState(transacoesIniciais) const [filtro, setFiltro] = useState("") const [tipoAtivo, setTipoAtivo] = useState("todos") const [novaTransacao, setNovaTransacao] = useState({ cliente: "", descricao: "", valor: "", data: "", status: "pendente", tipo: "receber", }) const [transacaoEditando, setTransacaoEditando] = useState(null) const [dialogAberto, setDialogAberto] = useState(false) // Filtrar transações const transacoesFiltradas = transacoes.filter((transacao) => { const matchesFiltro = transacao.cliente.toLowerCase().includes(filtro.toLowerCase()) || transacao.descricao.toLowerCase().includes(filtro.toLowerCase()) if (tipoAtivo === "todos") return matchesFiltro return matchesFiltro && transacao.tipo === tipoAtivo }) // Adicionar ou editar transação const salvarTransacao = () => { const valorNumerico = Number.parseFloat(novaTransacao.valor) if (transacaoEditando) { setTransacoes( transacoes.map((t) => t.id === transacaoEditando.id ? { ...novaTransacao, id: transacaoEditando.id, valor: valorNumerico } : t, ), ) } else { const id = Math.max(0, ...transacoes.map((t) => t.id)) + 1 setTransacoes([...transacoes, { ...novaTransacao, id, valor: valorNumerico }]) } resetarFormulario() } // Excluir transação const excluirTransacao = (id) => { setTransacoes(transacoes.filter((t) => t.id !== id)) } // Alterar status da transação const alterarStatus = (id) => { setTransacoes( transacoes.map((t) => (t.id === id ? { ...t, status: t.status === "pendente" ? "pago" : "pendente" } : t)), ) } // Preparar para edição const editarTransacao = (transacao) => { setTransacaoEditando(transacao) setNovaTransacao({ cliente: transacao.cliente, descricao: transacao.descricao, valor: transacao.valor.toString(), data: transacao.data, status: transacao.status, tipo: transacao.tipo, }) setDialogAberto(true) } // Resetar formulário const resetarFormulario = () => { setNovaTransacao({ cliente: "", descricao: "", valor: "", data: "", status: "pendente", tipo: "receber", }) setTransacaoEditando(null) setDialogAberto(false) } // Formatar valor para moeda const formatarMoeda = (valor) => { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(valor) } // Formatar data const formatarData = (dataString) => { const data = new Date(dataString) return format(data, "dd 'de' MMMM 'de' yyyy", { locale: ptBR }) } return (

Controle Financeiro

A Receber

{formatarMoeda( transacoes .filter((t) => t.tipo === "receber" && t.status === "pendente") .reduce((total, t) => total + t.valor, 0), )}

{transacoes.filter((t) => t.tipo === "receber" && t.status === "pendente").length} transações pendentes

A Pagar

{formatarMoeda( transacoes .filter((t) => t.tipo === "pagar" && t.status === "pendente") .reduce((total, t) => total + t.valor, 0), )}

{transacoes.filter((t) => t.tipo === "pagar" && t.status === "pendente").length} transações pendentes

Saldo Pendente

{formatarMoeda( transacoes .filter((t) => t.status === "pendente") .reduce((total, t) => total + (t.tipo === "receber" ? t.valor : -t.valor), 0), )}

Atualizado hoje

Transações Financeiras Gerencie suas contas a pagar e receber

setFiltro(e.target.value)} />

Todos A Receber A Pagar

Cliente/Fornecedor Descrição Valor Data Status Ações {transacoesFiltradas.length > 0 ? ( transacoesFiltradas.map((transacao) => ( {transacao.cliente} {transacao.descricao} {formatarMoeda(transacao.valor)}

{formatarData(transacao.data)}

{transacao.status === "pendente" ? "Pendente" : "Pago"} alterarStatus(transacao.id)}> {transacao.status === "pendente" ? "Marcar como pago" : "Marcar como pendente"} editarTransacao(transacao)}> Editar excluirTransacao(transacao.id)}> Excluir )) ) : ( Nenhuma transação encontrada )}

) } [V0_FILE]typescriptreact:file="app/relatorios/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { FileText, FileSpreadsheet, Download, Calendar, Users, CreditCard } from "lucide-react" import { format } from "date-fns" import { ptBR } from "date-fns/locale" export default function RelatoriosPage() { const [tipoRelatorio, setTipoRelatorio] = useState("financeiro") const [dataInicio, setDataInicio] = useState("") const [dataFim, setDataFim] = useState("") // Formatar data const formatarData = (dataString) => { if (!dataString) return "" const data = new Date(dataString) return format(data, "dd 'de' MMMM 'de' yyyy", { locale: ptBR }) } // Gerar relatório (simulação) const gerarRelatorio = (formato) => { alert(`Relatório ${tipoRelatorio} gerado em formato ${formato}! Data início: ${dataInicio ? formatarData(dataInicio) : "Não especificada"} Data fim: ${dataFim ? formatarData(dataFim) : "Não especificada"}`) } return (

Relatórios

setTipoRelatorio("financeiro")} >

Relatório Financeiro

Resumo de contas a pagar e receber, com totais e status de pagamento. setTipoRelatorio("clientes")}>

Relatório de Clientes

Lista completa de clientes com informações de contato e serviços contratados. setTipoRelatorio("servicos")}>

Relatório de Serviços

Detalhamento dos serviços prestados, valores e status de conclusão.

Gerar Relatório Configure as opções do relatório e escolha o formato de exportação

Tipo de Relatório

Data de Início

setDataInicio(e.target.value)} />

Data de Fim

setDataFim(e.target.value)} />

Relatórios Recentes Histórico dos últimos relatórios gerados

Relatório Financeiro

01/03/2025 - 31/03/2025

Relatório de Clientes

15/02/2025

Relatório de Serviços

01/01/2025 - 28/02/2025

) } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" // Adapted from https://ui.shadcn.com/ import * as React from "react" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 1000000 type ToastActionElement = React.ReactElement export type Toast = { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement open: boolean } 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_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: Omit } | { type: ActionType["UPDATE_TOAST"] toast: Partial & Pick } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: Toast[] } const toastTimeouts = new Map>() const reducer = (state: State, action: Action): State => { switch (action.type) { case actionTypes.ADD_TOAST: return { ...state, toasts: [...state.toasts, { id: genId(), open: true, ...action.toast }].slice(-TOAST_LIMIT), } case actionTypes.UPDATE_TOAST: return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case actionTypes.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) { toastTimeouts.set( toastId, setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: actionTypes.REMOVE_TOAST, toastId, }) }, TOAST_REMOVE_DELAY), ) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case actionTypes.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 function toast({ ...props }: Toast) { const id = genId() const update = (props: Toast) => dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...props, id }, }) const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id }) dispatch({ type: actionTypes.ADD_TOAST, toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) // Removed unnecessary dependency: [state] return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" 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, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 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-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/components/ui/use-toast" import { Eye, EyeOff, Lock, Mail, UserPlus } from "lucide-react" export default function LoginPage() { const router = useRouter() const { toast } = useToast() const [activeTab, setActiveTab] = useState("login") const [showPassword, setShowPassword] = useState(false) // Estados para o formulário de login const [loginData, setLoginData] = useState({ email: "", password: "", }) // Estados para o formulário de cadastro const [registerData, setRegisterData] = useState({ name: "", email: "", password: "", confirmPassword: "", }) // Função para lidar com o login const handleLogin = (e) => { e.preventDefault() // Simulação de autenticação if (loginData.email && loginData.password) { // Em um sistema real, isso seria uma chamada à API localStorage.setItem( "erp-user", JSON.stringify({ email: loginData.email, name: loginData.email.split("@")[0], isLoggedIn: true, }), ) toast({ title: "Login realizado com sucesso", description: "Você será redirecionado para o dashboard.", }) // Redirecionar para a página inicial após login setTimeout(() => { router.push("/") }, 1000) } else { toast({ title: "Erro no login", description: "Por favor, preencha todos os campos.", variant: "destructive", }) } } // Função para lidar com o cadastro const handleRegister = (e) => { e.preventDefault() // Validação básica if (!registerData.name || !registerData.email || !registerData.password) { toast({ title: "Erro no cadastro", description: "Por favor, preencha todos os campos.", variant: "destructive", }) return } if (registerData.password !== registerData.confirmPassword) { toast({ title: "Erro no cadastro", description: "As senhas não coincidem.", variant: "destructive", }) return } // Simulação de cadastro // Em um sistema real, isso seria uma chamada à API localStorage.setItem( "erp-user", JSON.stringify({ email: registerData.email, name: registerData.name, isLoggedIn: true, }), ) toast({ title: "Cadastro realizado com sucesso", description: "Você será redirecionado para o dashboard.", }) // Redirecionar para a página inicial após cadastro setTimeout(() => { router.push("/") }, 1000) } return (

ERP Financeiro

Sistema de gestão financeira e de clientes

Login Cadastro Acesse sua conta Entre com seu e-mail e senha para acessar o sistema.

E-mail
setLoginData({ ...loginData, email: e.target.value })} />

Senha Esqueceu a senha?

setLoginData({ ...loginData, password: e.target.value })} />

Crie sua conta Preencha os dados abaixo para se cadastrar no sistema.

Nome setRegisterData({ ...registerData, name: e.target.value })} />

E-mail
setRegisterData({ ...registerData, email: e.target.value })} />

Senha
setRegisterData({ ...registerData, password: e.target.value })} />

Confirmar Senha setRegisterData({ ...registerData, confirmPassword: e.target.value })} />

) } [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { useRouter } from "next/navigation" // Definindo o tipo para o usuário type User = { name: string email: string isLoggedIn: boolean } | null // Definindo o tipo para o contexto type AuthContextType = { user: User login: (email: string, password: string) => Promise logout: () => void register: (name: string, email: string, password: string) => Promise } // Criando o contexto const AuthContext = createContext(undefined) // Hook personalizado para usar o contexto export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth deve ser usado dentro de um AuthProvider") } return context } // Provedor do contexto export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const router = useRouter() // Verificar se o usuário está logado ao carregar a página useEffect(() => { const storedUser = localStorage.getItem("erp-user") if (storedUser) { setUser(JSON.parse(storedUser)) } }, []) // Função de login const login = async (email: string, password: string) => { try { // Em um sistema real, isso seria uma chamada à API // Simulando uma autenticação bem-sucedida const userData = { name: email.split("@")[0], email, isLoggedIn: true, } setUser(userData) localStorage.setItem("erp-user", JSON.stringify(userData)) return true } catch (error) { console.error("Erro ao fazer login:", error) return false } } // Função de logout const logout = () => { setUser(null) localStorage.removeItem("erp-user") router.push("/login") } // Função de registro const register = async (name: string, email: string, password: string) => { try { // Em um sistema real, isso seria uma chamada à API // Simulando um registro bem-sucedido const userData = { name, email, isLoggedIn: true, } setUser(userData) localStorage.setItem("erp-user", JSON.stringify(userData)) return true } catch (error) { console.error("Erro ao registrar:", error) return false } } return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" import { AuthProvider } from "@/contexts/auth-context" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ERP Financeiro", description: "Sistema de gestão financeira e de clientes", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/auth-check.tsx" "use client" import type React from "react" import { useEffect } from "react" import { useRouter, usePathname } from "next/navigation" import { useAuth } from "@/contexts/auth-context" export default function AuthCheck({ children }: { children: React.ReactNode }) { const { user } = useAuth() const router = useRouter() const pathname = usePathname() useEffect(() => { // Verificar se o usuário está logado if (!user && pathname !== "/login") { router.push("/login") } // Se o usuário já estiver logado e tentar acessar a página de login, redirecionar para o dashboard if (user && pathname === "/login") { router.push("/") } }, [user, router, pathname]) // Se estiver na página de login, renderizar normalmente if (pathname === "/login") { return <>{children} } // Se não estiver logado, não renderizar nada enquanto redireciona if (!user) { return null } // Se estiver logado, renderizar o conteúdo return <>{children} } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" "use client" import Link from "next/link" import { useState } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Users, CreditCard, FileText, Settings, Menu, X, LogOut, User } from "lucide-react" import { useAuth } from "@/contexts/auth-context" import { usePathname } from "next/navigation" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const { user, logout } = useAuth() const pathname = usePathname() // Não mostrar a navbar na página de login if (pathname === "/login") { return null } return (

ERP Financeiro
{/* Desktop menu /}
Clientes Financeiro Relatórios Usuários Minha Conta Perfil Configurações Sair
{/ Mobile menu button /}

{/ Mobile menu */} {isOpen && (

setIsOpen(false)} >
Clientes
setIsOpen(false)} >
Financeiro
setIsOpen(false)} >
Relatórios
setIsOpen(false)} >
Usuários

{user?.name?.charAt(0) || "U"}

{user?.name || "Usuário"}

{user?.email || "usuario@exemplo.com"}

setIsOpen(false)} >
Perfil
setIsOpen(false)} >
Configurações

)}
) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowRight } from "lucide-react" import Link from "next/link" import Navbar from "@/components/navbar" import AuthCheck from "@/components/auth-check" export default function Home() { return (

ERP Financeiro

Sistema completo para gestão financeira e de clientes

Bem-vindo ao seu Sistema de Gestão

Clientes Gerencie seus clientes
Cadastre, edite e consulte informações de clientes.
Financeiro Controle suas finanças
Gerencie contas a pagar e receber, registre serviços.
Relatórios Visualize seus dados
Gere relatórios em PDF e Excel para análise financeira.
Usuários Gerencie usuários
Cadastre e gerencie usuários do sistema.

Resumo Financeiro

A Receber
R$ 12.450,00

10 transações pendentes
A Pagar
R$ 5.280,00

8 transações pendentes
Saldo
R$ 7.170,00

Atualizado hoje

© 2025 ERP Financeiro - Todos os direitos reservados

) } [V0_FILE]typescriptreact:file="app/usuarios/page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" DialogTrigger \ } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Search, MoreHorizontal, Edit, Trash, UserPlus, Shield } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import Navbar from "@/components/navbar" import AuthCheck from "@/components/auth-check" // Dados de exemplo const usuariosIniciais = [ { id: 1, nome: "Admin Sistema", email: "admin@sistema.com", cargo: "Administrador", permissao: "admin", }, { id: 2, nome: "João Silva", email: "joao.silva@empresa.com", cargo: "Financeiro", permissao: "financeiro", }, { id: 3, nome: "Maria Oliveira", email: "maria.oliveira@empresa.com", cargo: "Atendimento", permissao: "basico", }, ] export default function UsuariosPage() { const { toast } = useToast() const [usuarios, setUsuarios] = useState(usuariosIniciais) const [filtro, setFiltro] = useState("") const [novoUsuario, setNovoUsuario] = useState({ nome: "", email: "", senha: "", confirmarSenha: "", cargo: "", permissao: "basico", }) const [usuarioEditando, setUsuarioEditando] = useState(null) const [dialogAberto, setDialogAberto] = useState(false) // Filtrar usuários const usuariosFiltrados = usuarios.filter( (usuario) => usuario.nome.toLowerCase().includes(filtro.toLowerCase()) || usuario.email.toLowerCase().includes(filtro.toLowerCase()), ) // Adicionar ou editar usuário const salvarUsuario = () => { // Validação básica if (!novoUsuario.nome || !novoUsuario.email || !novoUsuario.cargo) { toast({ title: "Erro ao salvar", description: "Por favor, preencha todos os campos obrigatórios.", variant: "destructive", }) return } // Validação de senha para novos usuários if (!usuarioEditando && (!novoUsuario.senha || novoUsuario.senha !== novoUsuario.confirmarSenha)) { toast({ title: "Erro ao salvar", description: "As senhas não coincidem ou estão em branco.", variant: "destructive", }) return } if (usuarioEditando) { setUsuarios(usuarios.map((u) => (u.id === usuarioEditando.id ? { ...novoUsuario, id: usuarioEditando.id } : u))) toast({ title: "Usuário atualizado", description: `O usuário ${novoUsuario.nome} foi atualizado com sucesso.`, }) } else { const id = Math.max(0, ...usuarios.map((u) => u.id)) + 1 setUsuarios([...usuarios, { ...novoUsuario, id }]) toast({ title: "Usuário cadastrado", description: `O usuário ${novoUsuario.nome} foi cadastrado com sucesso.`, }) } resetarFormulario() } // Excluir usuário const excluirUsuario = (id) => { setUsuarios(usuarios.filter((u) => u.id !== id)) toast({ title: "Usuário excluído", description: "O usuário foi excluído com sucesso.", }) } // Preparar para edição const editarUsuario = (usuario) => { setUsuarioEditando(usuario) setNovoUsuario({ nome: usuario.nome, email: usuario.email, senha: "", confirmarSenha: "", cargo: usuario.cargo, permissao: usuario.permissao, }) setDialogAberto(true) } // Resetar formulário const resetarFormulario = () => { setNovoUsuario({ nome: "", email: "", senha: "", confirmarSenha: "", cargo: "", permissao: "basico", }) setUsuarioEditando(null) setDialogAberto(false) } return (

Gerenciamento de Usuários
{usuarioEditando ? "Editar Usuário" : "Novo Usuário"} Preencha os dados do usuário abaixo.

Nome setNovoUsuario({ ...novoUsuario, nome: e.target.value })} />

E-mail setNovoUsuario({ ...novoUsuario, email: e.target.value })} />
{!usuarioEditando && ( <>
Senha setNovoUsuario({ ...novoUsuario, senha: e.target.value })} />

Confirmar Senha setNovoUsuario({ ...novoUsuario, confirmarSenha: e.target.value })} />
)}
Cargo setNovoUsuario({ ...novoUsuario, cargo: e.target.value })} />

Nível de Permissão

Lista de Usuários Gerencie os usuários do sistema
setFiltro(e.target.value)} className="max-w-sm" />

Nome E-mail Cargo Permissão Ações {usuariosFiltrados.length > 0 ? ( usuariosFiltrados.map((usuario) => ( {usuario.nome} {usuario.email} {usuario.cargo}
{usuario.permissao === "admin" ? "Administrador" : usuario.permissao === "financeiro" ? "Financeiro" : "Básico"}
editarUsuario(usuario)}> Editar excluirUsuario(usuario.id)}> Excluir )) ) : ( Nenhum usuário encontrado )}

) } [V0_FILE]typescriptreact:file="app/clientes/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Plus, Search, MoreHorizontal, Edit, Trash, FileText } from "lucide-react" import Navbar from "@/components/navbar" import AuthCheck from "@/components/auth-check" // Dados de exemplo const clientesIniciais = [ { id: 1, nome: "Empresa ABC Ltda", documento: "12.345.678/0001-90", telefone: "(11) 3456-7890", email: "contato@empresaabc.com", endereco: "Av. Paulista, 1000, São Paulo - SP", }, { id: 2, nome: "João Silva", documento: "123.456.789-00", telefone: "(11) 98765-4321", email: "joao.silva@email.com", endereco: "Rua das Flores, 123, Rio de Janeiro - RJ", }, { id: 3, nome: "Comércio XYZ", documento: "98.765.432/0001-10", telefone: "(21) 2345-6789", email: "contato@comercioxyz.com", endereco: "Rua do Comércio, 456, Belo Horizonte - MG", }, ] export default function ClientesPage() { const [clientes, setClientes] = useState(clientesIniciais) const [filtro, setFiltro] = useState("") const [novoCliente, setNovoCliente] = useState({ nome: "", documento: "", telefone: "", email: "", endereco: "", }) const [clienteEditando, setClienteEditando] = useState(null) const [dialogAberto, setDialogAberto] = useState(false) // Filtrar clientes const clientesFiltrados = clientes.filter( (cliente) => cliente.nome.toLowerCase().includes(filtro.toLowerCase()) || cliente.documento.includes(filtro), ) // Adicionar ou editar cliente const salvarCliente = () => { if (clienteEditando) { setClientes(clientes.map((c) => (c.id === clienteEditando.id ? { ...novoCliente, id: clienteEditando.id } : c))) } else { const id = Math.max(0, ...clientes.map((c) => c.id)) + 1 setClientes([...clientes, { ...novoCliente, id }]) } resetarFormulario() } // Excluir cliente const excluirCliente = (id) => { setClientes(clientes.filter((c) => c.id !== id)) } // Preparar para edição const editarCliente = (cliente) => { setClienteEditando(cliente) setNovoCliente({ nome: cliente.nome, documento: cliente.documento, telefone: cliente.telefone, email: cliente.email, endereco: cliente.endereco, }) setDialogAberto(true) } // Resetar formulário const resetarFormulario = () => { setNovoCliente({ nome: "", documento: "", telefone: "", email: "", endereco: "", }) setClienteEditando(null) setDialogAberto(false) } return (

Gerenciamento de Clientes
{clienteEditando ? "Editar Cliente" : "Novo Cliente"} Preencha os dados do cliente abaixo.

Nome setNovoCliente({ ...novoCliente, nome: e.target.value })} />

CPF/CNPJ setNovoCliente({ ...novoCliente, documento: e.target.value })} />

Telefone setNovoCliente({ ...novoCliente, telefone: e.target.value })} />

E-mail setNovoCliente({ ...novoCliente, email: e.target.value })} />

Endereço setNovoCliente({ ...novoCliente, endereco: e.target.value })} />

Lista de Clientes Gerencie seus clientes cadastrados
setFiltro(e.target.value)} className="max-w-sm" />

Nome CPF/CNPJ Telefone E-mail Ações {clientesFiltrados.length > 0 ? ( clientesFiltrados.map((cliente) => ( {cliente.nome} {cliente.documento} {cliente.telefone} {cliente.email} editarCliente(cliente)}> Editar excluirCliente(cliente.id)}> Excluir Ver detalhes )) ) : ( Nenhum cliente encontrado )}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This