'use client'; import React, { useState, useMemo } from 'react'; import { useLocalStorage } from '@/hooks/use-local-storage'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger } from '@/components/ui/dialog'; import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Tooltip } from 'recharts'; import { PlusCircle, Trash2, TrendingUp, Shield, Home, Car, Plane } from 'lucide-react'; import { CURRENCIES, getCurrencySymbol } from '@/lib/currencies'; const COLORS = ['#4f46e5', '#f97316', '#10b981', '#3b82f6', '#8b5cf6']; const PolicyIcon = ({ type }: { type: string }) => { switch (type) { case 'Health': return ; case 'Motor': return ; case 'Home': return ; case 'Travel': return ; default: return ; } }; const CustomTooltip = ({ active, payload, currencySymbol }: any) => { if (active && payload && payload.length) { return (

{payload[0].name}

{'Total Premium: ' + currencySymbol + payload[0].value.toLocaleString()}

); } return null; }; export default function GeneralInsurancePortfolioDashboard() { const [policies, setPolicies] = useLocalStorage('InsurancePortfolioData', []); const [newPolicy, setNewPolicy] = useState({ name: '', type: 'Health', insurer: '', coverage: '', premium: '', expiry: '', currency: 'USD' }); const [isDialogOpen, setIsDialogOpen] = useState(false); const handleInputChange = (field: string, value: string) => { setNewPolicy(prev => ({ ...prev, [field]: value })); }; const addPolicy = () => { if (!newPolicy.name || !newPolicy.type || !newPolicy.insurer || !newPolicy.coverage || !newPolicy.premium || !newPolicy.expiry) { alert('Please fill all fields.'); return; } setPolicies(prev => [...prev, { ...newPolicy, id: Date.now() }]); setNewPolicy({ name: '', type: 'Health', insurer: '', coverage: '', premium: '', expiry: '', currency: newPolicy.currency }); setIsDialogOpen(false); }; const deletePolicy = (id: number) => { setPolicies(prev => prev.filter(p => p.id !== id)); }; const summary = useMemo(() => { const totalCoverage = policies.reduce((acc, p) => acc + parseFloat(p.coverage || '0'), 0); const totalPremium = policies.reduce((acc, p) => acc + parseFloat(p.premium || '0'), 0); const distribution = policies.reduce((acc, p) => { acc[p.type] = (acc[p.type] || 0) + parseFloat(p.premium || '0'); return acc; }, {}); const chartData = Object.keys(distribution).map(key => ({ name: key, value: distribution[key] })); return { totalCoverage, totalPremium, chartData }; }, [policies]); const mainCurrency = policies.length > 0 ? policies[0].currency : 'USD'; const currencySymbol = getCurrencySymbol(mainCurrency); return (

Insurance Portfolio

Your general insurance policies at a glance.

Premium Distribution {summary.chartData.map((entry, index) => ( ))} } /> Portfolio Summary

Total Coverage

{currencySymbol}{summary.totalCoverage.toLocaleString()}

Total Annual Premium

{currencySymbol}{summary.totalPremium.toLocaleString()}

Your Policies

{policies.length > 0 ? policies.map(policy => (

{policy.name} ({policy.insurer})

Expires on: {new Date(policy.expiry).toLocaleDateString()}

Coverage

{getCurrencySymbol(policy.currency)}{parseFloat(policy.coverage).toLocaleString()}

Premium

{getCurrencySymbol(policy.currency)}{parseFloat(policy.premium).toLocaleString()}

)) : (

No policies added yet. Click "Add New Policy" to start.

)}

); }

General Insurance Portfolio Dashboard