import { FileText, Sparkles } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Head, useForm } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import ReportFilters from '@/Components/Reports/ReportFilters'; import ReportSectionSelector from '@/Components/Reports/ReportSectionSelector'; import TemplateCard from '@/Components/Reports/TemplateCard'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackEvent, trackProductEvent } from '@/lib/analytics'; import { REPORT_BUILDER_OPENED, REPORT_GENERATED } from '@/lib/event-catalog'; import type { SiteBasic } from '@/types'; interface ReportTemplate { id: number; name: string; description: string; sections: Record; filters: { date_start?: string; date_end?: string; comparison_start?: string; comparison_end?: string; device?: string; country?: string; }; is_system: boolean; } interface Props { site: SiteBasic; templates: ReportTemplate[]; } interface FormData { name: string; template_id: number | null; sections: string[]; filters: { date_start: string; date_end: string; comparison_start: string; comparison_end: string; device: string; country: string; }; } export default function Builder({ site, templates }: Props) { const [selectedTemplateId, setSelectedTemplateId] = useState(null); useEffect(() => { trackProductEvent(REPORT_BUILDER_OPENED, { site_id: String(site.id) }); }, [site.id]); const { data, setData, post, processing, errors } = useForm({ name: '', template_id: null, sections: [], filters: { date_start: '', date_end: '', comparison_start: '', comparison_end: '', device: '', country: '', }, }); const handleTemplateSelect = (template: ReportTemplate) => { setSelectedTemplateId(template.id); setData({ name: template.name, template_id: template.id, sections: Object.keys(template.sections).filter((key) => template.sections[key]), filters: { date_start: template.filters.date_start ?? '', date_end: template.filters.date_end ?? '', comparison_start: template.filters.comparison_start ?? '', comparison_end: template.filters.comparison_end ?? '', device: template.filters.device ?? '', country: template.filters.country ?? '', }, }); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); trackEvent(REPORT_GENERATED, { site_id: String(site.id) }); post(route('sites.reports.store', site.id)); }; return (

Create Report

Build a custom report or start with a template

{/* Template Selection */}

Start with a Template

{templates.map((template) => ( handleTemplateSelect(template)} /> ))}

{/* Custom Report Builder */} Report Configuration Customize your report settings, sections, and filters

{/* Report Name */}

Report Name * setData('name', e.target.value)} className={errors.name ? 'border-destructive' : ''} /> {errors.name &&

{errors.name}

}

{/* Section Selector */}

Report Sections * setData('sections', sections)} error={errors.sections} />

{/* Filters */}

Filters & Date Range setData('filters', filters)} errors={errors} />

{/* Submit */}

Generate Report {data.sections.length === 0 && (

Select at least one section to continue

)}

); }