[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Dashboard } from "@/components/dashboard" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/card-tracker.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CardTypesTable } from "@/components/card-types-table" import { MachinesTable } from "@/components/machines-table" import { SalesTable } from "@/components/sales-table" import type { CardType, Machine, Sale } from "@/lib/types" export function CardTracker() { const [cardTypes, setCardTypes] = useState([ { id: "1", name: "Visa Crédito", fee: 3.5, days: 30 }, { id: "2", name: "Visa Débito", fee: 1.5, days: 1 }, { id: "3", name: "Master Crédito", fee: 4.0, days: 30 }, { id: "4", name: "Master Débito", fee: 1.6, days: 1 }, ]) const [machines, setMachines] = useState([ { id: "1", name: "Moderninha" }, { id: "2", name: "SumUp" }, { id: "3", name: "Cielo" }, { id: "4", name: "GetNet" }, ]) const [sales, setSales] = useState([]) // Load data from localStorage on component mount useEffect(() => { const savedCardTypes = localStorage.getItem("cardTypes") const savedMachines = localStorage.getItem("machines") const savedSales = localStorage.getItem("sales") if (savedCardTypes) setCardTypes(JSON.parse(savedCardTypes)) if (savedMachines) setMachines(JSON.parse(savedMachines)) if (savedSales) setSales(JSON.parse(savedSales)) }, []) // Save data to localStorage when it changes useEffect(() => { localStorage.setItem("cardTypes", JSON.stringify(cardTypes)) localStorage.setItem("machines", JSON.stringify(machines)) localStorage.setItem("sales", JSON.stringify(sales)) }, [cardTypes, machines, sales]) return ( Vendas Cartões Máquinas ) } [V0_FILE]typescriptreact:file="components/card-types-table.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" 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, CardHeader, CardTitle } from "@/components/ui/card" import { Pencil, Trash2, Plus, Save, X, CreditCard } from "lucide-react" import type { CardType } from "@/lib/types" interface CardTypesTableProps { cardTypes: CardType[] setCardTypes: React.Dispatch> } export function CardTypesTable({ cardTypes, setCardTypes }: CardTypesTableProps) { const [editingId, setEditingId] = useState(null) const [newCardType, setNewCardType] = useState>({}) const [isAdding, setIsAdding] = useState(false) const handleEdit = (id: string) => { setEditingId(id) } const handleSave = (id: string) => { setCardTypes(cardTypes.map((card) => (card.id === id ? { ...card, ...newCardType } : card))) setEditingId(null) setNewCardType({}) } const handleDelete = (id: string) => { setCardTypes(cardTypes.filter((card) => card.id !== id)) } const handleAdd = () => { if (newCardType.name && newCardType.fee !== undefined && newCardType.days !== undefined) { const newCard: CardType = { id: Date.now().toString(), name: newCardType.name, fee: newCardType.fee, days: newCardType.days, } setCardTypes([...cardTypes, newCard]) setIsAdding(false) setNewCardType({}) } } const handleChange = (id: string, field: keyof CardType, value: string | number) => { if (id === "new") { setNewCardType({ ...newCardType, [field]: field === "name" ? value : Number(value), }) } else { setNewCardType({ ...newCardType, [field]: field === "name" ? value : Number(value), }) } } return ( Tipos de Cartão Cartão Taxa (%) Prazo Recebimento (dias) Ações {isAdding && ( handleChange("new", "name", e.target.value)} placeholder="Nome do cartão" /> handleChange("new", "fee", e.target.value)} placeholder="Taxa" /> handleChange("new", "days", e.target.value)} placeholder="Dias" />

)} {cardTypes.map((card) => ( {editingId === card.id ? ( handleChange(card.id, "name", e.target.value)} /> ) : ( card.name )} {editingId === card.id ? ( handleChange(card.id, "fee", e.target.value)} /> ) : ( card.fee.toFixed(2) )} {editingId === card.id ? ( handleChange(card.id, "days", e.target.value)} /> ) : ( card.days )}

{editingId === card.id ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/machines-table.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" 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, CardHeader, CardTitle } from "@/components/ui/card" import { Pencil, Trash2, Plus, Save, X, Cpu, Settings } from "lucide-react" import type { Machine, CardType, MachineCardFee } from "@/lib/types" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface MachinesTableProps { machines: Machine[] setMachines: React.Dispatch> cardTypes: CardType[] machineCardFees: MachineCardFee[] setMachineCardFees: React.Dispatch> } export function MachinesTable({ machines, setMachines, cardTypes, machineCardFees, setMachineCardFees, }: MachinesTableProps) { const [editingId, setEditingId] = useState(null) const [newMachineName, setNewMachineName] = useState("") const [isAdding, setIsAdding] = useState(false) const [selectedMachine, setSelectedMachine] = useState(null) const [editingFees, setEditingFees] = useState>({}) const handleEdit = (id: string) => { setEditingId(id) const machine = machines.find((m) => m.id === id) if (machine) { setNewMachineName(machine.name) } } const handleSave = (id: string) => { setMachines(machines.map((machine) => (machine.id === id ? { ...machine, name: newMachineName } : machine))) setEditingId(null) setNewMachineName("") } const handleDelete = (id: string) => { setMachines(machines.filter((machine) => machine.id !== id)) // Also delete any associated machine card fees setMachineCardFees(machineCardFees.filter((fee) => fee.machineId !== id)) } const handleAdd = () => { if (newMachineName.trim()) { const newMachine: Machine = { id: Date.now().toString(), name: newMachineName, } setMachines([...machines, newMachine]) setIsAdding(false) setNewMachineName("") } } const openMachineFees = (machine: Machine) => { setSelectedMachine(machine) // Initialize editing fees with current values const currentFees: Record = {} cardTypes.forEach((cardType) => { const existingFee = machineCardFees.find((fee) => fee.machineId === machine.id && fee.cardTypeId === cardType.id) currentFees[cardType.id] = existingFee ? existingFee.fee : cardType.fee }) setEditingFees(currentFees) } const handleFeeChange = (cardTypeId: string, value: string) => { setEditingFees((prev) => ({ ...prev, [cardTypeId]: Number.parseFloat(value) || 0, })) } const saveMachineFees = () => { if (!selectedMachine) return // Remove existing fees for this machine const filteredFees = machineCardFees.filter((fee) => fee.machineId !== selectedMachine.id) // Add updated fees const newFees = Object.entries(editingFees).map(([cardTypeId, fee]) => ({ id: `${selectedMachine.id}-${cardTypeId}`, machineId: selectedMachine.id, cardTypeId, fee, })) setMachineCardFees([...filteredFees, ...newFees]) setSelectedMachine(null) } const getMachineFee = (machineId: string, cardTypeId: string): number => { const machineFee = machineCardFees.find((fee) => fee.machineId === machineId && fee.cardTypeId === cardTypeId) if (machineFee) { return machineFee.fee } // Return default card type fee if no machine-specific fee is set const cardType = cardTypes.find((card) => card.id === cardTypeId) return cardType ? cardType.fee : 0 } return (

Máquinas Nome da Máquina Taxas Ações {isAdding && ( setNewMachineName(e.target.value)} placeholder="Nome da máquina" />

)} {machines.map((machine) => ( {editingId === machine.id ? ( setNewMachineName(e.target.value)} /> ) : ( machine.name )}

{editingId === machine.id ? ( ) : ( )}

))}

{/* Machine Fees Dialog */} {/* Machine Fees Overview */} Visão Geral das Taxas por Máquina {machines.map((machine) => ( {machine.name} ))} {machines.map((machine) => ( Tipo de Cartão Taxa (%) {cardTypes.map((cardType) => ( {cardType.name} {getMachineFee(machine.id, cardType.id).toFixed(2)}% ))}

))}

) } [V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isQuickEdit="true" isMerged="true" export interface CardType { id: string name: string fee: number days: number } export interface Machine { id: string name: string } export interface Sale { id: string date: string amount: number cardTypeId: string machineId: string fee: number netAmount: number expectedDate: string } export interface PaymentStatus { [key: string]: boolean } export interface MachineCardFee { id: string machineId: string cardTypeId: string fee: number } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { SalesCalendar } from "@/components/sales-calendar" import { SalesCharts } from "@/components/sales-charts" import { SalesTable } from "@/components/sales-table" import { CardTypesTable } from "@/components/card-types-table" import { MachinesTable } from "@/components/machines-table" import type { CardType, Machine, Sale, PaymentStatus, MachineCardFee } from "@/lib/types" import { generateMockData } from "@/lib/mock-data" import { Button } from "@/components/ui/button" import { Download, Upload, AlertCircle } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { format } from "date-fns" export function Dashboard() { const [cardTypes, setCardTypes] = useState([]) const [machines, setMachines] = useState([]) const [sales, setSales] = useState([]) const [paymentStatus, setPaymentStatus] = useState({}) const [machineCardFees, setMachineCardFees] = useState([]) const [importFile, setImportFile] = useState(null) const [importError, setImportError] = useState(null) // Load data from localStorage on component mount useEffect(() => { const savedCardTypes = localStorage.getItem("cardTypes") const savedMachines = localStorage.getItem("machines") const savedSales = localStorage.getItem("sales") const savedPaymentStatus = localStorage.getItem("paymentStatus") const savedMachineCardFees = localStorage.getItem("machineCardFees") if (savedCardTypes) { setCardTypes(JSON.parse(savedCardTypes)) } else { const { cardTypes: mockCardTypes } = generateMockData() setCardTypes(mockCardTypes) } if (savedMachines) { setMachines(JSON.parse(savedMachines)) } else { const { machines: mockMachines } = generateMockData() setMachines(mockMachines) } if (savedSales) { setSales(JSON.parse(savedSales)) } else { const { sales: mockSales } = generateMockData() setSales(mockSales) } if (savedPaymentStatus) { setPaymentStatus(JSON.parse(savedPaymentStatus)) } if (savedMachineCardFees) { setMachineCardFees(JSON.parse(savedMachineCardFees)) } else { const { machineCardFees: mockMachineFees } = generateMockData() setMachineCardFees(mockMachineFees) } }, []) // Save data to localStorage when it changes useEffect(() => { localStorage.setItem("cardTypes", JSON.stringify(cardTypes)) localStorage.setItem("machines", JSON.stringify(machines)) localStorage.setItem("sales", JSON.stringify(sales)) localStorage.setItem("paymentStatus", JSON.stringify(paymentStatus)) localStorage.setItem("machineCardFees", JSON.stringify(machineCardFees)) }, [cardTypes, machines, sales, paymentStatus, machineCardFees]) const markPaymentReceived = (saleId: string, received: boolean) => { setPaymentStatus((prev) => ({ ...prev, [saleId]: received, })) } const handleBackup = () => { const backupData = { cardTypes, machines, sales, paymentStatus, machineCardFees, exportDate: new Date().toISOString(), } const dataStr = JSON.stringify(backupData, null, 2) const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}` const exportFileDefaultName = `sistema-recebimentos-backup-${format(new Date(), "yyyy-MM-dd")}.json` const linkElement = document.createElement("a") linkElement.setAttribute("href", dataUri) linkElement.setAttribute("download", exportFileDefaultName) linkElement.click() } const handleImport = () => { if (!importFile) return const reader = new FileReader() reader.onload = (e) => { try { const result = e.target?.result as string const parsedData = JSON.parse(result) // Validate the imported data if (!parsedData.cardTypes || !parsedData.machines || !parsedData.sales) { setImportError("Arquivo de backup inválido. Formato incorreto.") return } setCardTypes(parsedData.cardTypes) setMachines(parsedData.machines) setSales(parsedData.sales) if (parsedData.paymentStatus) { setPaymentStatus(parsedData.paymentStatus) } if (parsedData.machineCardFees) { setMachineCardFees(parsedData.machineCardFees) } setImportFile(null) setImportError(null) } catch (error) { setImportError("Erro ao importar o arquivo. Verifique se é um JSON válido.") } } reader.readAsText(importFile) } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { setImportFile(e.target.files[0]) setImportError(null) } } // Calculate total fees paid to operators monthly const calculateMonthlyFees = () => { const currentMonth = new Date().getMonth() const currentYear = new Date().getFullYear() const monthlyFees = sales .filter((sale) => { const saleDate = new Date(sale.date) return saleDate.getMonth() === currentMonth && saleDate.getFullYear() === currentYear }) .reduce((total, sale) => { return total + (sale.amount - sale.netAmount) }, 0) return monthlyFees } return (

Sistema de Conferência de Recebimentos

Total em taxas este mês:

{new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(calculateMonthlyFees())}

Dashboard Vendas Cartões Máquinas

) } [V0_FILE]typescriptreact:file="components/sales-calendar.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" import { Check, CreditCard, DollarSign, ChevronLeft, ChevronRight } from "lucide-react" import type { Sale, CardType, PaymentStatus } from "@/lib/types" import { format, isSameDay, parseISO, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday, } from "date-fns" import { ptBR } from "date-fns/locale" interface SalesCalendarProps { sales: Sale[] cardTypes: CardType[] paymentStatus: PaymentStatus markPaymentReceived: (saleId: string, received: boolean) => void compact: boolean } export function SalesCalendar({ sales, cardTypes, paymentStatus, markPaymentReceived, compact }: SalesCalendarProps) { const [currentMonth, setCurrentMonth] = useState(new Date()) const [selectedDay, setSelectedDay] = useState(null) const [openDialog, setOpenDialog] = useState(false) const getCardTypeName = (id: string): string => { const cardType = cardTypes.find((c) => c.id === id) return cardType ? cardType.name : "" } const getSalesByDate = (date: Date) => { return sales.filter((sale) => { const expectedDate = parseISO(sale.expectedDate) return isSameDay(expectedDate, date) }) } const handlePreviousMonth = () => { setCurrentMonth((prev) => subMonths(prev, 1)) } const handleNextMonth = () => { setCurrentMonth((prev) => addMonths(prev, 1)) } const handleDayClick = (day: Date) => { setSelectedDay(day) setOpenDialog(true) } const formatCurrency = (value: number) => { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value) } // Generate days for the current month view const monthStart = startOfMonth(currentMonth) const monthEnd = endOfMonth(currentMonth) const daysInMonth = eachDayOfInterval({ start: monthStart, end: monthEnd }) // Create calendar grid with proper day of week alignment const startDay = monthStart.getDay() // 0 = Sunday, 1 = Monday, etc. const calendarDays = [] // Add empty cells for days before the start of the month for (let i = 0; i < startDay; i++) { calendarDays.push(null) } // Add the actual days of the month calendarDays.push(...daysInMonth) return ( Calendário de Recebimentos

{format(currentMonth, "MMMM yyyy", { locale: ptBR })}

{["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day, i) => (

{day}

))}

{calendarDays.map((day, i) => { if (!day) { return

} const salesOnDay = getSalesByDate(day) const isCurrentMonth = isSameMonth(day, currentMonth) const isCurrentDay = isToday(day) const totalAmount = salesOnDay.reduce((sum, sale) => sum + sale.netAmount, 0) const receivedAmount = salesOnDay .filter((sale) => paymentStatus[sale.id]) .reduce((sum, sale) => sum + sale.netAmount, 0) const allReceived = salesOnDay.length > 0 && salesOnDay.every((sale) => paymentStatus[sale.id]) const someReceived = salesOnDay.some((sale) => paymentStatus[sale.id]) return (

handleDayClick(day)} >

{format(day, "d")}

{salesOnDay.length > 0 && (

{salesOnDay.length}

)}

{salesOnDay.length > 0 && (

{formatCurrency(totalAmount)}

{allReceived && }

)}

) })}

) } [V0_FILE]typescriptreact:file="components/sales-charts.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { Sale, CardType } from "@/lib/types" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, } from "recharts" import { format, parseISO, startOfMonth, endOfMonth, eachMonthOfInterval, subMonths } from "date-fns" import { ptBR } from "date-fns/locale" import { BarChart3 } from "lucide-react" interface SalesChartsProps { sales: Sale[] cardTypes: CardType[] paymentStatus: { [key: string]: boolean } machineCardFees: MachineCardFee[] } // Define the MachineCardFee type interface MachineCardFee { id: string fee: number } export function SalesCharts({ sales, cardTypes, paymentStatus, machineCardFees }: SalesChartsProps) { const [monthlySalesData, setMonthlySalesData] = useState([]) const [cardTypeData, setCardTypeData] = useState([]) const [receivedVsPendingData, setReceivedVsPendingData] = useState([]) useEffect(() => { // Generate monthly sales data const last6Months = eachMonthOfInterval({ start: startOfMonth(subMonths(new Date(), 5)), end: startOfMonth(new Date()), }) const monthlyData = last6Months.map((monthDate) => { const monthStart = startOfMonth(monthDate) const monthEnd = endOfMonth(monthDate) const salesInMonth = sales.filter((sale) => { const saleDate = parseISO(sale.date) return saleDate >= monthStart && saleDate <= monthEnd }) const totalAmount = salesInMonth.reduce((sum, sale) => sum + sale.amount, 0) const netAmount = salesInMonth.reduce((sum, sale) => sum + sale.netAmount, 0) return { month: format(monthDate, "MMM", { locale: ptBR }), totalAmount, netAmount, } }) setMonthlySalesData(monthlyData) // Generate card type data const cardTypeSales: Record = {} sales.forEach((sale) => { const cardTypeName = cardTypes.find((c) => c.id === sale.cardTypeId)?.name || "Desconhecido" cardTypeSales[cardTypeName] = (cardTypeSales[cardTypeName] || 0) + sale.amount }) const cardTypeChartData = Object.entries(cardTypeSales).map(([name, value]) => ({ name, value, })) setCardTypeData(cardTypeChartData) // Generate received vs pending data const receivedAmount = sales.filter((sale) => paymentStatus[sale.id]).reduce((sum, sale) => sum + sale.netAmount, 0) const pendingAmount = sales.filter((sale) => !paymentStatus[sale.id]).reduce((sum, sale) => sum + sale.netAmount, 0) setReceivedVsPendingData([ { name: "Recebido", value: receivedAmount }, { name: "Pendente", value: pendingAmount }, ]) }, [sales, cardTypes, paymentStatus]) // Calculate monthly fees (amount lost to operators) const last6Months = eachMonthOfInterval({ start: startOfMonth(subMonths(new Date(), 5)), end: startOfMonth(new Date()), }) const calculateMonthlyFees = () => { const monthlyFeeData = last6Months.map((monthDate) => { const monthStart = startOfMonth(monthDate) const monthEnd = endOfMonth(monthDate) const salesInMonth = sales.filter((sale) => { const saleDate = parseISO(sale.date) return saleDate >= monthStart && saleDate <= monthEnd }) const feesAmount = salesInMonth.reduce((sum, sale) => sum + (sale.amount - sale.netAmount), 0) return { month: format(monthDate, "MMM", { locale: ptBR }), fees: feesAmount, } }) return monthlyFeeData } const monthlyFeeData = calculateMonthlyFees() const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"] const formatCurrency = (value: number) => { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value) } return ( Análise de Vendas Mensal Cartões Status Taxas

`R$${value}`} /> formatCurrency(Number(value))} />

`${name}: ${(percent * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {cardTypeData.map((entry, index) => ( ))} formatCurrency(Number(value))} />

`${name}: ${(percent * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > formatCurrency(Number(value))} />

`R$${value}`} /> formatCurrency(Number(value))} />

) } [V0_FILE]typescriptreact:file="lib/mock-data.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { CardType, Machine, Sale } from "@/lib/types" import { format, addDays, subDays } from "date-fns" import { adjustToBusinessDay } from "@/lib/utils" interface MachineCardFee { id: string machineId: string cardTypeId: string fee: number } export function generateMockData() { // Card types const cardTypes: CardType[] = [ { id: "1", name: "Visa Crédito", fee: 3.5, days: 30 }, { id: "2", name: "Visa Débito", fee: 1.5, days: 1 }, { id: "3", name: "Master Crédito", fee: 4.0, days: 30 }, { id: "4", name: "Master Débito", fee: 1.6, days: 1 }, ] // Machines const machines: Machine[] = [ { id: "1", name: "Moderninha" }, { id: "2", name: "SumUp" }, { id: "3", name: "Cielo" }, { id: "4", name: "GetNet" }, ] // Machine-specific card fees const machineCardFees: MachineCardFee[] = [ { id: "1-1", machineId: "1", cardTypeId: "1", fee: 3.2 }, { id: "1-2", machineId: "1", cardTypeId: "2", fee: 1.3 }, { id: "2-1", machineId: "2", cardTypeId: "1", fee: 3.7 }, { id: "2-3", machineId: "2", cardTypeId: "3", fee: 4.2 }, ] // Generate sales for the last 90 days const sales: Sale[] = [] const today = new Date() for (let i = 0; i < 30; i++) { const saleDate = format(subDays(today, Math.floor(Math.random() * 90)), "yyyy-MM-dd") const cardType = cardTypes[Math.floor(Math.random() * cardTypes.length)] const machine = machines[Math.floor(Math.random() * machines.length)] const amount = Math.floor(Math.random() * 1000) + 50 // Check if there's a machine-specific fee const machineFee = machineCardFees.find((fee) => fee.machineId === machine.id && fee.cardTypeId === cardType.id) const fee = machineFee ? machineFee.fee : cardType.fee const netAmount = amount - (amount * fee) / 100 // Calcular a data esperada e ajustar para dia útil const rawExpectedDate = addDays(new Date(saleDate), cardType.days) const adjustedExpectedDate = adjustToBusinessDay(rawExpectedDate) const expectedDate = format(adjustedExpectedDate, "yyyy-MM-dd") sales.push({ id: `sale-${i + 1}`, date: saleDate, amount, cardTypeId: cardType.id, machineId: machine.id, fee, netAmount, expectedDate, }) } return { cardTypes, machines, sales, machineCardFees } } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" "use client" import type * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps & { components?: { DayContent?: React.ComponentType<{ day: Date }> } } function Calendar({ className, classNames, showOutsideDays = true, components, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , DayContent: components?.DayContent ? ({ day }) => { const DayContentComponent = components.DayContent! return } : undefined, }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", success: "border-transparent bg-green-500 text-white hover:bg-green-600", warning: "border-transparent bg-amber-500 text-white hover:bg-amber-600", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isQuickEdit="true" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

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

), ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/date-picker.tsx" isEdit="true" isMerged="true" "use client" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface DatePickerProps { date: Date setDate: (date: Date) => void className?: string } export function DatePicker({ date, setDate, className }: DatePickerProps) { return ( newDate && setDate(newDate)} initialFocus locale={ptBR} /> ) } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescript:file="lib/utils.ts" isQuickEdit="true" isMerged="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Adicione estas funções para lidar com dias úteis no Brasil export function isWeekend(date: Date): boolean { const day = date.getDay() return day === 0 || day === 6 // 0 = domingo, 6 = sábado } export function isBrazilianHoliday(date: Date): boolean { const year = date.getFullYear() const month = date.getMonth() // 0-11 const day = date.getDate() // Feriados fixos const fixedHolidays = [ { month: 0, day: 1 }, // Ano Novo (1º de janeiro) { month: 3, day: 21 }, // Tiradentes (21 de abril) { month: 4, day: 1 }, // Dia do Trabalho (1º de maio) { month: 8, day: 7 }, // Independência (7 de setembro) { month: 9, day: 12 }, // Nossa Senhora Aparecida (12 de outubro) { month: 10, day: 2 }, // Finados (2 de novembro) { month: 10, day: 15 }, // Proclamação da República (15 de novembro) { month: 11, day: 25 }, // Natal (25 de dezembro) ] // Verificar feriados fixos for (const holiday of fixedHolidays) { if (month === holiday.month && day === holiday.day) { return true } } // Feriados móveis (Carnaval, Sexta-feira Santa, Corpus Christi) // Estes dependem da data da Páscoa, que varia a cada ano // Para simplificar, não estamos calculando estes feriados móveis aqui return false } export function getNextBusinessDay(date: Date): Date { const nextDay = new Date(date) nextDay.setDate(nextDay.getDate() + 1) // Continua verificando até encontrar um dia útil while (isWeekend(nextDay) || isBrazilianHoliday(nextDay)) { nextDay.setDate(nextDay.getDate() + 1) } return nextDay } export function adjustToBusinessDay(date: Date): Date { // Se a data já for um dia útil, retorna a mesma data if (!isWeekend(date) && !isBrazilianHoliday(date)) { return date } // Caso contrário, encontra o próximo dia útil return getNextBusinessDay(date) } [V0_FILE]typescriptreact:file="components/sales-table.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } 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, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Pencil, Trash2, Plus, Save, X, Check, CreditCard, ChevronLeft, ChevronRight, Calendar } from "lucide-react" import type { CardType, Machine, Sale, PaymentStatus, MachineCardFee } from "@/lib/types" import { format, parseISO, addDays, isSameDay, addMonths, subMonths } from "date-fns" import { ptBR } from "date-fns/locale" import { adjustToBusinessDay } from "@/lib/utils" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar as CalendarComponent } from "@/components/ui/calendar" interface SalesTableProps { sales: Sale[] setSales: React.Dispatch> cardTypes: CardType[] machines: Machine[] paymentStatus: PaymentStatus markPaymentReceived: (saleId: string, received: boolean) => void machineCardFees: MachineCardFee[] } export function SalesTable({ sales, setSales, cardTypes, machines, paymentStatus, markPaymentReceived, machineCardFees, }: SalesTableProps) { const [editingId, setEditingId] = useState(null) const [newSale, setNewSale] = useState>({ date: format(new Date(), "yyyy-MM-dd"), }) const [isAdding, setIsAdding] = useState(false) const [selectedDate, setSelectedDate] = useState(new Date()) const [viewMode, setViewMode] = useState<"day" | "month">("day") const [currentMonth, setCurrentMonth] = useState(new Date()) const [calendarOpen, setCalendarOpen] = useState(false) const handleEdit = (id: string) => { setEditingId(id) const sale = sales.find((s) => s.id === id) if (sale) { setNewSale({ date: sale.date, amount: sale.amount, cardTypeId: sale.cardTypeId, machineId: sale.machineId, }) } } const handleSave = (id: string) => { setSales( sales.map((sale) => { if (sale.id === id && newSale.date && newSale.amount && newSale.cardTypeId && newSale.machineId) { const cardType = cardTypes.find((c) => c.id === newSale.cardTypeId) // Check for machine-specific fee const machineFee = machineCardFees.find( (fee) => fee.machineId === newSale.machineId && fee.cardTypeId === newSale.cardTypeId, ) const fee = machineFee ? machineFee.fee : cardType ? cardType.fee : 0 return { ...sale, date: newSale.date, amount: newSale.amount, cardTypeId: newSale.cardTypeId, machineId: newSale.machineId, fee: fee, netAmount: calculateNetAmount(newSale.amount, fee), expectedDate: calculateExpectedDate(newSale.date, cardType ? cardType.days : 0), } } return sale }), ) setEditingId(null) setNewSale({ date: format(new Date(), "yyyy-MM-dd") }) } const handleDelete = (id: string) => { setSales(sales.filter((sale) => sale.id !== id)) } const handleAdd = () => { if (newSale.date && newSale.amount && newSale.cardTypeId && newSale.machineId) { const cardType = cardTypes.find((c) => c.id === newSale.cardTypeId) // Check for machine-specific fee const machineFee = machineCardFees.find( (fee) => fee.machineId === newSale.machineId && fee.cardTypeId === newSale.cardTypeId, ) const fee = machineFee ? machineFee.fee : cardType ? cardType.fee : 0 const sale: Sale = { id: Date.now().toString(), date: newSale.date, amount: newSale.amount, cardTypeId: newSale.cardTypeId, machineId: newSale.machineId, fee: fee, netAmount: calculateNetAmount(newSale.amount, fee), expectedDate: calculateExpectedDate(newSale.date, cardType ? cardType.days : 0), } setSales([...sales, sale]) setIsAdding(false) setNewSale({ date: format(selectedDate, "yyyy-MM-dd") }) } } const calculateNetAmount = (amount: number | undefined, fee: number): number => { if (!amount) return 0 return amount - (amount * fee) / 100 } const calculateExpectedDate = (date: string | undefined, days: number): string => { if (!date) return "" // Calcular a data esperada adicionando os dias let expectedDate = addDays(parseISO(date), days) // Ajustar para o próximo dia útil se cair em fim de semana ou feriado expectedDate = adjustToBusinessDay(expectedDate) return format(expectedDate, "yyyy-MM-dd") } const handleChange = (field: keyof Sale, value: string | number) => { if (field === "cardTypeId") { const cardType = cardTypes.find((c) => c.id === value) setNewSale({ ...newSale, [field]: value, fee: cardType ? cardType.fee : 0, netAmount: calculateNetAmount(newSale.amount, cardType ? cardType.fee : 0), expectedDate: calculateExpectedDate(newSale.date, cardType ? cardType.days : 0), }) } else if (field === "machineId" && newSale.cardTypeId) { // Update fee if machine changes and card type is already selected const cardType = cardTypes.find((c) => c.id === newSale.cardTypeId) // Check for machine-specific fee const machineFee = machineCardFees.find((fee) => fee.machineId === value && fee.cardTypeId === newSale.cardTypeId) const fee = machineFee ? machineFee.fee : cardType ? cardType.fee : 0 setNewSale({ ...newSale, [field]: value, fee: fee, netAmount: calculateNetAmount(newSale.amount, fee), }) } else { setNewSale({ ...newSale, [field]: field === "amount" ? Number(value) : value, }) } } const formatDate = (dateString: string): string => { try { return format(parseISO(dateString), "dd/MM/yyyy", { locale: ptBR }) } catch (error) { return dateString } } const getCardTypeName = (id: string): string => { const cardType = cardTypes.find((c) => c.id === id) return cardType ? cardType.name : "" } const getMachineName = (id: string): string => { const machine = machines.find((m) => m.id === id) return machine ? machine.name : "" } const formatCurrency = (value: number) => { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value) } // Filter sales based on selected date or month const filteredSales = sales.filter((sale) => { const saleDate = parseISO(sale.date) if (viewMode === "day") { return isSameDay(saleDate, selectedDate) } else { // Month view return saleDate.getMonth() === currentMonth.getMonth() && saleDate.getFullYear() === currentMonth.getFullYear() } }) // Sort sales by date (newest first) const sortedSales = [...filteredSales].sort((a, b) => { return new Date(b.date).getTime() - new Date(a.date).getTime() }) // Navigate to previous/next day or month const navigatePrevious = () => { if (viewMode === "day") { setSelectedDate((prev) => addDays(prev, -1)) } else { setCurrentMonth((prev) => subMonths(prev, 1)) } } const navigateNext = () => { if (viewMode === "day") { setSelectedDate((prev) => addDays(prev, 1)) } else { setCurrentMonth((prev) => addMonths(prev, 1)) } } // Set new sale date to match selected date when adding useEffect(() => { if (viewMode === "day") { setNewSale((prev) => ({ ...prev, date: format(selectedDate, "yyyy-MM-dd"), })) } }, [selectedDate, viewMode]) // Calculate totals for the current view const totalAmount = sortedSales.reduce((sum, sale) => sum + sale.amount, 0) const totalNetAmount = sortedSales.reduce((sum, sale) => sum + sale.netAmount, 0) const totalFees = totalAmount - totalNetAmount // Calculate monthly receivables const monthlyReceivables = filteredSales.reduce((sum, sale) => sum + sale.netAmount, 0) const receivedAmount = filteredSales .filter((sale) => paymentStatus[sale.id]) .reduce((sum, sale) => sum + sale.netAmount, 0) const remainingToReceive = monthlyReceivables - receivedAmount // Handle date selection const handleDateSelect = (date: Date | undefined) => { if (date) { setSelectedDate(date) setCalendarOpen(false) } } // Handle month selection const handleMonthSelect = (date: Date | undefined) => { if (date) { setCurrentMonth(date) setCalendarOpen(false) } } return ( Vendas

{viewMode === "day" ? (

) : (

)}
{viewMode === "day" && (

{sortedSales.length} {sortedSales.length === 1 ? "venda" : "vendas"} em{" "} {format(selectedDate, "dd 'de' MMMM 'de' yyyy", { locale: ptBR })}

)} {viewMode === "month" && ( <>

Total Bruto

{formatCurrency(totalAmount)}

Total em Taxas

{formatCurrency(totalFees)}

Total Líquido

{formatCurrency(totalNetAmount)}

Falta Receber

{formatCurrency(remainingToReceive)}

{formatCurrency(receivedAmount)} já recebido de {formatCurrency(monthlyReceivables)}

Mostrando {filteredSales.length} vendas em {format(currentMonth, "MMMM 'de' yyyy", { locale: ptBR })}

{Math.round((receivedAmount / monthlyReceivables) * 100)}%{" "} recebido

)}
{viewMode === "day" ? ( <> Valor Bruto Cartão Máquina Taxa (%) Valor Líquido Data Prevista Status Ações {isAdding && ( handleChange("amount", e.target.value)} placeholder="Valor" /> {newSale.cardTypeId && newSale.machineId ? (() => { const machineFee = machineCardFees.find( (fee) => fee.machineId === newSale.machineId && fee.cardTypeId === newSale.cardTypeId, ) const fee = machineFee ? machineFee.fee : cardTypes.find((c) => c.id === newSale.cardTypeId)?.fee || 0 return `${fee.toFixed(2)}%` })() : "-"} {newSale.amount && newSale.cardTypeId && newSale.machineId ? (() => { const machineFee = machineCardFees.find( (fee) => fee.machineId === newSale.machineId && fee.cardTypeId === newSale.cardTypeId, ) const fee = machineFee ? machineFee.fee : cardTypes.find((c) => c.id === newSale.cardTypeId)?.fee || 0 return formatCurrency(calculateNetAmount(newSale.amount, fee)) })() : "-"} {newSale.date && newSale.cardTypeId ? formatDate( calculateExpectedDate( newSale.date, cardTypes.find((c) => c.id === newSale.cardTypeId)?.days || 0, ), ) : "-"} -

)} {sortedSales.length === 0 ? ( {`Nenhuma venda registrada para ${format(selectedDate, "dd/MM/yyyy")}`} ) : ( sortedSales.map((sale) => ( {editingId === sale.id ? ( handleChange("amount", e.target.value)} /> ) : ( formatCurrency(sale.amount) )} {editingId === sale.id ? ( ) : ( getCardTypeName(sale.cardTypeId) )} {editingId === sale.id ? ( ) : ( getMachineName(sale.machineId) )} {sale.fee.toFixed(2)}% {formatCurrency(sale.netAmount)} {formatDate(sale.expectedDate)}
{editingId === sale.id ? ( ) : ( )}
)) )} ) : ( // Visualização mensal agrupada por dia <> Data Vendas Total Bruto Total Taxas Total Líquido Recebido Ações {(() => { // Agrupar vendas por dia const salesByDay: Record = {} sortedSales.forEach((sale) => { const day = sale.date.split("T")[0] // Pega apenas a parte da data if (!salesByDay[day]) { salesByDay[day] = [] } salesByDay[day].push(sale) }) // Se não houver vendas no mês if (Object.keys(salesByDay).length === 0) { return ( {`Nenhuma venda registrada para ${format(currentMonth, "MMMM 'de' yyyy", { locale: ptBR })}`} ) } // Ordenar dias (mais recentes primeiro) return Object.entries(salesByDay) .sort(([dateA], [dateB]) => new Date(dateB).getTime() - new Date(dateA).getTime()) .map(([date, daySales]) => { const dayTotalAmount = daySales.reduce((sum, sale) => sum + sale.amount, 0) const dayTotalNetAmount = daySales.reduce((sum, sale) => sum + sale.netAmount, 0) const dayTotalFees = dayTotalAmount - dayTotalNetAmount const receivedSales = daySales.filter((sale) => paymentStatus[sale.id]) const receivedAmount = receivedSales.reduce((sum, sale) => sum + sale.netAmount, 0) const receivedPercentage = dayTotalNetAmount > 0 ? Math.round((receivedAmount / dayTotalNetAmount) * 100) : 0 const allReceived = daySales.every((sale) => paymentStatus[sale.id]) const someReceived = daySales.some((sale) => paymentStatus[sale.id]) return ( { setSelectedDate(parseISO(date)) setViewMode("day") }} > {formatDate(date)}
{daySales.length} {allReceived ? "Todos recebidos" : someReceived ? "Parcialmente recebido" : "Pendente"}
{formatCurrency(dayTotalAmount)} {formatCurrency(dayTotalFees)} {formatCurrency(dayTotalNetAmount)}
{formatCurrency(receivedAmount)}

{receivedPercentage}%
) }) })()} )}

{sortedSales.length > 0 && viewMode === "day" && (

Total Bruto: {formatCurrency(totalAmount)}

Total em Taxas: {formatCurrency(totalFees)}

Total Líquido: {formatCurrency(totalNetAmount)}

)} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This