'use client'; import React, { useState, useMemo } from 'react'; import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Legend, CartesianGrid } from 'recharts'; import { PlusCircle, Trash2, ArrowUpDown, Award } from 'lucide-react'; import { useLocalStorage } from '@/hooks/use-local-storage'; import { CURRENCIES, getCurrencySymbol } from '@/lib/currencies'; const VehicleInsuranceComparison = () => { const [insurers, setInsurers] = useLocalStorage('VehicleInsuranceComparison', []); const [newInsurer, setNewInsurer] = useState({ name: '', type: 'Comprehensive', premium: '', idv: '', claimRatio: '', currency: 'USD' }); const [sortConfig, setSortConfig] = useState({ key: 'efficiency', direction: 'descending' }); const handleInputChange = (e) => { const { name, value } = e.target; setNewInsurer(prev => ({ ...prev, [name]: value })); }; const handleSelectChange = (name, value) => { setNewInsurer(prev => ({ ...prev, [name]: value })); }; const addInsurer = () => { if (newInsurer.name && newInsurer.premium && newInsurer.idv && newInsurer.claimRatio) { const insurerToAdd = { ...newInsurer, id: Date.now() }; insurerToAdd.efficiency = (Number(insurerToAdd.idv) * (Number(insurerToAdd.claimRatio)/100)) / Number(insurerToAdd.premium); setInsurers([...insurers, insurerToAdd]); setNewInsurer({ name: '', type: 'Comprehensive', premium: '', idv: '', claimRatio: '', currency: newInsurer.currency }); } else { alert('Please fill all fields for the new insurer.'); } }; const deleteInsurer = (id) => { setInsurers(insurers.filter(i => i.id !== id)); }; const requestSort = (key) => { let direction = 'ascending'; if (sortConfig.key === key && sortConfig.direction === 'ascending') { direction = 'descending'; } setSortConfig({ key, direction }); }; const sortedInsurers = useMemo(() => { let sortableItems = [...insurers]; if (sortConfig.key !== null) { sortableItems.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? 1 : -1; } return 0; }); } return sortableItems; }, [insurers, sortConfig]); const topRecommendation = useMemo(() => { if (insurers.length === 0) return null; return [...insurers].sort((a, b) => b.efficiency - a.efficiency)[0]; }, [insurers]); const currencySymbol = getCurrencySymbol(newInsurer.currency); return (

Add Insurer Add a vehicle insurance option to compare.

Insurer Name

Coverage Type

Premium

Insured Declared Value (IDV)

Claim Settlement Ratio (%)

Comparison Results Analyze the insurance options you've added. {topRecommendation && (

Top Recommendation

Based on cost-to-coverage efficiency, {topRecommendation.name} is the best option.

)} {insurers.length > 0 && (

)}

Insurer Type requestSort('premium')} className="cursor-pointer hover:bg-muted">

Premium

requestSort('idv')} className="cursor-pointer hover:bg-muted">

IDV

requestSort('claimRatio')} className="cursor-pointer hover:bg-muted">

Claim Ratio

requestSort('efficiency')} className="cursor-pointer hover:bg-muted">

Efficiency

Action {sortedInsurers.length > 0 ? sortedInsurers.map(insurer => ( {insurer.name} {insurer.type} {currencySymbol}{Number(insurer.premium).toLocaleString()} {currencySymbol}{Number(insurer.idv).toLocaleString()} {insurer.claimRatio}% {insurer.efficiency.toFixed(2)} )) : ( No insurers added yet. )}

); };

Vehicle Insurance Cost Comparison Tool