[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import type { Metadata } from "next" import { Dashboard } from "@/components/Dashboard" import { PageLayout } from "@/components/PageLayout" export const metadata: Metadata = { title: "Dashboard | Bitácora Electrónica", description: "Panel de control de la bitácora electrónica", } export default function DashboardPage() { return (

Dashboard

) } [V0_FILE]typescriptreact:file="components/bitacora-layout.tsx" "use client" import { AppSidebar } from "./app-sidebar" import { DataTables } from "./data-tables" import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" import { Separator } from "@/components/ui/separator" export function BitacoraLayout() { return (

Bitácora Electrónica

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" "use client" import { BarChart3, FileText, Package, ShoppingCart, Truck } from "lucide-react" import { usePathname } from "next/navigation" import Link from "next/link" import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, } from "@/components/ui/sidebar" const navigation = [ { title: "Dashboard", icon: BarChart3, href: "/", }, { title: "Ventas", icon: ShoppingCart, href: "/ventas", }, { title: "Compras", icon: Package, href: "/compras", }, { title: "Transporte", icon: Truck, href: "/transporte", }, { title: "Reportes", icon: FileText, href: "/reportes", }, ] export function AppSidebar() { const pathname = usePathname() return (

Bitácora Electrónica

{navigation.map((item) => ( {item.title} ))} ) } [V0_FILE]typescriptreact:file="components/data-tables/index.tsx" "use client" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ComprasDataTable } from "./compras-data-table" import { TransporteDataTable } from "./transporte-data-table" import { VentasDataTable } from "./ventas-data-table" export function DataTables() { return (

Ventas Compras Transporte

) } [V0_FILE]typescriptreact:file="components/data-tables/schema.ts" import { z } from "zod" export const ventasSchema = z.object({ id: z.string(), fechaFactura: z.string(), folioFactura: z.string(), fechaEntrega: z.string(), cliente: z.string(), origen: z.string(), destino: z.string(), producto: z.string(), razonSocial: z.string(), volLt20: z.number(), transportista: z.string(), precioBase: z.number(), precioNeto: z.number(), ieps: z.number(), baseIva16: z.number(), importe: z.number(), iva: z.number(), total: z.number(), }) export const comprasSchema = z.object({ noOperacion: z.string(), fechaCarga: z.string(), folioFactura: z.string(), fechaFactura: z.string(), fechaEntrega: z.string(), proveedor: z.string(), producto: z.string(), destino: z.string(), cantidadLt20: z.number(), precioBase: z.number(), precioConIeps: z.number(), precioNeto: z.number(), importeIeps: z.number(), importeBaseIva16: z.number(), importe: z.number(), iva: z.number(), totalFactura: z.number(), }) export const transporteSchema = z.object({ id: z.string(), fechaFactura: z.string(), folioFactura: z.string(), fechaDescarga: z.string(), cliente: z.string(), origen: z.string(), destino: z.string(), unidad: z.string(), cfdi: z.string(), producto: z.string(), subproducto: z.string(), volLt20: z.number(), transportista: z.string(), codigo: z.string(), tarifa: z.number(), importe: z.number(), }) export type Venta = z.infer export type Compra = z.infer export type Transporte = z.infer [V0_FILE]typescriptreact:file="components/data-tables/columns.tsx" "use client" import type { ColumnDef } from "@tanstack/react-table" import type { Compra, Transporte, Venta } from "./schema" export const ventasColumns: ColumnDef[] = [ { accessorKey: "id", header: "ID" }, { accessorKey: "fechaFactura", header: "Fecha Factura" }, { accessorKey: "folioFactura", header: "Folio Factura" }, { accessorKey: "fechaEntrega", header: "Fecha de Entrega" }, { accessorKey: "cliente", header: "Cliente" }, { accessorKey: "origen", header: "Origen" }, { accessorKey: "destino", header: "Destino" }, { accessorKey: "producto", header: "Producto" }, { accessorKey: "razonSocial", header: "Razón Social" }, { accessorKey: "volLt20", header: "Vol Lt a 20°", cell: ({ row }) => { return new Intl.NumberFormat("es-MX").format(row.getValue("volLt20")) }, }, { accessorKey: "transportista", header: "Transportista" }, { accessorKey: "precioBase", header: "Precio Base", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("precioBase")) }, }, { accessorKey: "precioNeto", header: "Precio Neto", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("precioNeto")) }, }, { accessorKey: "ieps", header: "IEPS", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("ieps")) }, }, { accessorKey: "baseIva16", header: "Base IVA 16%", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("baseIva16")) }, }, { accessorKey: "importe", header: "Importe", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("importe")) }, }, { accessorKey: "iva", header: "IVA", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("iva")) }, }, { accessorKey: "total", header: "Total", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("total")) }, }, ] export const comprasColumns: ColumnDef[] = [ { accessorKey: "noOperacion", header: "NO. OPERACION" }, { accessorKey: "fechaCarga", header: "FECHA CARGA" }, { accessorKey: "folioFactura", header: "FOLIO FACTURA" }, { accessorKey: "fechaFactura", header: "FECHA FACTURA" }, { accessorKey: "fechaEntrega", header: "FECHA DE ENTREGA" }, { accessorKey: "proveedor", header: "PROVEEDOR" }, { accessorKey: "producto", header: "PRODUCTO" }, { accessorKey: "destino", header: "DESTINO" }, { accessorKey: "cantidadLt20", header: "CANTIDAD LT A 20°", cell: ({ row }) => { return new Intl.NumberFormat("es-MX").format(row.getValue("cantidadLt20")) }, }, { accessorKey: "precioBase", header: "PRECIO BASE", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("precioBase")) }, }, { accessorKey: "precioConIeps", header: "PRECIO CON IEPS", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format( row.getValue("precioConIeps"), ) }, }, { accessorKey: "precioNeto", header: "PRECIO NETO", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("precioNeto")) }, }, { accessorKey: "importeIeps", header: "IMPORTE (IEPS)", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("importeIeps")) }, }, { accessorKey: "importeBaseIva16", header: "IMPORTE (BASE IVA 16%)", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format( row.getValue("importeBaseIva16"), ) }, }, { accessorKey: "importe", header: "IMPORTE", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("importe")) }, }, { accessorKey: "iva", header: "IVA", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("iva")) }, }, { accessorKey: "totalFactura", header: "TOTAL FACTURA", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("totalFactura")) }, }, ] export const transporteColumns: ColumnDef[] = [ { accessorKey: "id", header: "ID" }, { accessorKey: "fechaFactura", header: "Fecha Factura" }, { accessorKey: "folioFactura", header: "Folio Factura" }, { accessorKey: "fechaDescarga", header: "Fecha Descarga" }, { accessorKey: "cliente", header: "Cliente" }, { accessorKey: "origen", header: "Origen" }, { accessorKey: "destino", header: "Destino" }, { accessorKey: "unidad", header: "Unidad" }, { accessorKey: "cfdi", header: "CFDI" }, { accessorKey: "producto", header: "Producto" }, { accessorKey: "subproducto", header: "Subproducto" }, { accessorKey: "volLt20", header: "Vol Lt a 20°", cell: ({ row }) => { return new Intl.NumberFormat("es-MX").format(row.getValue("volLt20")) }, }, { accessorKey: "transportista", header: "Transportista" }, { accessorKey: "codigo", header: "Código" }, { accessorKey: "tarifa", header: "Tarifa", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("tarifa")) }, }, { accessorKey: "importe", header: "Importe", cell: ({ row }) => { return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(row.getValue("importe")) }, }, ] [V0_FILE]typescriptreact:file="components/data-tables/data-table.tsx" "use client" import * as React from "react" import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DataTablePagination } from "./data-table-pagination" import { DataTableToolbar } from "./data-table-toolbar" interface DataTableProps { columns: ColumnDef[] data: TData[] } export function DataTable({ columns, data }: DataTableProps) { const [rowSelection, setRowSelection] = React.useState({}) const [columnVisibility, setColumnVisibility] = React.useState({}) const [columnFilters, setColumnFilters] = React.useState([]) const [sorting, setSorting] = React.useState([]) const table = useReactTable({ data, columns, state: { sorting, columnVisibility, rowSelection, columnFilters, }, enableRowSelection: true, onRowSelectionChange: setRowSelection, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), }) return (

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No hay resultados. )}

) } [V0_FILE]typescriptreact:file="components/data-tables/data-table-toolbar.tsx" "use client" import { Cross2Icon } from "@radix-ui/react-icons" import type { Table } from "@tanstack/react-table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DataTableViewOptions } from "./data-table-view-options" interface DataTableToolbarProps { table: Table } export function DataTableToolbar({ table }: DataTableToolbarProps) { const isFiltered = table.getState().columnFilters.length > 0 return (

table.getColumn("id")?.setFilterValue(event.target.value)} className="h-8 w-[150px] lg:w-[250px]" /> {isFiltered && ( )}

) } [V0_FILE]typescriptreact:file="components/data-tables/data-table-view-options.tsx" isQuickEdit="true" "use client" import type { Table } from "@tanstack/react-table" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { MixerHorizontalIcon } from "@radix-ui/react-icons" interface DataTableViewOptionsProps { table: Table } export function DataTableViewOptions({ table }: DataTableViewOptionsProps) { return ( Alternar columnas {table .getAllColumns() .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()) .map((column) => { return ( column.toggleVisibility(!!value)} > {column.id} ) })} ) } [V0_FILE]typescriptreact:file="components/data-tables/data-table-pagination.tsx" "use client" import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons" import type { Table } from "@tanstack/react-table" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface DataTablePaginationProps { table: Table } export function DataTablePagination({ table }: DataTablePaginationProps) { return (

{table.getFilteredSelectedRowModel().rows.length} de {table.getFilteredRowModel().rows.length} fila(s) seleccionada(s).

Filas por página

Página {table.getState().pagination.pageIndex + 1} de {table.getPageCount()}

) } [V0_FILE]typescriptreact:file="components/data-tables/ventas-data-table.tsx" "use client" import { useData } from "@/contexts/DataContext" import { DataTable } from "./data-table" import { ventasColumns } from "./columns" export function VentasDataTable() { const { ventas } = useData() return } [V0_FILE]typescriptreact:file="components/data-tables/compras-data-table.tsx" "use client" import { useData } from "@/contexts/DataContext" import { DataTable } from "./data-table" import { comprasColumns } from "./columns" export function ComprasDataTable() { const { compras } = useData() return } [V0_FILE]typescriptreact:file="components/data-tables/transporte-data-table.tsx" "use client" import { useData } from "@/contexts/DataContext" import { DataTable } from "./data-table" import { transporteColumns } from "./columns" export function TransporteDataTable() { const { transportes } = useData() return } [V0_FILE]typescriptreact:file="app/ventas/page.tsx" isQuickEdit="true" import type { Metadata } from "next" import { VentasDataTable } from "@/components/data-tables/ventas-data-table" import { VentaForm } from "@/components/forms/VentaForm" import { PageLayout } from "@/components/PageLayout" export const metadata: Metadata = { title: "Ventas | Bitácora Electrónica", description: "Gestión de ventas en la bitácora electrónica", } export default function VentasPage() { return (

Ventas

) } [V0_FILE]typescriptreact:file="app/compras/page.tsx" isQuickEdit="true" import type { Metadata } from "next" import { ComprasDataTable } from "@/components/data-tables/compras-data-table" import { CompraForm } from "@/components/forms/CompraForm" import { PageLayout } from "@/components/PageLayout" export const metadata: Metadata = { title: "Compras | Bitácora Electrónica", description: "Gestión de compras en la bitácora electrónica", } export default function ComprasPage() { return (

Compras

) } [V0_FILE]typescriptreact:file="app/transporte/page.tsx" isQuickEdit="true" import type { Metadata } from "next" import { TransporteDataTable } from "@/components/data-tables/transporte-data-table" import { TransporteForm } from "@/components/forms/TransporteForm" import { PageLayout } from "@/components/PageLayout" export const metadata: Metadata = { title: "Transporte | Bitácora Electrónica", description: "Gestión de transporte en la bitácora electrónica", } export default function TransportePage() { return (

Transporte

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import { AppSidebar } from "@/components/app-sidebar" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" import { DataProvider } from "@/contexts/DataContext" export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="contexts/DataContext.tsx" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import type { Venta, Compra, Transporte } from "@/components/data-tables/schema" interface DataContextType { ventas: Venta[] compras: Compra[] transportes: Transporte[] addVenta: (venta: Venta) => void addCompra: (compra: Compra) => void addTransporte: (transporte: Transporte) => void } const DataContext = createContext(undefined) export const useData = () => { const context = useContext(DataContext) if (!context) { throw new Error("useData must be used within a DataProvider") } return context } export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [ventas, setVentas] = useState([]) const [compras, setCompras] = useState([]) const [transportes, setTransportes] = useState([]) useEffect(() => { // Aquí podrías cargar datos iniciales desde una API o localStorage // Por ahora, usaremos datos de muestra setVentas([ { id: "1", fechaFactura: "2024-01-20", folioFactura: "FAC-V001", fechaEntrega: "2024-01-21", cliente: "Gasolinera XYZ", origen: "CDMX", destino: "Guadalajara", producto: "Gasolina Regular", razonSocial: "Gasolinera XYZ S.A. de C.V.", volLt20: 5000, transportista: "Transportes ABC", precioBase: 20.5, precioNeto: 22.5, ieps: 1.5, baseIva16: 24, importe: 120000, iva: 19200, total: 139200, }, { id: "2", fechaFactura: "2024-01-22", folioFactura: "FAC-V002", fechaEntrega: "2024-01-23", cliente: "Estación de Servicio 123", origen: "Monterrey", destino: "Tijuana", producto: "Diésel", razonSocial: "Estación de Servicio 123 S.A. de C.V.", volLt20: 8000, transportista: "Transportes DEF", precioBase: 22.0, precioNeto: 24.0, ieps: 1.8, baseIva16: 25.8, importe: 206400, iva: 33024, total: 239424, }, ]) setCompras([ { noOperacion: "OP001", fechaCarga: "2024-01-19", folioFactura: "FAC-C001", fechaFactura: "2024-01-19", fechaEntrega: "2024-01-20", proveedor: "Refinería Nacional", producto: "Gasolina Regular", destino: "CDMX", cantidadLt20: 5000, precioBase: 18.5, precioConIeps: 20, precioNeto: 21, importeIeps: 7500, importeBaseIva16: 105000, importe: 112500, iva: 18000, totalFactura: 130500, }, { noOperacion: "OP002", fechaCarga: "2024-01-21", folioFactura: "FAC-C002", fechaFactura: "2024-01-21", fechaEntrega: "2024-01-22", proveedor: "Refinería Internacional", producto: "Diésel", destino: "Monterrey", cantidadLt20: 8000, precioBase: 20.0, precioConIeps: 21.8, precioNeto: 22.8, importeIeps: 14400, importeBaseIva16: 182400, importe: 196800, iva: 31488, totalFactura: 228288, }, ]) setTransportes([ { id: "1", fechaFactura: "2024-01-21", folioFactura: "TRANS-001", fechaDescarga: "2024-01-21", cliente: "Gasolinera XYZ", origen: "CDMX", destino: "Guadalajara", unidad: "Unidad-123", cfdi: "CFDI-456", producto: "Gasolina Regular", subproducto: "Regular 87", volLt20: 5000, transportista: "Transportes ABC", codigo: "CODE-789", tarifa: 2.5, importe: 12500, }, { id: "2", fechaFactura: "2024-01-23", folioFactura: "TRANS-002", fechaDescarga: "2024-01-23", cliente: "Estación de Servicio 123", origen: "Monterrey", destino: "Tijuana", unidad: "Unidad-456", cfdi: "CFDI-789", producto: "Diésel", subproducto: "Diésel Ultra Bajo Azufre", volLt20: 8000, transportista: "Transportes DEF", codigo: "CODE-012", tarifa: 3.0, importe: 24000, }, ]) }, []) const addVenta = (venta: Venta) => { setVentas([...ventas, venta]) } const addCompra = (compra: Compra) => { setCompras([...compras, compra]) } const addTransporte = (transporte: Transporte) => { setTransportes([...transportes, transporte]) } return ( {children} ) } [V0_FILE]typescriptreact:file="components/forms/VentaForm.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { useData } from "@/contexts/DataContext" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" export function VentaForm() { const { addVenta, ventas } = useData() const [open, setOpen] = useState(false) const [formData, setFormData] = useState({ fechaFactura: "", folioFactura: "", fechaEntrega: "", cliente: "", origen: "", destino: "", producto: "", razonSocial: "", volLt20: 0, transportista: "", precioBase: 0, precioNeto: 0, ieps: 0, baseIva16: 0, importe: 0, iva: 0, total: 0, }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const newId = (Number.parseInt(ventas[ventas.length - 1].id) + 1).toString() addVenta({ id: newId, ...formData }) setOpen(false) setFormData({ fechaFactura: "", folioFactura: "", fechaEntrega: "", cliente: "", origen: "", destino: "", producto: "", razonSocial: "", volLt20: 0, transportista: "", precioBase: 0, precioNeto: 0, ieps: 0, baseIva16: 0, importe: 0, iva: 0, total: 0, }) } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } return ( ) } [V0_FILE]typescriptreact:file="components/forms/CompraForm.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { useData } from "@/contexts/DataContext" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" export function CompraForm() { const { addCompra, compras } = useData() const [open, setOpen] = useState(false) const [formData, setFormData] = useState({ fechaCarga: "", folioFactura: "", fechaFactura: "", fechaEntrega: "", proveedor: "", producto: "", destino: "", cantidadLt20: 0, precioBase: 0, precioConIeps: 0, precioNeto: 0, importeIeps: 0, importeBaseIva16: 0, importe: 0, iva: 0, totalFactura: 0, }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const newNoOperacion = `OP${(compras.length + 1).toString().padStart(3, "0")}` addCompra({ noOperacion: newNoOperacion, ...formData }) setOpen(false) setFormData({ fechaCarga: "", folioFactura: "", fechaFactura: "", fechaEntrega: "", proveedor: "", producto: "", destino: "", cantidadLt20: 0, precioBase: 0, precioConIeps: 0, precioNeto: 0, importeIeps: 0, importeBaseIva16: 0, importe: 0, iva: 0, totalFactura: 0, }) } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } return ( ) } [V0_FILE]typescriptreact:file="components/forms/TransporteForm.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { useData } from "@/contexts/DataContext" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" export function TransporteForm() { const { addTransporte, transportes } = useData() const [open, setOpen] = useState(false) const [formData, setFormData] = useState({ fechaFactura: "", folioFactura: "", fechaDescarga: "", cliente: "", origen: "", destino: "", unidad: "", cfdi: "", producto: "", subproducto: "", volLt20: 0, transportista: "", codigo: "", tarifa: 0, importe: 0, }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const newId = (transportes.length + 1).toString() addTransporte({ id: newId, ...formData }) setOpen(false) setFormData({ fechaFactura: "", folioFactura: "", fechaDescarga: "", cliente: "", origen: "", destino: "", unidad: "", cfdi: "", producto: "", subproducto: "", volLt20: 0, transportista: "", codigo: "", tarifa: 0, importe: 0, }) } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } return ( ) } [V0_FILE]typescriptreact:file="components/Dashboard.tsx" "use client" import { useData } from "@/contexts/DataContext" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts" export function Dashboard() { const { ventas, compras, transportes } = useData() const ventasTotal = ventas.reduce((acc, venta) => acc + venta.total, 0) const comprasTotal = compras.reduce((acc, compra) => acc + compra.totalFactura, 0) const transporteTotal = transportes.reduce((acc, transporte) => acc + transporte.importe, 0) const chartData = [ { name: "Ventas", valor: ventasTotal }, { name: "Compras", valor: comprasTotal }, { name: "Transporte", valor: transporteTotal }, ] return (

Ventas Totales

{new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(ventasTotal)}

Compras Totales

{new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(comprasTotal)}

Transporte Total

{new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(transporteTotal)}

Resumen de Operaciones

) } [V0_FILE]typescriptreact:file="components/PageLayout.tsx" import type { ReactNode } from "react" import { cn } from "@/lib/utils" interface PageLayoutProps { children: ReactNode className?: string } export function PageLayout({ children, className }: PageLayoutProps) { return

{children}

} [V0_FILE]typescriptreact:file="app/reportes/page.tsx" "use client" import { useState } from "react" import { useData } from "@/contexts/DataContext" import { generateXMLReport } from "@/utils/xmlReportGenerator" import { PageLayout } from "@/components/PageLayout" import { Button } from "@/components/ui/button" export default function ReportesPage() { const { ventas, compras, transportes } = useData() const [xmlContent, setXmlContent] = useState(null) const handleGenerateReport = () => { const xml = generateXMLReport(ventas, compras, transportes) setXmlContent(xml) } const handleDownload = () => { if (xmlContent) { const blob = new Blob([xmlContent], { type: "text/xml" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "reporte.xml" document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } } return (

Reportes

{xmlContent && (

{xmlContent}

)}

) } [V0_FILE]typescriptreact:file="utils/xmlReportGenerator.ts" isQuickEdit="true" import { create } from "xmlbuilder2" import type { Venta, Compra, Transporte } from "@/components/data-tables/schema" export function generateXMLReport(ventas: Venta[], compras: Compra[], transportes: Transporte[]): string { const root = create({ version: "1.0", encoding: "UTF-8" }).ele("reporte") // Agregar ventas const ventasElement = root.ele("ventas") ventas.forEach((venta) => { ventasElement .ele("venta") .ele("id") .txt(venta.id) .up() .ele("fechaFactura") .txt(venta.fechaFactura) .up() .ele("folioFactura") .txt(venta.folioFactura) .up() .ele("fechaEntrega") .txt(venta.fechaEntrega) .up() .ele("cliente") .txt(venta.cliente) .up() .ele("origen") .txt(venta.origen) .up() .ele("destino") .txt(venta.destino) .up() .ele("producto") .txt(venta.producto) .up() .ele("razonSocial") .txt(venta.razonSocial) .up() .ele("volLt20") .txt(venta.volLt20.toString()) .up() .ele("transportista") .txt(venta.transportista) .up() .ele("precioBase") .txt(venta.precioBase.toString()) .up() .ele("precioNeto") .txt(venta.precioNeto.toString()) .up() .ele("ieps") .txt(venta.ieps.toString()) .up() .ele("baseIva16") .txt(venta.baseIva16.toString()) .up() .ele("importe") .txt(venta.importe.toString()) .up() .ele("iva") .txt(venta.iva.toString()) .up() .ele("total") .txt(venta.total.toString()) .up() }) // Agregar compras const comprasElement = root.ele("compras") compras.forEach((compra) => { comprasElement .ele("compra") .ele("noOperacion") .txt(compra.noOperacion) .up() .ele("fechaCarga") .txt(compra.fechaCarga) .up() .ele("folioFactura") .txt(compra.folioFactura) .up() .ele("fechaFactura") .txt(compra.fechaFactura) .up() .ele("fechaEntrega") .txt(compra.fechaEntrega) .up() .ele("proveedor") .txt(compra.proveedor) .up() .ele("producto") .txt(compra.producto) .up() .ele("destino") .txt(compra.destino) .up() .ele("cantidadLt20") .txt(compra.cantidadLt20.toString()) .up() .ele("precioBase") .txt(compra.precioBase.toString()) .up() .ele("precioConIeps") .txt(compra.precioConIeps.toString()) .up() .ele("precioNeto") .txt(compra.precioNeto.toString()) .up() .ele("importeIeps") .txt(compra.importeIeps.toString()) .up() .ele("importeBaseIva16") .txt(compra.importeBaseIva16.toString()) .up() .ele("importe") .txt(compra.importe.toString()) .up() .ele("iva") .txt(compra.iva.toString()) .up() .ele("totalFactura") .txt(compra.totalFactura.toString()) .up() }) // Agregar transportes const transportesElement = root.ele("transportes") transportes.forEach((transporte) => { transportesElement .ele("transporte") .ele("id") .txt(transporte.id) .up() .ele("fechaFactura") .txt(transporte.fechaFactura) .up() .ele("folioFactura") .txt(transporte.folioFactura) .up() .ele("fechaDescarga") .txt(transporte.fechaDescarga) .up() .ele("cliente") .txt(transporte.cliente) .up() .ele("origen") .txt(transporte.origen) .up() .ele("destino") .txt(transporte.destino) .up() .ele("unidad") .txt(transporte.unidad) .up() .ele("cfdi") .txt(transporte.cfdi) .up() .ele("producto") .txt(transporte.producto) .up() .ele("subproducto") .txt(transporte.subproducto) .up() .ele("volLt20") .txt(transporte.volLt20.toString()) .up() .ele("transportista") .txt(transporte.transportista) .up() .ele("codigo") .txt(transporte.codigo) .up() .ele("tarifa") .txt(transporte.tarifa.toString()) .up() .ele("importe") .txt(transporte.importe.toString()) .up() }) // Agregar resumen const resumenElement = root.ele("resumen") const totalVentas = ventas.reduce((sum, venta) => sum + venta.total, 0) const totalCompras = compras.reduce((sum, compra) => sum + compra.totalFactura, 0) const totalTransportes = transportes.reduce((sum, transporte) => sum + transporte.importe, 0) resumenElement .ele("totalVentas") .txt(totalVentas.toString()) .up() .ele("totalCompras") .txt(totalCompras.toString()) .up() .ele("totalTransportes") .txt(totalTransportes.toString()) .up() .ele("balance") .txt((totalVentas - totalCompras - totalTransportes).toString()) .up() return root.end({ prettyPrint: true }) }