[V0_FILE]typescriptreact:file="lib/utils.ts" 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="app/world-map.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { ComposableMap, Geographies, Geography, Line, Marker, ZoomableGroup } from "react-simple-maps" const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json" // Coordinates for Victoria, Australia and India const victoria = [144.9631, -37.8136] const india = [78.9629, 20.5937] const maldives = [73.2207, 3.2028] // Create multiple route lines for visual effect const routes = [ { from: victoria, to: [100, -10], curve: 0.3, color: "#4dabf7", }, { from: [100, -10], to: india, curve: 0.2, color: "#4c6ef5", }, { from: victoria, to: [120, -20], curve: 0.4, color: "#3b5bdb", }, { from: [120, -20], to: india, curve: 0.3, color: "#228be6", }, ] export default function WorldMap() { const [position, setPosition] = useState({ coordinates: [80, 0], zoom: 1 }) function handleZoomIn() { if (position.zoom >= 4) return setPosition((pos) => ({ ...pos, zoom: pos.zoom * 1.5 })) } function handleZoomOut() { if (position.zoom <= 1) return setPosition((pos) => ({ ...pos, zoom: pos.zoom / 1.5 })) } function handleMoveEnd(position: any) { setPosition(position) } return (

{({ geographies }) => geographies.map((geo) => ( )) } {/* Draw route lines */} {routes.map((route, i) => ( ))} {/* Markers for origin and destination */} Victoria India Maldives {/* Zoom controls */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { CalendarIcon, Download, X } from "lucide-react" import { Bar, BarChart, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts" import { format } from "date-fns" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import WorldMap from "@/app/world-map" export default function DutyCalculator() { const [productName, setProductName] = useState("Cotton") const [exportingCountry, setExportingCountry] = useState("India") const [importingCountry, setImportingCountry] = useState("USA") const [port, setPort] = useState("Mumbai Port") const [productValue, setProductValue] = useState("10000") const [quantity, setQuantity] = useState("50") const [startDate, setStartDate] = useState(new Date(2025, 2, 4)) const [endDate, setEndDate] = useState(new Date(2025, 2, 11)) // Duty calculation data const dutyData = [ { name: "Basic Import Duty", value: 8000, color: "#4dabf7", }, { name: "Export Duty", value: 5000, color: "#4c6ef5", }, { name: "Import Cess", value: 3000, color: "#3b5bdb", }, { name: "Export Cess", value: 2000, color: "#228be6", }, { name: "IGST", value: 6000, color: "#15aabf", }, { name: "Others", value: 1000, color: "#0c8599", }, ] const totalDuty = dutyData.reduce((sum, item) => sum + item.value, 0) const handleCalculate = () => { // In a real app, this would make an API call to calculate duties console.log("Calculating duties...") } const handleDownloadImage = () => { // In a real app, this would generate and download an image of the chart console.log("Downloading chart image...") } return (

{/* Header */}

Import/Export Duty Calculator

Origin:

Destination:

Mode: Air Sea

Note: Port refers to imports or exports using a postal service

{/* Main Content */}

{/* Left Sidebar */}

Duty Calculator

Product Name or HS Code setProductName(e.target.value)} />

Exporting Country setExportingCountry(e.target.value)} />

Importing Country setImportingCountry(e.target.value)} />

Port setPort(e.target.value)} />

Product Value (INR/USD per unit) setProductValue(e.target.value)} />

Quantity setQuantity(e.target.value)} />

{/* Main Content Area */}

Custom Duty Breakdown

Total Duty

${totalDuty.toFixed(2)}

entry.color} radius={[4, 4, 0, 0]} />

Route Visualization

{/* Right Sidebar */}

Expected Export Date Range

Start Date

End Date

) }