[V0_FILE]typescriptreact:file="app/collection-infographic.tsx" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { useState } from "react" import CollectionInfographic from "./collection-infographic" export default function Home() { const [showInfographic, setShowInfographic] = useState(false) return (

Education Management Dashboard

Collection Dashboard

View and analyze fee collection data across your educational institutions.

setShowInfographic(false)} />

) } [V0_FILE]typescriptreact:file="collection-infographic.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ArrowLeft, Calendar, ChevronRight, Download, Search, X } from "lucide-react" import { Bar, BarChart, Cell, Pie, PieChart, ResponsiveContainer, Tooltip as RechartsTooltip } from "recharts" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ChartContainer } from "@/components/ui/chart" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Types type HierarchyLevel = "institution" | "school" | "section" | "class" | "student" type DateFilter = "today" | "yesterday" | "thisMonth" | "custom" type ChartType = "bar" | "pie" interface CollectionData { id: string name: string totalCollected: number cash: number bank: number receipts: number bankRatio: number children?: CollectionData[] } interface BreadcrumbItem { id: string name: string level: HierarchyLevel } // Sample data const sampleData: CollectionData[] = [ { id: "inst1", name: "Institute 1", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 12, bankRatio: 90, children: [ { id: "inst1-sch1", name: "School A", totalCollected: 2500000, cash: 1500000, bank: 1000000, receipts: 7, bankRatio: 92, children: [ { id: "inst1-sch1-sec1", name: "Section X", totalCollected: 1500000, cash: 900000, bank: 600000, receipts: 4, bankRatio: 95, children: [], }, ], }, ], }, { id: "inst2", name: "Institute 2", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 13, bankRatio: 86, children: [], }, { id: "inst3", name: "Institute 3", totalCollected: 4500000, cash: 2500000, bank: 900000, receipts: 14, bankRatio: 70, children: [], }, { id: "inst4", name: "Institute 4", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 34, bankRatio: 90, children: [], }, { id: "inst5", name: "Institute 5", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 23, bankRatio: 90, children: [], }, { id: "inst6", name: "Institute 6", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 24, bankRatio: 90, children: [], }, ] // Helper functions const formatCurrency = (amount: number) => { return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0, }) .format(amount) .replace(/^(\D+)/, "₹") } const getBankRatioColor = (ratio: number) => { if (ratio >= 90) return "bg-green-100 text-green-800 border-green-300" if (ratio >= 70) return "bg-orange-100 text-orange-800 border-orange-300" return "bg-red-100 text-red-800 border-red-300" } const getLevelName = (level: HierarchyLevel): string => { const names: Record = { institution: "Institution", school: "School", section: "Section", class: "Class", student: "Student", } return names[level] } const getNextLevel = (level: HierarchyLevel): HierarchyLevel => { const levels: HierarchyLevel[] = ["institution", "school", "section", "class", "student"] const currentIndex = levels.indexOf(level) return currentIndex < levels.length - 1 ? levels[currentIndex + 1] : level } // Main component export default function CollectionInfographic({ open, onClose }: { open: boolean; onClose: () => void }) { const [currentLevel, setCurrentLevel] = useState("institution") const [currentData, setCurrentData] = useState(sampleData) const [breadcrumbs, setBreadcrumbs] = useState([]) const [dateFilter, setDateFilter] = useState("thisMonth") const [searchQuery, setSearchQuery] = useState("") const [chartType, setChartType] = useState("bar") const [selectedKPI, setSelectedKPI] = useState("totalCollected") // Calculate totals for the current data const totals = currentData.reduce( (acc, item) => { acc.totalCollected += item.totalCollected acc.cash += item.cash acc.bank += item.bank acc.receipts += item.receipts return acc }, { totalCollected: 0, cash: 0, bank: 0, receipts: 0 }, ) const overallBankRatio = totals.bank > 0 ? Math.round((totals.bank / totals.totalCollected) * 100) : 0 // Filter data based on search query const filteredData = currentData.filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase())) // Handle drill down const handleDrillDown = (item: CollectionData) => { if (!item.children || item.children.length === 0) return setBreadcrumbs([ ...breadcrumbs, { id: item.id, name: item.name, level: currentLevel, }, ]) setCurrentData(item.children) setCurrentLevel(getNextLevel(currentLevel)) } // Handle breadcrumb navigation const navigateToBreadcrumb = (index: number) => { if (index === -1) { // Navigate to root setCurrentData(sampleData) setCurrentLevel("institution") setBreadcrumbs([]) return } const newBreadcrumbs = breadcrumbs.slice(0, index + 1) setBreadcrumbs(newBreadcrumbs) // Find the data for this level let data = sampleData for (let i = 0; i <= index; i++) { const item = newBreadcrumbs[i] if (i === index) { setCurrentLevel(getNextLevel(item.level)) break } const found = data.find((d) => d.id === item.id) if (found && found.children) { data = found.children } } setCurrentData(data) } // Prepare chart data const chartData = filteredData.map((item) => ({ name: item.name, value: item[selectedKPI as keyof CollectionData] as number, fill: selectedKPI === "bankRatio" ? item.bankRatio >= 90 ? "#10b981" : item.bankRatio >= 70 ? "#f97316" : "#ef4444" : undefined, })) // Reset state when modal closes useEffect(() => { if (!open) { setCurrentLevel("institution") setCurrentData(sampleData) setBreadcrumbs([]) setSearchQuery("") } }, [open]) return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import CollectionGraphInfographic from "../collection-graph-infographic" export default function Home() { const [showInfographic, setShowInfographic] = useState(false) return (

eGenius Collection Dashboard

Collection Dashboard

View and analyze fee collection data across your educational institutions.

setShowInfographic(false)} />

) } [V0_FILE]typescriptreact:file="demo.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import CollectionGraphInfographic from "./collection-graph-infographic" export default function Demo() { const [showInfographic, setShowInfographic] = useState(true) return (

Collection Graph Infographic Demo

This demo shows the Collection Graph Infographic component in action.

setShowInfographic(false)} />

) } [V0_FILE]typescriptreact:file="collection-graph-infographic.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { ArrowLeft, Calendar, ChevronRight, X } from "lucide-react" import { Bar, BarChart, Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip as RechartsTooltip, XAxis, YAxis, } from "recharts" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Types type HierarchyLevel = "institution" | "school" | "section" | "class" | "student" type DateFilter = "today" | "yesterday" | "thisMonth" | "custom" type ChartType = "column" | "stacked" | "donut" type AcademicYear = "2023-24" | "2022-23" | "2021-22" interface CollectionData { id: string name: string totalCollected: number cash: number bank: number receipts: number bankRatio: number children?: CollectionData[] } interface BreadcrumbItem { id: string name: string level: HierarchyLevel } // Sample hierarchical data const sampleData: CollectionData[] = [ { id: "inst1", name: "Institute 1", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 12, bankRatio: 90, children: [ { id: "inst1-sch1", name: "Primary School", totalCollected: 2000000, cash: 1000000, bank: 1000000, receipts: 6, bankRatio: 83, children: [ { id: "inst1-sch1-sec1", name: "Section A", totalCollected: 1000000, cash: 600000, bank: 400000, receipts: 3, bankRatio: 90, children: [ { id: "inst1-sch1-sec1-cls1", name: "Grade 5", totalCollected: 500000, cash: 300000, bank: 200000, receipts: 2, bankRatio: 85, children: [ { id: "inst1-sch1-sec1-cls1-std1", name: "Aarav Sharma", totalCollected: 250000, cash: 150000, bank: 100000, receipts: 1, bankRatio: 85, children: [], }, { id: "inst1-sch1-sec1-cls1-std2", name: "Riya Patel", totalCollected: 250000, cash: 150000, bank: 100000, receipts: 1, bankRatio: 85, children: [], }, ], }, { id: "inst1-sch1-sec1-cls2", name: "Grade 6", totalCollected: 500000, cash: 300000, bank: 200000, receipts: 1, bankRatio: 85, children: [], }, ], }, { id: "inst1-sch1-sec2", name: "Section B", totalCollected: 1000000, cash: 400000, bank: 600000, receipts: 3, bankRatio: 80, children: [], }, ], }, { id: "inst1-sch2", name: "High School", totalCollected: 2500000, cash: 1500000, bank: 1000000, receipts: 6, bankRatio: 95, children: [], }, ], }, { id: "inst2", name: "Institute 2", totalCollected: 4500000, cash: 2500000, bank: 2000000, receipts: 13, bankRatio: 86, children: [], }, { id: "inst3", name: "Institute 3", totalCollected: 4500000, cash: 2500000, bank: 900000, receipts: 14, bankRatio: 70, children: [], }, ] // Helper functions const formatCurrency = (amount: number) => { return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0, }) .format(amount) .replace(/^(\D+)/, "₹") } const getBankRatioColor = (ratio: number) => { if (ratio >= 90) return "#10b981" // Green if (ratio >= 70) return "#f97316" // Orange return "#ef4444" // Red } const getLevelName = (level: HierarchyLevel): string => { const names: Record = { institution: "Institution", school: "School", section: "Section", class: "Class", student: "Student", } return names[level] } const getNextLevel = (level: HierarchyLevel): HierarchyLevel => { const levels: HierarchyLevel[] = ["institution", "school", "section", "class", "student"] const currentIndex = levels.indexOf(level) return currentIndex < levels.length - 1 ? levels[currentIndex + 1] : level } // Main component export default function CollectionGraphInfographic({ open, onClose }: { open: boolean; onClose: () => void }) { const [currentLevel, setCurrentLevel] = useState("institution") const [currentData, setCurrentData] = useState(sampleData) const [breadcrumbs, setBreadcrumbs] = useState([]) const [dateFilter, setDateFilter] = useState("thisMonth") const [chartType, setChartType] = useState("column") const [academicYear, setAcademicYear] = useState("2023-24") // Handle drill down const handleDrillDown = (item: CollectionData) => { if (!item.children || item.children.length === 0) return setBreadcrumbs([ ...breadcrumbs, { id: item.id, name: item.name, level: currentLevel, }, ]) setCurrentData(item.children) setCurrentLevel(getNextLevel(currentLevel)) } // Handle breadcrumb navigation const navigateToBreadcrumb = (index: number) => { if (index === -1) { // Navigate to root setCurrentData(sampleData) setCurrentLevel("institution") setBreadcrumbs([]) return } const newBreadcrumbs = breadcrumbs.slice(0, index + 1) setBreadcrumbs(newBreadcrumbs) // Find the data for this level let data = sampleData for (let i = 0; i <= index; i++) { const item = newBreadcrumbs[i] if (i === index) { setCurrentLevel(getNextLevel(item.level)) break } const found = data.find((d) => d.id === item.id) if (found && found.children) { data = found.children } } setCurrentData(data) } // Prepare chart data for column and stacked bar charts const barChartData = currentData.map((item) => ({ name: item.name, cash: item.cash, bank: item.bank, total: item.totalCollected, receipts: item.receipts, bankRatio: item.bankRatio, id: item.id, })) // Prepare data for donut chart const prepareDonutData = (data: CollectionData[]) => { const result = [] // Cash segments for (const item of data) { result.push({ name: `${item.name} (Cash)`, value: item.cash, itemName: item.name, type: "cash", fill: "#22c55e", // Green for cash id: item.id, }) } // Bank segments for (const item of data) { result.push({ name: `${item.name} (Bank)`, value: item.bank, itemName: item.name, type: "bank", fill: "#3b82f6", // Blue for bank id: item.id, }) } return result } const donutChartData = prepareDonutData(currentData) // Custom tooltip for bar charts const CustomBarTooltip = ({ active, payload }: any) => { if (active && payload && payload.length) { const data = payload[0].payload return (

{data.name}

Total Collected: {formatCurrency(data.total)}

Cash: {formatCurrency(data.cash)}

Bank: {formatCurrency(data.bank)}

Receipts: {data.receipts}

Bank Ratio: {data.bankRatio}%

) } return null } // Custom tooltip for donut chart const CustomDonutTooltip = ({ active, payload }: any) => { if (active && payload && payload.length) { const data = payload[0].payload const item = currentData.find((i) => i.id === data.id) if (!item) return null return (

{item.name}

{data.type === "cash" ? "Cash:" : "Bank:"} {formatCurrency(data.value)}

Total Collected: {formatCurrency(item.totalCollected)}

Receipts: {item.receipts}

Bank Ratio: {item.bankRatio}%

) } return null } // Reset state when modal closes useEffect(() => { if (!open) { setCurrentLevel("institution") setCurrentData(sampleData) setBreadcrumbs([]) } }, [open]) return ( ) }