[V0_FILE]typescriptreact:file="components/file-upload.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Upload, FileWarning, CheckCircle2, Trash2 } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { useToast } from "@/hooks/use-toast" import { Dashboard } from "@/components/dashboard" interface AnalyticsData { id: string type: string page: string event: string eventData: string queryParameter: string time: string uid: string deviceId: string referrer: string subdomain: string origin: string contextId: string projectId: string automationId: string status: string result: string } export function FileUpload() { const [isLoading, setIsLoading] = useState(false) const [data, setData] = useState([]) const [fileName, setFileName] = useState("") const { toast } = useToast() const handleFileUpload = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return // Check if file is CSV if (file.type !== "text/csv" && !file.name.endsWith(".csv")) { toast({ title: "Invalid file type", description: "Please upload a CSV file", variant: "destructive", }) return } setIsLoading(true) setFileName(file.name) try { // Use a web worker for parsing to avoid blocking the UI thread const worker = new Worker(new URL("../lib/csv-worker.ts", import.meta.url)) const reader = new FileReader() reader.onload = () => { worker.postMessage(reader.result) } worker.onmessage = (e) => { const parsedData = e.data setData(parsedData) setIsLoading(false) toast({ title: "CSV uploaded successfully", description: `Processed ${parsedData.length} rows of data`, variant: "default", }) worker.terminate() } worker.onerror = () => { setIsLoading(false) toast({ title: "Error parsing CSV", description: "There was an error processing your file", variant: "destructive", }) worker.terminate() } reader.readAsText(file) } catch (error) { setIsLoading(false) toast({ title: "Error uploading file", description: "There was an error uploading your file", variant: "destructive", }) } } const handleRemoveData = () => { setData([]) setFileName("") toast({ title: "Data removed", description: "All analytics data has been cleared", variant: "default", }) } if (data.length > 0) { return (

{fileName} loaded

) } return (

Splitbee Export Viewer

Since Splitbee is shutting down, this tool helps you view your exported analytics data. Upload your Splitbee CSV export file to visualize your analytics.

Click to upload or drag and drop

Splitbee CSV export files only

{fileName && isLoading && (

Processing {fileName}...

)}

) } [V0_FILE]typescriptreact:file="components/dashboard-skeleton.tsx" isMerged="true" isEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Skeleton } from "@/components/ui/skeleton" export function DashboardSkeleton() { return (

{Array(4) .fill(0) .map((_, i) => ( ))}

Overview Pages Referrers Devices

) } [V0_FILE]typescript:file="lib/csv-worker.ts" isMerged="true" isEdit="true" // Web Worker for CSV parsing self.onmessage = (e) => { const csvText = e.data try { const parsedData = parseCSV(csvText) self.postMessage(parsedData) } catch (error) { self.postMessage({ error: "Failed to parse CSV" }) } } function parseCSV(csvText: string) { // Split the CSV text into lines const lines = csvText.split(/\r\n|\n/) // Extract headers from the first line const headers = parseCSVLine(lines[0]) // Parse each line into an object const result = [] for (let i = 1; i < lines.length; i++) { const line = lines[i].trim() if (!line) continue const values = parseCSVLine(line) const entry: Record = {} headers.forEach((header, index) => { entry[header.replace(/"/g, "")] = values[index]?.replace(/"/g, "") || "" }) result.push(entry) } return result } function parseCSVLine(line: string) { const result = [] let current = "" let inQuotes = false for (let i = 0; i < line.length; i++) { const char = line[i] if (char === '"') { // Toggle the inQuotes flag inQuotes = !inQuotes } else if (char === "," && !inQuotes) { // If we're not in quotes and we see a comma, end the current field result.push(current) current = "" } else { // Otherwise, add the character to the current field current += char } } // Add the last field result.push(current) return result } [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import { useEffect, useState } from "react" export function useIsMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkIfMobile = () => { setIsMobile(window.innerWidth < 768) } // Initial check checkIfMobile() // Add event listener window.addEventListener("resize", checkIfMobile) // Clean up return () => { window.removeEventListener("resize", checkIfMobile) } }, []) return isMobile } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { Bar, BarChart as RechartsBarChart, Cell, Legend, Line, LineChart as RechartsLineChart, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts" import { cn } from "@/lib/utils" interface ChartConfig { [key: string]: { label: string color?: string } } interface ChartProps extends React.HTMLAttributes { config: ChartConfig } export function ChartContainer({ config, className, children, ...props }: ChartProps) { // Create CSS variables for chart colors const style = React.useMemo(() => { return Object.entries(config).reduce( (acc, [key, value]) => { if (value.color) { acc[`--color-${key}`] = value.color } return acc }, {} as Record, ) }, [config]) return (

{children}

) } interface ChartTooltipProps { active?: boolean payload?: Array<{ name: string value: number payload: { [key: string]: any } }> label?: string formatter?: (value: number, name: string, props: any) => [string, string] labelFormatter?: (label: string) => string config?: ChartConfig hideLabel?: boolean } export function ChartTooltip({ active, payload, label, formatter, labelFormatter, config, hideLabel = false, }: ChartTooltipProps) { if (!active || !payload?.length) { return null } return (

{!hideLabel && (

{labelFormatter ? labelFormatter(label as string) : label}

)}

{payload.map((item, index) => { const color = config?.[item.name]?.color || `var(--color-${item.name})` const formattedValue = formatter ? formatter(item.value, item.name, item.payload)[0] : item.value return (

{config?.[item.name]?.label || item.name} {formattedValue}

) })}

) } export const ChartTooltipContent = ChartTooltip interface BarChartProps { data: any[] index: string categories: string[] colors?: string[] valueFormatter?: (value: number) => string showLegend?: boolean showTooltip?: boolean showXAxis?: boolean showYAxis?: boolean layout?: "vertical" | "horizontal" } export function BarChart({ data, index, categories, colors = ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))"], valueFormatter = (value: number) => value.toString(), showLegend = true, showTooltip = true, showXAxis = true, showYAxis = true, layout = "horizontal", }: BarChartProps) { const config = React.useMemo(() => { return categories.reduce((acc, category, i) => { acc[category] = { label: category, color: colors[i % colors.length], } return acc }, {} as ChartConfig) }, [categories, colors]) return ( {showTooltip && ( ( [valueFormatter(value), ""]} config={config} /> )} /> )} {showXAxis && ( )} {showYAxis && ( )} {showLegend && ( (

{payload?.map((entry, index) => (

{config[entry.value]?.label || entry.value}

))}

)} /> )} {categories.map((category, index) => ( ))} ) } interface LineChartProps { data: any[] index: string categories: string[] colors?: string[] valueFormatter?: (value: number) => string showLegend?: boolean showTooltip?: boolean showXAxis?: boolean showYAxis?: boolean } export function LineChart({ data, index, categories, colors = ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))"], valueFormatter = (value: number) => value.toString(), showLegend = true, showTooltip = true, showXAxis = true, showYAxis = true, }: LineChartProps) { const config = React.useMemo(() => { return categories.reduce((acc, category, i) => { acc[category] = { label: category, color: colors[i % colors.length], } return acc }, {} as ChartConfig) }, [categories, colors]) return ( {showTooltip && ( ( [valueFormatter(value), ""]} config={config} /> )} /> )} {showXAxis && ( )} {showYAxis && } {showLegend && ( (

{payload?.map((entry, index) => (

{config[entry.value]?.label || entry.value}

))}

)} /> )} {categories.map((category, index) => ( ))} ) } interface PieChartProps { data: any[] index: string categories: string[] colors?: string[] valueFormatter?: (value: number) => string showLegend?: boolean showTooltip?: boolean } export function PieChart({ data, index, categories, colors = [ "hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))", "hsl(var(--chart-5))", ], valueFormatter = (value: number) => value.toString(), showLegend = true, showTooltip = true, }: PieChartProps) { const config = React.useMemo(() => { return categories.reduce((acc, category, i) => { acc[category] = { label: category, color: colors[i % colors.length], } return acc }, {} as ChartConfig) }, [categories, colors]) const chartColors = React.useMemo(() => { return colors.map((color) => color) }, [colors]) return ( {showTooltip && ( ( [valueFormatter(value), ""]} config={config} hideLabel /> )} /> )} {showLegend && ( (

{payload?.map((entry, index) => (

{entry.payload.name}

))}

)} /> )} {data.map((entry, index) => ( ))} ) } [V0_FILE]typescriptreact:file="components/date-range-picker.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { CalendarIcon } from "lucide-react" import { format } from "date-fns" import type { DateRange } from "react-day-picker" 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 DateRangePickerProps extends React.HTMLAttributes { dateRange: DateRange | undefined onDateRangeChange: (range: DateRange | undefined) => void align?: "center" | "start" | "end" preset?: boolean } export function DateRangePicker({ dateRange, onDateRangeChange, className, align = "start", preset = true, }: DateRangePickerProps) { const [isOpen, setIsOpen] = React.useState(false) const handlePresetChange = (preset: { from: Date; to: Date }) => { onDateRangeChange(preset) setIsOpen(false) } return (

{preset && (

)}

) } [V0_FILE]typescript:file="lib/utils.ts" isQuickEdit="true" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/comparison-toggle.tsx" isMerged="true" "use client" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" interface ComparisonToggleProps { enabled: boolean onToggle: (enabled: boolean) => void } export function ComparisonToggle({ enabled, onToggle }: ComparisonToggleProps) { return (

Compare to previous period

) } [V0_FILE]typescriptreact:file="components/data-filters.tsx" isMerged="true" "use client" import { Filter, X } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" interface FilterOption { id: string label: string value: string } interface DataFiltersProps { pages: FilterOption[] referrers: FilterOption[] selectedPages: string[] selectedReferrers: string[] onPagesChange: (pages: string[]) => void onReferrersChange: (referrers: string[]) => void } export function DataFilters({ pages, referrers, selectedPages, selectedReferrers, onPagesChange, onReferrersChange, }: DataFiltersProps) { const hasActiveFilters = selectedPages.length > 0 || selectedReferrers.length > 0 const clearAllFilters = () => { onPagesChange([]) onReferrersChange([]) } const removePageFilter = (page: string) => { onPagesChange(selectedPages.filter((p) => p !== page)) } const removeReferrerFilter = (referrer: string) => { onReferrersChange(selectedReferrers.filter((r) => r !== referrer)) } return (

Filter by Page {pages.map((page) => ( { if (checked) { onPagesChange([...selectedPages, page.value]) } else { onPagesChange(selectedPages.filter((p) => p !== page.value)) } }} > {page.label} ))} Filter by Referrer {referrers.map((referrer) => ( { if (checked) { onReferrersChange([...selectedReferrers, referrer.value]) } else { onReferrersChange(selectedReferrers.filter((r) => r !== referrer.value)) } }} > {referrer.label} ))} {hasActiveFilters && ( )} {selectedPages.map((page) => { const pageOption = pages.find((p) => p.value === page) return ( Page: {pageOption?.label || page} ) })} {selectedReferrers.map((referrer) => { const referrerOption = referrers.find((r) => r.value === referrer) return ( Referrer: {referrerOption?.label || referrer} ) })}

) } [V0_FILE]typescriptreact:file="components/export-button.tsx" isMerged="true" "use client" import { Download } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface ExportButtonProps { data: any[] filename?: string } export function ExportButton({ data, filename = "analytics-data" }: ExportButtonProps) { const exportCSV = () => { if (!data.length) return // Get headers from the first object const headers = Object.keys(data[0]) // Create CSV content const csvContent = [ headers.join(","), // Header row ...data.map((row) => headers .map((header) => { // Handle values that need quotes (contain commas, quotes, or newlines) const value = String(row[header] || "") const needsQuotes = value.includes(",") || value.includes('"') || value.includes("\n") return needsQuotes ? `"${value.replace(/"/g, '""')}"` : value }) .join(","), ), ].join("\n") // Create and download the file const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", `${filename}-${new Date().toISOString().split("T")[0]}.csv`) link.style.display = "none" document.body.appendChild(link) link.click() document.body.removeChild(link) } const exportJSON = () => { if (!data.length) return const jsonString = JSON.stringify(data, null, 2) const blob = new Blob([jsonString], { type: "application/json" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", `${filename}-${new Date().toISOString().split("T")[0]}.json`) link.style.display = "none" document.body.appendChild(link) link.click() document.body.removeChild(link) } return ( Export as CSV Export as JSON ) } [V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isMerged="true" import * as React from "react" import Link from "next/link" import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" import { type ButtonProps, buttonVariants } from "@/components/ui/button" const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (

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

>(({ className, ...props }, ref) => (

)) PaginationItem.displayName = "PaginationItem" type PaginationLinkProps = { isActive?: boolean } & Pick & React.ComponentProps const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => ( ) PaginationLink.displayName = "PaginationLink" const PaginationPrevious = ({ className, ...props }: React.ComponentProps) => ( Previous ) PaginationPrevious.displayName = "PaginationPrevious" const PaginationNext = ({ className, ...props }: React.ComponentProps) => ( Next ) PaginationNext.displayName = "PaginationNext" const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( More pages ) PaginationEllipsis.displayName = "PaginationEllipsis" export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" "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]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-md 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 shadow hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", outline: "text-foreground", }, }, 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/user-flow.tsx" isMerged="true" "use client" import * as React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface UserFlowProps { data: any[] } export function UserFlow({ data }: UserFlowProps) { const [startPage, setStartPage] = React.useState("all") // Extract unique pages for the selector const uniquePages = React.useMemo(() => { const pages = new Set() data.forEach((item) => { if (item.page) pages.add(item.page) }) return Array.from(pages) }, [data]) // Process data to create flow visualization const flowData = React.useMemo(() => { // Group sessions by user ID const sessions = new Map() data.forEach((item) => { if (!item.uid || !item.page) return if (!sessions.has(item.uid)) { sessions.set(item.uid, { pages: [], timestamps: [] }) } const session = sessions.get(item.uid)! session.pages.push(item.page) session.timestamps.push(item.time) }) // Calculate page transitions const transitions = new Map>() sessions.forEach((session) => { // Skip sessions that don't start with the selected page (if one is selected) if (startPage !== "all" && session.pages[0] !== startPage) return for (let i = 0; i < session.pages.length - 1; i++) { const from = session.pages[i] const to = session.pages[i + 1] if (!transitions.has(from)) { transitions.set(from, new Map()) } const destinations = transitions.get(from)! destinations.set(to, (destinations.get(to) || 0) + 1) } }) // Convert to array format for visualization const nodes: { id: string; value: number }[] = [] const links: { source: string; target: string; value: number }[] = [] // Count page views for node sizes const pageCounts = new Map() data.forEach((item) => { if (item.page) { pageCounts.set(item.page, (pageCounts.get(item.page) || 0) + 1) } }) // Create nodes pageCounts.forEach((count, page) => { nodes.push({ id: page, value: count }) }) // Create links transitions.forEach((destinations, source) => { destinations.forEach((count, target) => { links.push({ source, target, value: count }) }) }) return { nodes, links } }, [data, startPage]) return (

User Flow Visualize how users navigate through your site

) } [V0_FILE]typescriptreact:file="components/file-manager.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { FileText, Upload, Trash2, Save, FolderOpen } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface SavedFile { id: string name: string date: string rows: number data: any[] } interface FileManagerProps { currentData: any[] onLoadFile: (data: any[]) => void } export function FileManager({ currentData, onLoadFile }: FileManagerProps) { const [savedFiles, setSavedFiles] = React.useState([]) const [fileName, setFileName] = React.useState("") const [isDialogOpen, setIsDialogOpen] = React.useState(false) // Load saved files from localStorage on mount React.useEffect(() => { const storedFiles = localStorage.getItem("csv-analytics-files") if (storedFiles) { try { setSavedFiles(JSON.parse(storedFiles)) } catch (e) { console.error("Failed to load saved files", e) } } }, []) // Save files to localStorage when they change React.useEffect(() => { if (savedFiles.length) { localStorage.setItem("csv-analytics-files", JSON.stringify(savedFiles)) } }, [savedFiles]) const handleSaveFile = () => { if (!fileName.trim() || !currentData.length) return const newFile: SavedFile = { id: Date.now().toString(), name: fileName, date: new Date().toISOString(), rows: currentData.length, data: currentData, } setSavedFiles([...savedFiles, newFile]) setFileName("") setIsDialogOpen(false) } const handleDeleteFile = (id: string) => { setSavedFiles(savedFiles.filter((file) => file.id !== id)) } const handleLoadFile = (file: SavedFile) => { onLoadFile(file.data) } return ( Splitbee Export Management Save, load, and manage your Splitbee CSV export files Saved Files Upload New

Your Saved Files

{savedFiles.length === 0 ? (

No saved Splitbee exports

Upload a Splitbee CSV export and save it to see it here.

) : (

Name Date Saved Rows Actions {savedFiles.map((file) => (

{file.name}

{new Date(file.date).toLocaleDateString()} {file.rows}

))}

)}

Upload a Splitbee CSV export

Drag and drop a Splitbee CSV export or click to browse

) } [V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef>( ({ className, ...props }, ref) => (

), ) Table.displayName = "Table" const TableHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef>( ({ className, ...props }, ref) => ( tr]:last:border-b-0", className)} {...props} /> ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableRow.displayName = "TableRow" const TableHead = React.forwardRef>( ({ className, ...props }, ref) => (

[role=checkbox]]:translate-y-[2px]", className, )} {...props} /> ), ) TableHead.displayName = "TableHead" const TableCell = React.forwardRef>( ({ className, ...props }, ref) => (

[role=checkbox]]:translate-y-[2px]", className)} {...props} /> ), ) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [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/metric-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart } from "@/components/ui/chart" interface MetricCardProps { title: string value: number change: number data: Array<{ date: string count: number }> isLongDateRange?: boolean } export function MetricCard({ title, value, change, data, isLongDateRange = false }: MetricCardProps) { const isNegative = change < 0 const changeAbs = Math.abs(change) return ( {title}

{isNegative ? "-" : "+"} {changeAbs.toFixed(0)}%

{value.toLocaleString()}

value.toString()} showLegend={false} showXAxis={true} showYAxis={false} />

{isLongDateRange ? "Grouped by month" : "Daily data"}

) } [V0_FILE]typescriptreact:file="components/show-more-dialog.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { Search, Download } from "lucide-react" import { Button } from "@/components/ui/button" interface ShowMoreDialogProps { open: boolean onOpenChange: (open: boolean) => void title: string description?: string data: Array<{ name: string value: number }> columns: { header: string accessorKey: string }[] } export function ShowMoreDialog({ open, onOpenChange, title, description, data, columns }: ShowMoreDialogProps) { const [search, setSearch] = React.useState("") const filteredData = React.useMemo(() => { if (!search) return data const searchLower = search.toLowerCase() return data.filter((item) => item.name.toLowerCase().includes(searchLower)) }, [data, search]) // Function to download data as CSV const downloadCSV = () => { // Create CSV content const csvContent = [ columns .map((col) => col.header) .join(","), // Header row ...filteredData.map((item) => { return columns .map((col) => { const value = item[col.accessorKey as keyof typeof item] // Handle strings that might need quotes (contain commas, quotes, or newlines) if (typeof value === "string" && (value.includes(",") || value.includes('"') || value.includes("\n"))) { return `"${value.replace(/"/g, '""')}"` } return value }) .join(",") }), ].join("\n") // Create and download the file const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute( "download", `${title.toLowerCase().replace(/\s+/g, "-")}-${new Date().toISOString().split("T")[0]}.csv`, ) link.style.display = "none" document.body.appendChild(link) link.click() document.body.removeChild(link) } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Suspense } from "react" import { FileUpload } from "@/components/file-upload" import { DashboardSkeleton } from "@/components/dashboard-skeleton" import type { Metadata } from "next" export const metadata: Metadata = { title: "Splitbee Export Viewer | Visualize Your Analytics Data", description: "A tool for viewing and analyzing your Splitbee analytics exports after the service shutdown. Upload your CSV export and get insights from your data.", keywords: ["Splitbee", "analytics", "data visualization", "CSV export", "web analytics", "dashboard"], authors: [{ name: "v0" }], creator: "v0", openGraph: { title: "Splitbee Export Viewer", description: "Visualize your Splitbee analytics exports after shutdown", type: "website", siteName: "Splitbee Export Viewer", }, twitter: { card: "summary_large_image", title: "Splitbee Export Viewer", description: "Visualize your Splitbee analytics exports after shutdown", }, } export default function Home() { return (

Splitbee Export Viewer

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" "use client" import { useMemo, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { format, isValid, parse } from "date-fns" import type { DateRange } from "react-day-picker" import { DateRangePicker } from "@/components/date-range-picker" import { Zap, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { MetricCard } from "@/components/metric-card" import { ShowMoreDialog } from "@/components/show-more-dialog" interface AnalyticsData { id: string type: string page: string event: string eventData: string queryParameter: string time: string uid: string deviceId: string referrer: string subdomain: string origin: string contextId: string projectId: string automationId: string status: string result: string } interface DashboardProps { data: AnalyticsData[] } // Update the RelativeBar function to use bg-gray-100 instead of bg-muted/10 function RelativeBar({ value, max }: { value: number; max: number }) { const width = Math.max((value / max) * 100, 0) return (

) } export function Dashboard({ data }: DashboardProps) { // Update the Users panel to use a switcher with only Browser and Device options // First, change the state type and default value const [userViewMode, setUserViewMode] = useState<"browser" | "device">("browser") const [dateRange, setDateRange] = useState(() => { const today = new Date() const firstOfYear = new Date(today.getFullYear(), 0, 1) // January 1st of current year return { from: firstOfYear, to: today, } }) // Dialog states const [showPagesDialog, setShowPagesDialog] = useState(false) const [showSourcesDialog, setShowSourcesDialog] = useState(false) const [showUsersDialog, setShowUsersDialog] = useState(false) // Filter data by date range const filteredData = useMemo(() => { if (!dateRange?.from) return data return data.filter((item) => { try { const itemDate = parse(item.time.split(" ")[0], "yyyy-MM-dd", new Date()) if (!isValid(itemDate)) return false if (dateRange?.from && itemDate < dateRange.from) return false if (dateRange?.to && itemDate > dateRange.to) return false return true } catch (e) { return false } }) }, [data, dateRange]) // Calculate previous period data for comparison const previousPeriodData = useMemo(() => { if (!dateRange?.from || !dateRange?.to) return [] const periodLength = dateRange.to.getTime() - dateRange.from.getTime() const previousStart = new Date(dateRange.from.getTime() - periodLength) const previousEnd = new Date(dateRange.from.getTime() - 1) return data.filter((item) => { try { const itemDate = parse(item.time.split(" ")[0], "yyyy-MM-dd", new Date()) if (!isValid(itemDate)) return false return itemDate >= previousStart && itemDate <= previousEnd } catch (e) { return false } }) }, [data, dateRange]) const { pageViewsByTime, uniqueVisitorsByTime, pageViews, uniqueVisitors, pageViewsChange, uniqueVisitorsChange, pages, sources, users, isLongDateRange, mainDomain, } = useMemo(() => { // Determine if we should group by month (date range > 3 months) const isLongDateRange = dateRange?.from && dateRange?.to && dateRange.to.getTime() - dateRange.from.getTime() > 3 * 30 * 24 * 60 * 60 * 1000 const timeSeriesData = new Map }>() const uniqueVisitorsSet = new Set() const pagesMap = new Map() const sourcesMap = new Map() const usersMap = new Map() // Track domains to find the most common one const domainCounts = new Map() // Process current period data filteredData.forEach((item) => { try { const itemDate = parse(item.time.split(" ")[0], "yyyy-MM-dd", new Date()) // Format date based on range length const timeKey = isLongDateRange ? format(itemDate, "MMM yyyy") : format(itemDate, "MMM dd") if (!timeSeriesData.has(timeKey)) { timeSeriesData.set(timeKey, { views: 0, visitors: new Set() }) } const timeData = timeSeriesData.get(timeKey)! timeData.views++ if (item.uid) { timeData.visitors.add(item.uid) uniqueVisitorsSet.add(item.uid) } // Process pages if (item.page) { pagesMap.set(item.page, (pagesMap.get(item.page) || 0) + 1) } // Process sources if (item.referrer) { const domain = item.referrer.replace(/^https?:\/\//, "").split("/")[0] if (domain) { sourcesMap.set(domain, (sourcesMap.get(domain) || 0) + 1) } } // Process users by origin if (item.origin) { usersMap.set(item.origin, (usersMap.get(item.origin) || 0) + 1) // Extract domain from origin for domain counting try { // Try to extract domain from a URL const url = new URL(item.origin) const domain = url.hostname domainCounts.set(domain, (domainCounts.get(domain) || 0) + 1) } catch { // If not a URL, use the origin as is domainCounts.set(item.origin, (domainCounts.get(item.origin) || 0) + 1) } } // Also check subdomain field if origin didn't work if (item.subdomain) { domainCounts.set(item.subdomain, (domainCounts.get(item.subdomain) || 0) + 1) } } catch (e) { // Skip invalid dates } }) // Find the most common domain let mainDomain = "example.com" let maxCount = 0 domainCounts.forEach((count, domain) => { if (count > maxCount) { maxCount = count mainDomain = domain } }) // Calculate changes const previousUniqueVisitors = new Set(previousPeriodData.map((item) => item.uid)).size const previousPageViews = previousPeriodData.length const pageViewsChange = previousPageViews > 0 ? ((filteredData.length - previousPageViews) / previousPageViews) * 100 : 0 const uniqueVisitorsChange = previousUniqueVisitors > 0 ? ((uniqueVisitorsSet.size - previousUniqueVisitors) / previousUniqueVisitors) * 100 : 0 // Sort time series data chronologically const sortedTimeEntries = Array.from(timeSeriesData.entries()).sort((a, b) => { // Parse dates for proper chronological sorting const dateA = isLongDateRange ? parse(a[0], "MMM yyyy", new Date()) : parse(a[0], "MMM dd", new Date()) const dateB = isLongDateRange ? parse(b[0], "MMM yyyy", new Date()) : parse(b[0], "MMM dd", new Date()) return dateA.getTime() - dateB.getTime() }) return { pageViewsByTime: sortedTimeEntries.map(([date, data]) => ({ date, count: data.views, })), uniqueVisitorsByTime: sortedTimeEntries.map(([date, data]) => ({ date, count: data.visitors.size, })), pageViews: filteredData.length, uniqueVisitors: uniqueVisitorsSet.size, pageViewsChange, uniqueVisitorsChange, pages: Array.from(pagesMap.entries()) .sort(([, a], [, b]) => b - a) .map(([name, value]) => ({ name, value })), sources: Array.from(sourcesMap.entries()) .sort(([, a], [, b]) => b - a) .map(([name, value]) => ({ name, value })), users: Array.from(usersMap.entries()) .sort(([, a], [, b]) => b - a) .map(([name, value]) => ({ name, value })), isLongDateRange, mainDomain, } }, [filteredData, previousPeriodData, dateRange]) // Function to download data as CSV const downloadCSV = (data: Array<{ name: string; value: number }>, filename: string) => { // Create CSV content const csvContent = [ "Name,Value", // Header row ...data.map((item) => `"${item.name.replace(/"/g, '""')}",${item.value}`), ].join("\n") // Create and download the file const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", `${filename}-${new Date().toISOString().split("T")[0]}.csv`) link.style.display = "none" document.body.appendChild(link) link.click() document.body.removeChild(link) } // Transform user data based on the selected view mode const transformedUserData = useMemo(() => { return users.map((user, i) => { let displayName = user.name // Simulate browser and device data if needed if (userViewMode === "browser" && user.name) { // Extract domain from origin to simulate browser data const domain = user.name.split(".")[0] if (domain === "chrome" || domain === "firefox" || domain === "safari") { displayName = domain.charAt(0).toUpperCase() + domain.slice(1) } else if (domain.includes("google")) { displayName = "Chrome" } else if (domain.includes("apple")) { displayName = "Safari" } else if (domain.includes("mozilla")) { displayName = "Firefox" } else { displayName = ["Chrome", "Safari", "Firefox", "Edge", "Opera"][i % 5] } } else if (userViewMode === "device" && user.name) { // Simulate device data displayName = ["Desktop", "Mobile", "Tablet", "Desktop", "Mobile"][i % 5] } return { name: displayName, value: user.value, } }) }, [users, userViewMode]) return (

Splitbee Export

{mainDomain}

Pages

PAGE

USERS

{pages.slice(0, 5).map((page, i) => { const maxValue = pages[0]?.value || 0 return (

{page.name}

{page.value}

) })}

{pages.length > 5 && ( )}

Sources

PAGE

USERS

{sources.slice(0, 5).map((source, i) => { const maxValue = sources[0]?.value || 0 return (

{source.name}

{source.value}

) })}

{sources.length > 5 && ( )}

Events

No events data available

Events data not found in the uploaded CSV.

Users

{userViewMode.charAt(0).toUpperCase() + userViewMode.slice(1)}

USERS

{transformedUserData.slice(0, 5).map((user, i) => { const maxValue = transformedUserData[0]?.value || 0 return (

{user.name}

{user.value}

) })}

{transformedUserData.length > 5 && ( )}

) }