[V0_FILE]typescriptreact:file="components/pagamentos-table.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Check, Download, FileText, MoreHorizontal, Plus, Search, Trash, Printer } from "lucide-react" import { format } from "date-fns" import { pt } from "date-fns/locale" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { TooltipProvider } from "@/components/ui/tooltip" import { Badge } from "@/components/ui/badge" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { toast } from "@/components/ui/use-toast" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { PrintLayout } from "@/components/print-layout" type Pagamento = { id: string referencia: string fornecedor: string valor: number dataVencimento: Date dataPagamento: Date | null estado: "pendente" | "pago" | "atrasado" | "cancelado" metodo: "transferência" | "cheque" | "débito direto" | "outro" departamento: string observacoes: string } type PagamentosTableProps = { pagamentosIniciais: Pagamento[] isAdminMode: boolean } export function PagamentosTable({ pagamentosIniciais, isAdminMode }: PagamentosTableProps) { const [searchTerm, setSearchTerm] = useState("") const [pagamentos, setPagamentos] = useState(pagamentosIniciais) const [selectedDate, setSelectedDate] = useState(new Date()) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [newPagamento, setNewPagamento] = useState>({ estado: "pendente", metodo: "transferência", }) const filteredPagamentos = pagamentos.filter( (pagamento) => pagamento.referencia.toLowerCase().includes(searchTerm.toLowerCase()) || pagamento.fornecedor.toLowerCase().includes(searchTerm.toLowerCase()) || pagamento.departamento.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleAddPagamento = () => { if ( newPagamento.referencia && newPagamento.fornecedor && newPagamento.valor && newPagamento.dataVencimento && newPagamento.estado && newPagamento.metodo && newPagamento.departamento ) { const novoPagamento: Pagamento = { id: (pagamentos.length + 1).toString(), referencia: newPagamento.referencia, fornecedor: newPagamento.fornecedor, valor: newPagamento.valor, dataVencimento: newPagamento.dataVencimento, dataPagamento: newPagamento.dataPagamento || null, estado: newPagamento.estado as "pendente" | "pago" | "atrasado" | "cancelado", metodo: newPagamento.metodo as "transferência" | "cheque" | "débito direto" | "outro", departamento: newPagamento.departamento, observacoes: newPagamento.observacoes || "", } setPagamentos([...pagamentos, novoPagamento]) setNewPagamento({ estado: "pendente", metodo: "transferência", }) setIsAddDialogOpen(false) } } const handleDeletePagamento = (id: string) => { setPagamentos(pagamentos.filter((pagamento) => pagamento.id !== id)) toast({ title: "Pagamento eliminado", description: "O pagamento foi removido com sucesso.", }) } const handleMarkAsPaid = (id: string) => { setPagamentos( pagamentos.map((pagamento) => pagamento.id === id ? { ...pagamento, estado: "pago", dataPagamento: new Date() } : pagamento, ), ) toast({ title: "Pagamento atualizado", description: "O pagamento foi marcado como pago.", }) } const handleExportPDF = (pagamento: Pagamento) => { // Simulação de exportação para PDF console.log("Exportando para PDF:", pagamento) toast({ title: "PDF exportado", description: `O PDF do pagamento ${pagamento.referencia} foi gerado.`, }) } const getEstadoBadge = (estado: string) => { switch (estado) { case "pendente": return ( Pendente ) case "pago": return ( Pago ) case "atrasado": return ( Atrasado ) case "cancelado": return ( Cancelado ) default: return {estado} } } const handleAction = (action: string, pagamento: Pagamento) => { toast({ title: "Ação realizada", description: `Ação '${action}' realizada para o pagamento ${pagamento.referencia}`, }) // Realizar a ação normalmente // ... } const handlePrint = () => { window.print() } return (

{isAdminMode && ( Modo Administrador Ativo Você está operando em nome de VMONDLANE. Todas as ações serão registradas. )}

setSearchTerm(e.target.value)} />

Referência Fornecedor Valor Vencimento Estado Departamento Ações {filteredPagamentos.length > 0 ? ( filteredPagamentos.map((pagamento) => ( {pagamento.referencia} {pagamento.fornecedor} {pagamento.valor.toFixed(2)} MT {format(pagamento.dataVencimento, "dd/MM/yyyy", { locale: pt })} {getEstadoBadge(pagamento.estado)} {pagamento.departamento} Ações { // Visualizar detalhes console.log("Visualizar", pagamento) toast({ title: "Detalhes do pagamento", description: `Visualizando detalhes de ${pagamento.referencia}`, }) }} > Visualizar detalhes {pagamento.estado !== "pago" && pagamento.estado !== "cancelado" && ( handleMarkAsPaid(pagamento.id)}> Marcar como pago )} handleExportPDF(pagamento)}> Exportar PDF handleDeletePagamento(pagamento.id)} > Eliminar )) ) : ( Nenhum pagamento encontrado. )}

) } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" "use client" import type * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { pt } from "date-fns/locale" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @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="app/globals.css" isQuickEdit="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; } } @media print { @page { margin: 20mm; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .print\:hidden { display: none !important; } .print\:block { display: block !important; } .print\:p-4 { padding: 1rem !important; } /* Adicione estas novas regras */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } } [V0_FILE]typescriptreact:file="components/relatorio-divida.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { PrintLayout } from "@/components/print-layout" import { Printer } from "lucide-react" import { Button } from "@/components/ui/button" type Pagamento = { id: string referencia: string fornecedor: string valor: number dataVencimento: Date dataPagamento: Date | null estado: "pendente" | "pago" | "atrasado" | "cancelado" metodo: "transferência" | "cheque" | "débito direto" | "outro" departamento: string observacoes: string } type RelatorioDividaProps = { pagamentos: Pagamento[] } export function RelatorioDivida({ pagamentos }: RelatorioDividaProps) { const [filtroEstado, setFiltroEstado] = useState("todos") const calcularTotalPorDepartamento = () => { const totais: { [key: string]: { pendente: number; atrasado: number } } = {} pagamentos.forEach((pagamento) => { if (filtroEstado === "todos" || pagamento.estado === filtroEstado) { if (!totais[pagamento.departamento]) { totais[pagamento.departamento] = { pendente: 0, atrasado: 0 } } if (pagamento.estado === "pendente" || pagamento.estado === "atrasado") { totais[pagamento.departamento][pagamento.estado] += pagamento.valor } } }) return Object.entries(totais).map(([departamento, valores]) => ({ departamento, pendente: valores.pendente, atrasado: valores.atrasado, })) } const dadosGrafico = calcularTotalPorDepartamento() const totalDivida = dadosGrafico.reduce((acc, curr) => acc + curr.pendente + curr.atrasado, 0) const handlePrint = () => { window.print() } return (

Relatório de Dívida Visão geral das dívidas por departamento

Total da Dívida: {totalDivida.toLocaleString("pt-MZ", { style: "currency", currency: "MZN" })}

} />

) } [V0_FILE]typescriptreact:file="components/relatorio-cliente.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { format } from "date-fns" import { pt } from "date-fns/locale" type Pagamento = { id: string referencia: string fornecedor: string valor: number dataVencimento: Date dataPagamento: Date | null estado: "pendente" | "pago" | "atrasado" | "cancelado" metodo: "transferência" | "cheque" | "débito direto" | "outro" departamento: string observacoes: string } type RelatorioClienteProps = { pagamentos: Pagamento[] } export function RelatorioCliente({ pagamentos }: RelatorioClienteProps) { const [clienteSelecionado, setClienteSelecionado] = useState("") const clientes = Array.from(new Set(pagamentos.map((p) => p.fornecedor))) const pagamentosCliente = pagamentos.filter((p) => p.fornecedor === clienteSelecionado) const totalDivida = pagamentosCliente .filter((p) => p.estado === "pendente" || p.estado === "atrasado") .reduce((acc, curr) => acc + curr.valor, 0) return (

Relatório por Cliente Detalhes dos pagamentos por cliente

{clienteSelecionado ? (

Total da Dívida: {totalDivida.toLocaleString("pt-MZ", { style: "currency", currency: "MZN" })}

Referência Valor Vencimento Estado Departamento {pagamentosCliente.map((pagamento) => ( {pagamento.referencia} {pagamento.valor.toFixed(2)} MT {format(pagamento.dataVencimento, "dd/MM/yyyy", { locale: pt })} {pagamento.estado} {pagamento.departamento} ))}

) : (

Selecione um cliente para ver o relatório

)} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" "use client" import { useState } from "react" import { PagamentosTable } from "@/components/pagamentos-table" import { RelatorioDivida } from "@/components/relatorio-divida" import { RelatorioCliente } from "@/components/relatorio-cliente" import { ControloCheques } from "@/components/controlo-cheques" import { FundoManeio } from "@/components/fundo-maneio" import { UserManagement } from "@/components/user-management" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { UserPlus } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" // Dados de exemplo para pagamentos const pagamentosExemplo = [ { id: "1", referencia: "FAT-2023-001", fornecedor: "Empresa Exemplo, Lda", valor: 12500.75, dataVencimento: new Date(2023, 11, 15), dataPagamento: new Date(2023, 11, 10), estado: "pago", metodo: "transferência", departamento: "Informática", observacoes: "Pagamento de licenças de software", }, { id: "2", referencia: "FAT-2023-002", fornecedor: "Serviços Gerais, S.A.", valor: 34500.0, dataVencimento: new Date(2023, 11, 20), dataPagamento: null, estado: "pendente", metodo: "transferência", departamento: "Recursos Humanos", observacoes: "Serviços de consultoria", }, { id: "3", referencia: "FAT-2023-003", fornecedor: "Materiais & Cia", valor: 8750.25, dataVencimento: new Date(2023, 10, 30), dataPagamento: null, estado: "atrasado", metodo: "cheque", departamento: "Logística", observacoes: "Material de escritório", }, { id: "4", referencia: "FAT-2023-004", fornecedor: "Transportes Rápidos", valor: 5500.0, dataVencimento: new Date(2023, 11, 25), dataPagamento: null, estado: "pendente", metodo: "débito direto", departamento: "Vendas", observacoes: "Serviços de transporte mensal", }, { id: "5", referencia: "FAT-2023-005", fornecedor: "Seguros Confiança", valor: 21000.0, dataVencimento: new Date(2023, 11, 5), dataPagamento: null, estado: "cancelado", metodo: "transferência", departamento: "Administração", observacoes: "Seguro anual cancelado", }, ] export default function Home() { const [activeTab, setActiveTab] = useState("pagamentos") return (

Tesouraria App

{activeTab === "pagamentos" && ( Controlo de Pagamentos Sistema de gestão e monitorização de pagamentos para o departamento de Tesouraria )} {activeTab === "relatorio-divida" && } {activeTab === "relatorio-cliente" && } {activeTab === "controlo-cheques" && } {activeTab === "fundo-maneio" && } {activeTab === "user-management" && }

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import { Heart } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/print-layout.tsx" import type { ReactNode } from "react" import { format } from "date-fns" import { pt } from "date-fns/locale" type PrintLayoutProps = { children: ReactNode title: string } export function PrintLayout({ children, title }: PrintLayoutProps) { return (

{title}

Gerado em: {format(new Date(), "dd 'de' MMMM 'de' yyyy, HH:mm", { locale: pt })}

{children}

) } [V0_FILE]typescriptreact:file="components/user-management.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { toast } from "@/components/ui/use-toast" import { Trash2, Edit, Lock } from "lucide-react" import { Switch } from "@/components/ui/switch" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" type User = { id: string username: string fullName: string role: "admin" | "user" password: string isActive: boolean } export function UserManagement() { const [users, setUsers] = useState([ { id: "1", username: "vmondlane", fullName: "V. Mondlane", role: "admin", password: "admin123", isActive: true }, { id: "2", username: "jdoe", fullName: "John Doe", role: "user", password: "user123", isActive: true }, ]) const [newUser, setNewUser] = useState>({ username: "", fullName: "", role: "user", password: "", }) const [editingUser, setEditingUser] = useState(null) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [isResetPasswordDialogOpen, setIsResetPasswordDialogOpen] = useState(false) const [newPassword, setNewPassword] = useState("") const handleAddUser = () => { if (newUser.username && newUser.fullName && newUser.password) { const user: User = { ...newUser, id: (users.length + 1).toString(), isActive: true, } setUsers([...users, user]) setNewUser({ username: "", fullName: "", role: "user", password: "" }) toast({ title: "Usuário adicionado", description: `${user.fullName} foi adicionado com sucesso.`, }) } else { toast({ title: "Erro", description: "Por favor, preencha todos os campos.", variant: "destructive", }) } } const handleDeleteUser = (id: string) => { setUsers(users.filter((user) => user.id !== id)) toast({ title: "Usuário removido", description: "O usuário foi removido com sucesso.", }) } const handleToggleUserStatus = (id: string) => { setUsers(users.map((user) => (user.id === id ? { ...user, isActive: !user.isActive } : user))) const updatedUser = users.find((user) => user.id === id) toast({ title: `Usuário ${updatedUser?.isActive ? "desativado" : "ativado"}`, description: `${updatedUser?.fullName} foi ${updatedUser?.isActive ? "desativado" : "ativado"} com sucesso.`, }) } const handleEditUser = () => { if (editingUser) { setUsers(users.map((user) => (user.id === editingUser.id ? editingUser : user))) setIsEditDialogOpen(false) setEditingUser(null) toast({ title: "Usuário atualizado", description: `${editingUser.fullName} foi atualizado com sucesso.`, }) } } const handleResetPassword = () => { if (editingUser && newPassword) { setUsers(users.map((user) => (user.id === editingUser.id ? { ...user, password: newPassword } : user))) setIsResetPasswordDialogOpen(false) setEditingUser(null) setNewPassword("") toast({ title: "Senha redefinida", description: `A senha de ${editingUser.fullName} foi redefinida com sucesso.`, }) } } return ( Gestão de Usuários Adicione e gerencie usuários do sistema

Nome de usuário setNewUser({ ...newUser, username: e.target.value })} />

Nome completo setNewUser({ ...newUser, fullName: e.target.value })} />

Função

Senha setNewUser({ ...newUser, password: e.target.value })} />

Nome de Usuário Nome Completo Função Status Ações {users.map((user) => ( {user.username} {user.fullName} {user.role === "admin" ? "Administrador" : "Usuário"} handleToggleUserStatus(user.id)} />

))}

) } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescript:file="types.d.ts" import "jspdf" declare module "jspdf" { interface jsPDF { autoTable: (options: any) => jsPDF } } [V0_FILE]typescriptreact:file="components/controlo-cheques.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { format } from "date-fns" import { pt } from "date-fns/locale" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { toast } from "@/components/ui/use-toast" import { PrintLayout } from "@/components/print-layout" import { Trash2, Printer, FileDown } from "lucide-react" import jsPDF from "jspdf" import "jspdf-autotable" import * as XLSX from "xlsx" type Cheque = { id: string numero: string valor: number beneficiario: string dataEmissao: Date dataCompensacao: Date | null estado: "pendente" | "compensado" | "cancelado" } export function ControloCheques() { const [cheques, setCheques] = useState([ { id: "1", numero: "000001", valor: 5000, beneficiario: "Fornecedor A", dataEmissao: new Date(2023, 5, 1), dataCompensacao: new Date(2023, 5, 5), estado: "compensado", }, { id: "2", numero: "000002", valor: 7500, beneficiario: "Fornecedor B", dataEmissao: new Date(2023, 5, 10), dataCompensacao: null, estado: "pendente", }, ]) const handlePrint = () => { window.print() } const handleExportPDF = () => { const doc = new jsPDF() doc.text("Controlo de Cheques", 14, 15) doc.autoTable({ head: [["Número", "Valor", "Beneficiário", "Data de Emissão", "Data de Compensação", "Estado"]], body: cheques.map((cheque) => [ cheque.numero, `${cheque.valor.toFixed(2)} MT`, cheque.beneficiario, format(cheque.dataEmissao, "dd/MM/yyyy", { locale: pt }), cheque.dataCompensacao ? format(cheque.dataCompensacao, "dd/MM/yyyy", { locale: pt }) : "-", cheque.estado, ]), }) doc.save("controlo-cheques.pdf") } const handleExportExcel = () => { const ws = XLSX.utils.json_to_sheet( cheques.map((cheque) => ({ Número: cheque.numero, Valor: cheque.valor, Beneficiário: cheque.beneficiario, "Data de Emissão": format(cheque.dataEmissao, "dd/MM/yyyy", { locale: pt }), "Data de Compensação": cheque.dataCompensacao ? format(cheque.dataCompensacao, "dd/MM/yyyy", { locale: pt }) : "-", Estado: cheque.estado, })), ) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, "Cheques") // Generate Excel file and trigger download const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" }) const data = new Blob([excelBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }) const url = window.URL.createObjectURL(data) const link = document.createElement("a") link.href = url link.download = "controlo-cheques.xlsx" link.click() window.URL.revokeObjectURL(url) } const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [newCheque, setNewCheque] = useState>({ estado: "pendente", }) const handleAddCheque = () => { if (newCheque.numero && newCheque.valor && newCheque.beneficiario && newCheque.dataEmissao) { const chequeToAdd: Cheque = { id: (cheques.length + 1).toString(), numero: newCheque.numero, valor: newCheque.valor, beneficiario: newCheque.beneficiario, dataEmissao: newCheque.dataEmissao, dataCompensacao: null, estado: "pendente", } setCheques([...cheques, chequeToAdd]) setIsAddDialogOpen(false) setNewCheque({ estado: "pendente" }) toast({ title: "Cheque adicionado", description: "O novo cheque foi adicionado com sucesso.", }) } } const handleCompensarCheque = (id: string) => { setCheques( cheques.map((cheque) => cheque.id === id ? { ...cheque, estado: "compensado", dataCompensacao: new Date() } : cheque, ), ) toast({ title: "Cheque compensado", description: "O cheque foi marcado como compensado.", }) } const handleDeleteCheque = (id: string) => { setCheques(cheques.filter((cheque) => cheque.id !== id)) toast({ title: "Cheque eliminado", description: "O cheque foi removido com sucesso.", }) } return (

Controlo de Cheques Gerencie os cheques emitidos e pendentes

Número Valor Beneficiário Data de Emissão Data de Compensação Estado Ações {cheques.map((cheque) => ( {cheque.numero} {cheque.valor.toFixed(2)} MT {cheque.beneficiario} {format(cheque.dataEmissao, "dd/MM/yyyy", { locale: pt })} {cheque.dataCompensacao ? format(cheque.dataCompensacao, "dd/MM/yyyy", { locale: pt }) : "-"} {cheque.estado} {cheque.estado === "pendente" && ( )} ))}

) } [V0_FILE]typescriptreact:file="components/fundo-maneio.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { format } from "date-fns" import { pt } from "date-fns/locale" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" import { PrintLayout } from "@/components/print-layout" import { Trash2, Printer, FileDown } from "lucide-react" import jsPDF from "jspdf" import "jspdf-autotable" import * as XLSX from "xlsx" type Movimento = { id: string data: Date tipo: "entrada" | "saida" valor: number descricao: string } export function FundoManeio() { const [movimentos, setMovimentos] = useState([ { id: "1", data: new Date(2023, 5, 1), tipo: "entrada", valor: 10000, descricao: "Reposição mensal", }, { id: "2", data: new Date(2023, 5, 5), tipo: "saida", valor: 500, descricao: "Compra de material de escritório", }, ]) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [newMovimento, setNewMovimento] = useState>({ tipo: "entrada", }) const handlePrint = () => { window.print() } const handleExportPDF = () => { const doc = new jsPDF() doc.text("Fundo de Maneio", 14, 15) doc.autoTable({ head: [["Data", "Tipo", "Valor", "Descrição"]], body: movimentos.map((movimento) => [ format(movimento.data, "dd/MM/yyyy", { locale: pt }), movimento.tipo === "entrada" ? "Entrada" : "Saída", `${movimento.valor.toFixed(2)} MT`, movimento.descricao, ]), }) doc.save("fundo-maneio.pdf") } const handleExportExcel = () => { const ws = XLSX.utils.json_to_sheet( movimentos.map((movimento) => ({ Data: format(movimento.data, "dd/MM/yyyy", { locale: pt }), Tipo: movimento.tipo === "entrada" ? "Entrada" : "Saída", Valor: movimento.valor, Descrição: movimento.descricao, })), ) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, "Movimentos") // Generate Excel file and trigger download const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" }) const data = new Blob([excelBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }) const url = window.URL.createObjectURL(data) const link = document.createElement("a") link.href = url link.download = "fundo-maneio.xlsx" link.click() window.URL.revokeObjectURL(url) } const handleAddMovimento = () => { if (newMovimento.data && newMovimento.tipo && newMovimento.valor && newMovimento.descricao) { const movimentoToAdd: Movimento = { id: (movimentos.length + 1).toString(), data: newMovimento.data, tipo: newMovimento.tipo, valor: newMovimento.valor, descricao: newMovimento.descricao, } setMovimentos([...movimentos, movimentoToAdd]) setIsAddDialogOpen(false) setNewMovimento({ tipo: "entrada" }) toast({ title: "Movimento adicionado", description: "O novo movimento foi adicionado com sucesso.", }) } } const handleDeleteMovimento = (id: string) => { setMovimentos(movimentos.filter((mov) => mov.id !== id)) toast({ title: "Movimento eliminado", description: "O movimento foi removido com sucesso.", }) } const calcularSaldo = () => { return movimentos.reduce((acc, mov) => { return mov.tipo === "entrada" ? acc + mov.valor : acc - mov.valor }, 0) } return (

Fundo de Maneio Gerencie os movimentos do fundo de maneio

Saldo Atual: {calcularSaldo().toFixed(2)} MT

Data Tipo Valor Descrição Ações {movimentos.map((movimento) => ( {format(movimento.data, "dd/MM/yyyy", { locale: pt })} {movimento.tipo === "entrada" ? "Entrada" : "Saída"} {movimento.valor.toFixed(2)} MT {movimento.descricao} ))}

) }

About

About