[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="hooks/use-toast.ts" isMerged="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

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

{action} ))} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Validation Dashboard", description: "AI-powered validation audit management system", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Plus, Settings, ArrowLeft, Copy, Check, X, AlertCircle, Calendar, Hash, Upload } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { toast } from "@/hooks/use-toast" type AuditStatus = "passed" | "failed" | "unclear" interface AuditEntry { id: string title: string // Display title/summary content: Record // Full JSON content originalStatus: AuditStatus currentStatus: AuditStatus timestamp: string isRetagged: boolean } interface Audit { id: string name: string startDate: string endDate: string status: "active" | "inactive" entries: AuditEntry[] positiveExamples: ExampleItem[] negativeExamples: ExampleItem[] } interface ExampleItem { id: string content: string metadata?: Record } const mockAudits: Audit[] = [ { id: "asd123123qwdae123123", name: "Audit für die Angebote der Familienapp", startDate: "2025-01-07", endDate: "2025-01-14", status: "active", entries: [ { id: "1", title: "Familienberatung Angebot", content: { id: "offer_001", title: "Familienberatung in der Nähe", description: "Professionelle Beratung für Familien in schwierigen Situationen", category: "counseling", location: { address: "Musterstraße 123, 12345 Berlin", coordinates: { lat: 52.52, lng: 13.405 }, }, contact: { phone: "+49 30 12345678", email: "beratung@familie.de", website: "https://familienberatung-berlin.de", }, availability: { days: ["monday", "tuesday", "wednesday", "thursday", "friday"], hours: "09:00-17:00", }, cost: "free", languages: ["german", "english", "turkish"], target_group: "families_with_children", verified: true, last_updated: "2025-01-07T10:30:00Z", }, originalStatus: "passed", currentStatus: "passed", timestamp: "01.07.2025 14:30", isRetagged: false, }, { id: "2", title: "Kinderbetreuung Wochenende", content: { id: "offer_002", title: "Kinderbetreuung am Wochenende", description: "Flexible Kinderbetreuung für berufstätige Eltern", category: "childcare", location: { address: "Beispielweg 456, 10115 Berlin", // Missing coordinates - validation issue }, contact: { phone: "+49 30 87654321", // Missing email and website - validation issue }, availability: { days: ["saturday", "sunday"], hours: "08:00-18:00", }, cost: "15_euro_per_hour", languages: ["german"], target_group: "children_2_to_12", verified: false, // Not verified - validation issue last_updated: "2024-12-15T08:00:00Z", // Outdated - validation issue }, originalStatus: "failed", currentStatus: "failed", timestamp: "01.07.2025 14:32", isRetagged: false, }, { id: "3", title: "Eltern-Kind-Kurse", content: { id: "offer_003", title: "Eltern-Kind-Kurse verfügbar", description: "Verschiedene Kurse für Eltern und Kinder", category: "education", location: { address: "Lernstraße 789, 10117 Berlin", coordinates: { lat: 52.517, lng: 13.3888 }, }, contact: { phone: "+49 30 11223344", email: "kurse@eltern-kind.de", // Missing website }, availability: { days: ["tuesday", "thursday", "saturday"], // Missing hours - unclear validation }, cost: "varies", languages: ["german", "english"], target_group: "parents_with_toddlers", verified: true, last_updated: "2025-01-05T15:45:00Z", }, originalStatus: "unclear", currentStatus: "unclear", timestamp: "01.07.2025 14:35", isRetagged: false, }, ], positiveExamples: [ { id: "pos1", content: "Familienberatung mit qualifizierten Beratern", metadata: { category: "counseling" } }, { id: "pos2", content: "Kostenlose Eltern-Kind-Aktivitäten", metadata: { category: "activities" } }, ], negativeExamples: [ { id: "neg1", content: "Unvollständige Kontaktinformationen", metadata: { issue: "missing_contact" } }, { id: "neg2", content: "Veraltete Öffnungszeiten", metadata: { issue: "outdated_info" } }, ], }, { id: "xyz789456def789456", name: "Content Moderation Audit", startDate: "2025-01-08", endDate: "2025-01-15", status: "active", entries: [], positiveExamples: [], negativeExamples: [], }, { id: "abc111222ghi333444", name: "Product Review Validation", startDate: "2025-01-09", endDate: "2025-01-16", status: "inactive", entries: [], positiveExamples: [], negativeExamples: [], }, ] export default function ValidationDashboard() { const [audits, setAudits] = useState(mockAudits) const [selectedAudit, setSelectedAudit] = useState(null) const [showCreateForm, setShowCreateForm] = useState(false) const [newAuditName, setNewAuditName] = useState("") const [newAuditStartDate, setNewAuditStartDate] = useState("") const [newAuditEndDate, setNewAuditEndDate] = useState("") const [showExampleForm, setShowExampleForm] = useState<"positive" | "negative" | null>(null) const [newExampleContent, setNewExampleContent] = useState("") const [newExampleMetadata, setNewExampleMetadata] = useState("") const [uploadingJson, setUploadingJson] = useState(false) const [expandedEntries, setExpandedEntries] = useState>(new Set()) const getStatusColor = (status: AuditStatus) => { switch (status) { case "passed": return "bg-green-100 text-green-800 border-green-200" case "failed": return "bg-red-100 text-red-800 border-red-200" case "unclear": return "bg-yellow-100 text-yellow-800 border-yellow-200" } } const getStatusIcon = (status: AuditStatus) => { switch (status) { case "passed": return case "failed": return case "unclear": return } } const copyAuditId = (id: string) => { navigator.clipboard.writeText(id) toast({ title: "Audit ID copied", description: "The audit ID has been copied to your clipboard.", }) } const retagEntry = (auditId: string, entryId: string, newStatus: AuditStatus) => { setAudits((prev) => prev.map((audit) => { if (audit.id === auditId) { const updatedEntries = audit.entries.map((entry) => { if (entry.id === entryId) { return { ...entry, currentStatus: newStatus, isRetagged: newStatus !== entry.originalStatus, } } return entry }) return { ...audit, entries: updatedEntries } } return audit }), ) if (selectedAudit) { setSelectedAudit((prev) => prev ? { ...prev, entries: prev.entries.map((entry) => { if (entry.id === entryId) { return { ...entry, currentStatus: newStatus, isRetagged: newStatus !== entry.originalStatus, } } return entry }), } : null, ) } } const addExample = (auditId: string, content: string, metadata: string, isPositive: boolean) => { if (!content.trim()) return let parsedMetadata = {} if (metadata.trim()) { try { parsedMetadata = JSON.parse(metadata) } catch (e) { toast({ title: "Invalid metadata", description: "Metadata must be valid JSON format.", variant: "destructive", }) return } } const newExample: ExampleItem = { id: Math.random().toString(36).substring(2, 15), content: content.trim(), metadata: Object.keys(parsedMetadata).length > 0 ? parsedMetadata : undefined, } setAudits((prev) => prev.map((audit) => { if (audit.id === auditId) { if (isPositive) { return { ...audit, positiveExamples: [...audit.positiveExamples, newExample] } } else { return { ...audit, negativeExamples: [...audit.negativeExamples, newExample] } } } return audit }), ) if (selectedAudit && selectedAudit.id === auditId) { setSelectedAudit((prev) => prev ? { ...prev, positiveExamples: isPositive ? [...prev.positiveExamples, newExample] : prev.positiveExamples, negativeExamples: !isPositive ? [...prev.negativeExamples, newExample] : prev.negativeExamples, } : null, ) } setNewExampleContent("") setNewExampleMetadata("") setShowExampleForm(null) toast({ title: "Example added", description: `${isPositive ? "Positive" : "Negative"} example added successfully.`, }) } const removeExample = (auditId: string, exampleId: string, isPositive: boolean) => { setAudits((prev) => prev.map((audit) => { if (audit.id === auditId) { if (isPositive) { return { ...audit, positiveExamples: audit.positiveExamples.filter((ex) => ex.id !== exampleId), } } else { return { ...audit, negativeExamples: audit.negativeExamples.filter((ex) => ex.id !== exampleId), } } } return audit }), ) if (selectedAudit && selectedAudit.id === auditId) { setSelectedAudit((prev) => prev ? { ...prev, positiveExamples: isPositive ? prev.positiveExamples.filter((ex) => ex.id !== exampleId) : prev.positiveExamples, negativeExamples: !isPositive ? prev.negativeExamples.filter((ex) => ex.id !== exampleId) : prev.negativeExamples, } : null, ) } } const handleJsonUpload = async (file: File, auditId: string, isPositive: boolean) => { setUploadingJson(true) try { const text = await file.text() const jsonData = JSON.parse(text) if (!Array.isArray(jsonData)) { throw new Error("JSON must be an array of examples") } const examples: ExampleItem[] = jsonData.map((item, index) => { if (typeof item === "string") { return { id: Math.random().toString(36).substring(2, 15), content: item, } } else if (typeof item === "object" && item.content) { return { id: Math.random().toString(36).substring(2, 15), content: item.content, metadata: item.metadata, } } else { throw new Error(`Invalid example format at index ${index}`) } }) setAudits((prev) => prev.map((audit) => { if (audit.id === auditId) { if (isPositive) { return { ...audit, positiveExamples: [...audit.positiveExamples, ...examples] } } else { return { ...audit, negativeExamples: [...audit.negativeExamples, ...examples] } } } return audit }), ) if (selectedAudit && selectedAudit.id === auditId) { setSelectedAudit((prev) => prev ? { ...prev, positiveExamples: isPositive ? [...prev.positiveExamples, ...examples] : prev.positiveExamples, negativeExamples: !isPositive ? [...prev.negativeExamples, ...examples] : prev.negativeExamples, } : null, ) } toast({ title: "Examples imported", description: `${examples.length} ${isPositive ? "positive" : "negative"} examples imported successfully.`, }) } catch (error) { toast({ title: "Import failed", description: error instanceof Error ? error.message : "Failed to parse JSON file.", variant: "destructive", }) } finally { setUploadingJson(false) } } const addToExamples = (auditId: string, entryContent: Record, isPositive: boolean) => { const newExample: ExampleItem = { id: Math.random().toString(36).substring(2, 15), content: JSON.stringify(entryContent, null, 2), } setAudits((prev) => prev.map((audit) => { if (audit.id === auditId) { if (isPositive) { return { ...audit, positiveExamples: [...audit.positiveExamples, newExample] } } else { return { ...audit, negativeExamples: [...audit.negativeExamples, newExample] } } } return audit }), ) toast({ title: "Example added", description: `Entry added to ${isPositive ? "positive" : "negative"} examples.`, }) } const createAudit = () => { if (!newAuditName || !newAuditStartDate || !newAuditEndDate) return if (new Date(newAuditStartDate) >= new Date(newAuditEndDate)) { toast({ title: "Invalid date range", description: "End date must be after start date.", variant: "destructive", }) return } const newAudit: Audit = { id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), name: newAuditName, startDate: newAuditStartDate, endDate: newAuditEndDate, status: "active", entries: [], positiveExamples: [], negativeExamples: [], } setAudits((prev) => [newAudit, ...prev]) setNewAuditName("") setNewAuditStartDate("") setNewAuditEndDate("") setShowCreateForm(false) toast({ title: "Audit created", description: "New audit has been created successfully.", }) } const toggleEntryExpansion = (entryId: string) => { setExpandedEntries((prev) => { const newSet = new Set(prev) if (newSet.has(entryId)) { newSet.delete(entryId) } else { newSet.add(entryId) } return newSet }) } if (selectedAudit) { return (

Audit Configuration

{/* Audit Details */} Audit Details

Audit ID

{selectedAudit.id}

Name

Start Date

End Date

Positive Examples

{ const file = e.target.files?.[0] if (file) { handleJsonUpload(file, selectedAudit.id, true) e.target.value = "" } }} />

{showExampleForm === "positive" && (

setNewExampleContent(e.target.value)} /> setNewExampleMetadata(e.target.value)} />

)}

{selectedAudit.positiveExamples.map((example) => (

{example.content}

{example.metadata && (


                                {JSON.stringify(example.metadata)}

)}

))} {selectedAudit.positiveExamples.length === 0 && (

No positive examples yet

)}

Negative Examples

{ const file = e.target.files?.[0] if (file) { handleJsonUpload(file, selectedAudit.id, false) e.target.value = "" } }} />

{showExampleForm === "negative" && (

setNewExampleContent(e.target.value)} /> setNewExampleMetadata(e.target.value)} />

)}

{selectedAudit.negativeExamples.map((example) => (

{example.content}

{example.metadata && (


                                {JSON.stringify(example.metadata)}

)}

))} {selectedAudit.negativeExamples.length === 0 && (

No negative examples yet

)}

{/* Entries */} API Entries

Review and retag entries to improve validation accuracy

{selectedAudit.entries.length === 0 ? (

No entries received yet

Entries will appear here when API calls are made

) : (

{selectedAudit.entries.map((entry) => (

{entry.title}

{entry.timestamp}

{getStatusIcon(entry.currentStatus)} {entry.currentStatus} {entry.isRetagged && ( Retagged )}

{expandedEntries.has(entry.id) && (

Full JSON Content:

                              {JSON.stringify(entry.content, null, 2)}

)}

Retag as:

))}

)}

) } return (

Validation Dashboard

Manage your AI validation audits

{showCreateForm && ( Create New Audit

Audit Name setNewAuditName(e.target.value)} placeholder="Enter audit name" className="mt-1" />

Start Date setNewAuditStartDate(e.target.value)} className="mt-1" />

End Date setNewAuditEndDate(e.target.value)} className="mt-1" />

)}

{audits.map((audit) => ( setSelectedAudit(audit)} >

{audit.name} {audit.status}

{new Date(audit.startDate).toLocaleDateString()} - {new Date(audit.endDate).toLocaleDateString()}

{audit.id.substring(0, 12)}...

Entries: {audit.entries.length}

Examples: {audit.positiveExamples.length + audit.negativeExamples.length}

{audit.entries.length > 0 && (

{["passed", "failed", "unclear"].map((status) => { const count = audit.entries.filter((e) => e.currentStatus === status).length if (count === 0) return null return ( {count} {status} ) })}

)}

))}

{audits.length === 0 && (

No audits yet

Create your first audit to start validating API calls

)}

) }