import { lusitana } from "../../ui/fonts";
import CardWrapper from "../../ui/dashboard/cards";
import { Suspense } from "react";
import { CardsSkeleton, RevenueChartSkeleton } from "@/app/ui/skeletons";
import ProductChart from "@/app/ui/dashboard/product-chart";


    export default async function Page() {
        return (
            <main>
                <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
                    Dashboard
                </h1>
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    <Suspense fallback={<CardsSkeleton/>}>
                        <CardWrapper/>
                    </Suspense>
                </div>
                <div>
                    <Suspense>
                        <ProductChart/>
                    </Suspense>
                </div>
       
            </main>
        )
    };

import { fetchCompliantProduct } from "@/app/lib/data";
import { lusitana } from "../fonts";
import { BarChart } from "@tremor/react";


export default async function ProductChart() {
    
    const productData = await fetchCompliantProduct();

    return (
        <>
        <h3 className={`${lusitana.className}`}>
            Products end of service (EOS) grouping counts
        </h3>
        <BarChart
        data={productData}
        index="product_type"
        categories={['EOS','EOS in 6 months','EOS in 12 months','EOS in 24 months','EOS in 36 months']}
        colors={['indigo','gray','pink','green','sky']}
        stack={true}
        yAxisWidth={50}
        />
        </>
    );
};

    Unhandled Runtime Error
    Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Call Stack
throwIfInfiniteUpdateLoopDetected
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26604:0)
getRootForUpdatedFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7667:0)
enqueueConcurrentHookUpdate
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7558:0)
dispatchSetState
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (12908:0)
eval
node_modules/recharts/es6/component/ResponsiveContainer.js (67:0)
ResizeObserver.callback
node_modules/recharts/es6/component/ResponsiveContainer.js (85:0)

Unhandled Runtime Error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Call Stack
throwIfInfiniteUpdateLoopDetected
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26604:0)
getRootForUpdatedFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7667:0)
enqueueConcurrentHookUpdate
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7558:0)
dispatchSetState
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (12908:0)
e
node_modules/@tremor/react/dist/hooks/useOnWindowResize.js (1:101)

import prisma from "@/prisma/db";
import { Prisma } from "@prisma/client";
import { unstable_noStore as noStore } from 'next/cache';

export async function fetchCompliantProduct() {
    noStore();


    const countProduct: [{
        product_type:string,
        'EOS': number,
        'EOS in 6 months': number,
        'EOS in 12 months': number,
        'EOS in 24 months': number,
        'EOS in 36 months': number
    }]
    = await prisma.$queryRaw`
    SELECT    product_type,
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS'
            )::int AS "EOS",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 6 months'
            )::int AS "EOS in 6 months",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 12 months'
            )::int AS "EOS in 12 months",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 24 months'
            )::int AS "EOS in 24 months",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 36 months'
            )::int AS "EOS in 36 months"
    FROM      evergreen
    GROUP BY  product_type
    ORDER BY  product_type
    `
    return countProduct;
};