feat: add Invoice Analytics Dashboard with Chart.js

Govt-Billing-React/package.json

@@ -27,6 +27,7 @@
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "capacitor-email-composer": "^5.0.0",
+    "chart.js": "^4.5.1",
     "firebase": "^10.8.1",
     "ionicons": "^7.0.0",
     "react": "^18.2.0",

Govt-Billing-React/src/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,197 @@
+import {
+    IonButton,
+    IonButtons,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardTitle,
+    IonCol,
+    IonContent,
+    IonGrid,
+    IonHeader,
+    IonModal,
+    IonRow,
+    IonTitle,
+    IonToolbar,
+} from "@ionic/react";
+import { Chart, registerables } from "chart.js";
+import { useEffect, useRef } from "react";
+import InvoiceSummaryCards from "./InvoiceSummaryCards";
+
+Chart.register(...registerables);
+
+// Sample data — replace with real store reads once invoice data model is finalized
+const SAMPLE_INVOICES = [
+    { status: "paid", amount: 85000, month: "Jan" },
+    { status: "pending", amount: 34580, month: "Jan" },
+    { status: "overdue", amount: 47200, month: "Feb" },
+    { status: "paid", amount: 120000, month: "Feb" },
+    { status: "draft", amount: 15000, month: "Mar" },
+    { status: "paid", amount: 62000, month: "Mar" },
+    { status: "overdue", amount: 29000, month: "Apr" },
+    { status: "pending", amount: 53000, month: "Apr" },
+    { status: "paid", amount: 78000, month: "May" },
+];
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May"];
+
+interface Props {
+    showDashboard: boolean;
+    setShowDashboard: (val: boolean) => void;
+}
+
+const Dashboard: React.FC<Props> = ({ showDashboard, setShowDashboard }) => {
+    const donutRef = useRef<HTMLCanvasElement>(null);
+    const barRef = useRef<HTMLCanvasElement>(null);
+    const donutChart = useRef<Chart | null>(null);
+    const barChart = useRef<Chart | null>(null);
+
+    const summaryData = {
+        total: SAMPLE_INVOICES.length,
+        paid: SAMPLE_INVOICES.filter((i) => i.status === "paid").length,
+        pending: SAMPLE_INVOICES.filter((i) => i.status === "pending").length,
+        overdue: SAMPLE_INVOICES.filter((i) => i.status === "overdue").length,
+        totalAmount: SAMPLE_INVOICES.reduce((s, i) => s + i.amount, 0),
+        collectedAmount: SAMPLE_INVOICES.filter((i) => i.status === "paid").reduce(
+            (s, i) => s + i.amount,
+            0
+        ),
+    };
+
+    useEffect(() => {
+        if (!showDashboard) return;
+
+        // small delay so modal finishes rendering before canvas is available
+        const timer = setTimeout(() => {
+            if (donutRef.current) {
+                donutChart.current?.destroy();
+                donutChart.current = new Chart(donutRef.current, {
+                    type: "doughnut",
+                    data: {
+                        labels: ["Paid", "Pending", "Overdue", "Draft"],
+                        datasets: [
+                            {
+                                data: [
+                                    summaryData.paid,
+                                    summaryData.pending,
+                                    summaryData.overdue,
+                                    SAMPLE_INVOICES.filter((i) => i.status === "draft").length,
+                                ],
+                                backgroundColor: ["#2dd36f", "#ffc409", "#eb445a", "#92949c"],
+                                borderWidth: 0,
+                            },
+                        ],
+                    },
+                    options: {
+                        responsive: true,
+                        cutout: "65%",
+                        plugins: { legend: { position: "bottom" } },
+                    },
+                });
+            }
+
+            if (barRef.current) {
+                barChart.current?.destroy();
+                barChart.current = new Chart(barRef.current, {
+                    type: "bar",
+                    data: {
+                        labels: MONTHS,
+                        datasets: [
+                            {
+                                label: "Total (₹)",
+                                data: MONTHS.map((m) =>
+                                    SAMPLE_INVOICES.filter((i) => i.month === m).reduce(
+                                        (s, i) => s + i.amount,
+                                        0
+                                    )
+                                ),
+                                backgroundColor: "rgba(56,128,255,0.3)",
+                                borderColor: "#3880ff",
+                                borderWidth: 2,
+                                borderRadius: 4,
+                            },
+                            {
+                                label: "Collected (₹)",
+                                data: MONTHS.map((m) =>
+                                    SAMPLE_INVOICES.filter(
+                                        (i) => i.month === m && i.status === "paid"
+                                    ).reduce((s, i) => s + i.amount, 0)
+                                ),
+                                backgroundColor: "rgba(45,211,111,0.4)",
+                                borderColor: "#2dd36f",
+                                borderWidth: 2,
+                                borderRadius: 4,
+                            },
+                        ],
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: { legend: { position: "top" } },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    callback: (v) => `₹${Number(v).toLocaleString("en-IN")}`,
+                                },
+                            },
+                        },
+                    },
+                });
+            }
+        }, 300);
+
+        return () => {
+            clearTimeout(timer);
+            donutChart.current?.destroy();
+            barChart.current?.destroy();
+        };
+    }, [showDashboard]);
+
+    return (
+        <IonModal isOpen={showDashboard} onDidDismiss={() => setShowDashboard(false)}>
+            <IonHeader>
+                <IonToolbar color="primary">
+                    <IonTitle>Invoice Analytics</IonTitle>
+                    <IonButtons slot="end">
+                        <IonButton onClick={() => setShowDashboard(false)}>Close</IonButton>
+                    </IonButtons>
+                </IonToolbar>
+            </IonHeader>
+            <IonContent className="ion-padding">
+                <InvoiceSummaryCards data={summaryData} />
+
+                <IonGrid>
+                    <IonRow>
+                        <IonCol size="12" sizeMd="5">
+                            <IonCard>
+                                <IonCardHeader>
+                                    <IonCardTitle style={{ fontSize: "0.95rem" }}>
+                                        Status Breakdown
+                                    </IonCardTitle>
+                                </IonCardHeader>
+                                <IonCardContent>
+                                    <canvas ref={donutRef} />
+                                </IonCardContent>
+                            </IonCard>
+                        </IonCol>
+
+                        <IonCol size="12" sizeMd="7">
+                            <IonCard>
+                                <IonCardHeader>
+                                    <IonCardTitle style={{ fontSize: "0.95rem" }}>
+                                        Monthly Revenue
+                                    </IonCardTitle>
+                                </IonCardHeader>
+                                <IonCardContent>
+                                    <canvas ref={barRef} />
+                                </IonCardContent>
+                            </IonCard>
+                        </IonCol>
+                    </IonRow>
+                </IonGrid>
+            </IonContent>
+        </IonModal>
+    );
+};
+
+export default Dashboard;

Govt-Billing-React/src/components/Dashboard/InvoiceSummaryCards.tsx

@@ -0,0 +1,68 @@
+import { IonCard, IonCardContent, IonCol, IonGrid, IonRow } from "@ionic/react";
+
+interface SummaryData {
+    total: number;
+    paid: number;
+    pending: number;
+    overdue: number;
+    totalAmount: number;
+    collectedAmount: number;
+}
+
+interface Props {
+    data: SummaryData;
+}
+
+const InvoiceSummaryCards: React.FC<Props> = ({ data }) => {
+    const cards = [
+        { label: "Total Invoices", value: data.total, color: "#3880ff" },
+        { label: "Paid", value: data.paid, color: "#2dd36f" },
+        { label: "Pending", value: data.pending, color: "#ffc409" },
+        { label: "Overdue", value: data.overdue, color: "#eb445a" },
+        {
+            label: "Total (₹)",
+            value: `₹${data.totalAmount.toLocaleString("en-IN")}`,
+            color: "#3880ff",
+        },
+        {
+            label: "Collected (₹)",
+            value: `₹${data.collectedAmount.toLocaleString("en-IN")}`,
+            color: "#2dd36f",
+        },
+    ];
+
+    return (
+        <IonGrid>
+            <IonRow>
+                {cards.map((c) => (
+                    <IonCol key={c.label} size="6" sizeMd="4">
+                        <IonCard
+                            style={{
+                                borderTop: `4px solid ${c.color}`,
+                                margin: "6px",
+                                borderRadius: "8px",
+                            }}
+                        >
+                            <IonCardContent style={{ textAlign: "center", padding: "12px" }}>
+                                <div
+                                    style={{
+                                        fontSize: "1.4rem",
+                                        fontWeight: 700,
+                                        color: c.color,
+                                    }}
+                                >
+                                    {c.value}
+                                </div>
+                                <div style={{ fontSize: "0.72rem", color: "#888", marginTop: 4 }}>
+                                    {c.label}
+                                </div>
+                            </IonCardContent>
+                        </IonCard>
+                    </IonCol>
+                ))}
+            </IonRow>
+        </IonGrid>
+    );
+};
+
+export default InvoiceSummaryCards;

Govt-Billing-React/src/pages/Home.tsx

@@ -1,3 +1,5 @@
+import Dashboard from "../components/Dashboard/Dashboard";
+
 import {
   IonButton,
   IonContent,
@@ -32,6 +34,7 @@ const Home: React.FC = () => {
   const [selectedFile, updateSelectedFile] = useState("default");
   const [billType, updateBillType] = useState(1);
   const [device] = useState("default");
+  const [showDashboard, setShowDashboard] = useState(false);
 
   initFirebase();
 
@@ -94,6 +97,13 @@ const Home: React.FC = () => {
               console.log("Popover clicked");
             }}
           />
+          <IonIcon
+            icon={statsChart}
+            slot="end"
+            className="ion-padding-end"
+            size="large"
+            onClick={() => setShowDashboard(true)}
+          />
           <Files
             filesFrom="Local"
             store={store}
@@ -154,6 +164,11 @@ const Home: React.FC = () => {
           <div id="tableeditor"></div>
           <div id="msg"></div>
         </div>
+
+        <Dashboard
+          showDashboard={showDashboard}
+          setShowDashboard={setShowDashboard}
+        />
       </IonContent>
     </IonPage>
   );