preciso criar um get para receber e popular os dados no dashboard:

get:
{{hermes_api}}/gateway/doctors/{{doctorId}}/dashboard?

componente dashboard tsx vite:

import React from 'react';
import DashboardStyles from './Dashboard.module.css';
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';
import { Bar, BarChart, Label, LabelList, Legend, Pie, PieChart, XAxis, YAxis } from 'recharts';
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { MdMoneyOff, MdPerson } from 'react-icons/md';

const chartDataBarra = [
    { date: "Mon", recebido: 500, aReceber: 300, glosas: 300, perdas: 300 },
];

const chartConfigBarra = {
    recebido: {
        label: "Recebido",
        color: "#25AAE1",
    },
    aReceber: {
        label: "A Receber",
        color: "#8696BB",
    },
    glosas: {
        label: "Glosas",
        color: "#39465F",
    },
    perdas: {
        label: "Perdas",
        color: "#D56D98",
    },
} satisfies ChartConfig;

const chartData = [
    { browser: "recebido", visitors: 300, fill: "var(--color-chrome)" },
    { browser: "aReceber", visitors: 300, fill: "var(--color-safari)" },
    { browser: "glosas", visitors: 300, fill: "var(--color-firefox)" },
    { browser: "perdas", visitors: 300, fill: "var(--color-edge)" },
];

const chartConfig = {
    visitors: {
        label: "Visitors",
    },
    chrome: {
        label: "Recebido",
        color: "#25AAE1",
    },
    safari: {
        label: "A Receber",
        color: "#8696BB",
    },
    firefox: {
        label: "Glosas",
        color: "#39465F",
    },
    edge: {
        label: "Perdas",
        color: "#D56D98",
    },
} satisfies ChartConfig;

const Dashboard: React.FC = () => {
    const totalVisitors = React.useMemo(() => {
        return chartData.reduce((acc, curr) => acc + curr.visitors, 0);
    }, []);

    // Variáveis mockadas
    const totalPacientes = 100;
    const totalAtendimentos = 200;
    const totalProcedimentos = 300;

    return (
        <div className={DashboardStyles.dashboardContainer}>
            <header className={DashboardStyles.header}>
                <h2 className={DashboardStyles.title}>Dashboard</h2>
            </header>
            <main className={DashboardStyles.mainContent}>
            
                <section className={DashboardStyles.cardMae}>
                <div className={DashboardStyles.barraTop}>
                    <label className={DashboardStyles.titleBarraTop}>
                        Atualizado em - 21/10/2024
                    </label>
                 </div>
                    <div className={DashboardStyles.cardFilhos}>
                        <section className={DashboardStyles.graficopizza}>
                            <ChartContainer
                                config={chartConfig}
                                className="aspect-square max-h-[300px]"
                            >
                                <PieChart>
                                    <ChartTooltip
                                        cursor={false}
                                        content={<ChartTooltipContent hideLabel />}
                                    />
                                    <Pie
                                        data={chartData}
                                        dataKey="visitors"
                                        nameKey="browser"
                                        innerRadius={60}
                                        outerRadius={80}
                                        strokeWidth={5}
                                    >
                                        <Label
                                            content={({ viewBox }) => {
                                                if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                                                    return (
                                                        <text
                                                            x={viewBox.cx}
                                                            y={viewBox.cy}
                                                            textAnchor="middle"
                                                            dominantBaseline="middle"
                                                        >
                                                            <tspan
                                                                x={viewBox.cx}
                                                                y={viewBox.cy}
                                                                className="fill-foreground text-3xl font-bold"
                                                            >
                                                                {totalVisitors.toLocaleString()}
                                                            </tspan>
                                                            <tspan
                                                                x={viewBox.cx}
                                                                y={(viewBox.cy || 0) + 24}
                                                                className="fill-muted-foreground"
                                                            >
                                                               
                                                            </tspan>
                                                        </text>
                                                    );
                                                }
                                            }}
                                        />
                                    </Pie>
                                </PieChart>
                            </ChartContainer>
                            <div className={DashboardStyles.totais}>
                                <div className={DashboardStyles.itemTotal}>
                                    <h3>Total Pacientes</h3>
                                    <div className={DashboardStyles.numero}>{totalPacientes}</div>
                                </div>
                                <div className={DashboardStyles.itemTotal}>
                                    <h3>Total Atendimentos</h3>
                                    <div className={DashboardStyles.numero}>{totalAtendimentos}</div>
                                </div>
                                <div className={DashboardStyles.itemTotal}>
                                    <h3>Total Procedimentos</h3>
                                    <div className={DashboardStyles.numero}>{totalProcedimentos}</div>
                                </div>
                            </div>
                            <div className={DashboardStyles.graficoDados}>
                                <div className={DashboardStyles.recebido}>
                                    <div className={DashboardStyles.numeroRecebido}>Recebido: R$ {chartData[0].visitors.toLocaleString()}</div>
                                    <div className={DashboardStyles.icon}>
                                        <img src="/Recebido.png" alt="Icon" className={DashboardStyles.iconImage} />
                                    </div>
                                </div>
                                <div className={DashboardStyles.aReceber}>
                                    <div className={DashboardStyles.numeroAReceber}>A Receber: R$ {chartData[1].visitors}</div>
                                    <div className={DashboardStyles.icon}>
                                        <img src="/Receber.png" alt="Icon" className={DashboardStyles.iconImage} />
                                    </div>
                                </div>
                                <div className={DashboardStyles.glosas}>
                                    <div className={DashboardStyles.numeroGlosas}>Glosas: R$ {chartData[2].visitors}</div>
                                    <div className={DashboardStyles.icon}>
                                        <img src="/Glosas.png" alt="Icon" className={DashboardStyles.iconImage} />
                                    </div>
                                </div>
                                <div className={DashboardStyles.perdas}>
                                    <div className={DashboardStyles.numeroPerdas}>Perdas: R$ {chartData[3].visitors}</div>
                                    <div className={DashboardStyles.icon}>
                                        <img src="/Perdas.png" alt="Icon" className={DashboardStyles.iconImage} />
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section className={DashboardStyles.tabela}>
                            <Table>
                                <TableCaption>A list of your recent data.</TableCaption>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead className="w-[150px]">Fonte Pagadora</TableHead>
                                        <TableHead>Pacientes</TableHead>
                                        <TableHead className="w-[150px]">Procedimentos</TableHead>
                                        <TableHead className="text-left">Finanças</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    <TableRow>
                                        <TableCell className="font-medium">Beepples</TableCell>
                                        <TableCell>
                                            <div className={DashboardStyles.cellWithIcon}>
                                                <img src="/team.png" alt="Team Icon" className={DashboardStyles.iconSize} />
                                                200
                                            </div>
                                        </TableCell>
                                        <TableCell className={DashboardStyles.procedimentosCell}>
                                            <div className={DashboardStyles.cellWithIcon}>
                                                <img src="/MedicineBox.png" alt="" className={DashboardStyles.iconeProcedimentos} />
                                                200
                                            </div>
                                            <ChartContainer config={chartConfigBarra} className="w-[127.05px] h-[41.28px]">
                                                <BarChart 
                                                    data={chartDataBarra} 
                                                    layout="vertical"
                                                    stackOffset="expand"
                                                    barCategoryGap={7}
                                                >
                                                    <XAxis type="number" hide />
                                                    <YAxis 
                                                        dataKey="date" 
                                                        type="category" 
                                                        axisLine={false} 
                                                        tickLine={false}
                                                        hide
                                                    />
                                                    <Bar
                                                        dataKey="recebido"
                                                        stackId="a"
                                                        fill="#25AAE1"
                                                        radius={[4, 4, 4, 4]}
                                                    >
                                                        <LabelList dataKey="recebido" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)' }} />
                                                    </Bar>
                                                    <Bar
                                                        dataKey="aReceber"
                                                        stackId="a"
                                                        fill="#8696BB"
                                                        radius={[4, 4, 4, 4]}
                                                    >
                                                        <LabelList dataKey="aReceber" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)' }}  />
                                                    </Bar>
                                                    <Bar
                                                        dataKey="glosas"
                                                        stackId="a"
                                                        fill="#39465F"
                                                        radius={[4, 4, 4, 4]}
                                                    >
                                                        <LabelList dataKey="glosas" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)' }} />
                                                    </Bar>
                                                    <Bar
                                                        dataKey="perdas"
                                                        stackId="a"
                                                        fill="#D56D98"
                                                        radius={[4, 4, 4, 4]}
                                                    >
                                                        <LabelList dataKey="perdas" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)'}}></LabelList>
                                                        <MdMoneyOff className={DashboardStyles.iconeProcedimentos} />
                                                    </Bar>
                                                </BarChart>
                                            </ChartContainer>
                                        </TableCell>
                                        <TableCell className="text-right">
                                            <div className={DashboardStyles.divFinancas}>
                                                <div className={DashboardStyles.divTotal}>
                                                    <label className={DashboardStyles.labelTotal}>total</label>
                                                    <label className={DashboardStyles.valorTotal}>R$ 5.000,00</label>
                                                </div>
                                                <div>
                                                    <ChartContainer config={chartConfigBarra} className="w-[127.05px] h-[41.28px]">
                                                        <BarChart 
                                                            data={chartDataBarra} 
                                                            layout="vertical"
                                                            stackOffset="expand"
                                                            barCategoryGap={7}
                                                        >
                                                            <XAxis type="number" hide />
                                                            <YAxis 
                                                                dataKey="date" 
                                                                type="category" 
                                                                axisLine={false} 
                                                                tickLine={false}
                                                                hide
                                                            />
                                                            <Bar
                                                                dataKey="recebido"
                                                                stackId="a"
                                                                fill="#25AAE1"
                                                                radius={[4, 4, 4, 4]}
                                                            >
                                                                <LabelList dataKey="recebido" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)' }} />
                                                            </Bar>
                                                            <Bar
                                                                dataKey="aReceber"
                                                                stackId="a"
                                                                fill="#8696BB"
                                                                radius={[4, 4, 4, 4]}
                                                            >
                                                                <LabelList dataKey="aReceber" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)' }}  />
                                                            </Bar>
                                                            <Bar
                                                                dataKey="glosas"
                                                                stackId="a"
                                                                fill="#39465F"
                                                                radius={[4, 4, 4, 4]}
                                                            >
                                                                <LabelList dataKey="glosas" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)'}} />
                                                            </Bar>
                                                            <Bar
                                                                dataKey="perdas"
                                                                stackId="a"
                                                                fill="#D56D98"
                                                                radius={[4, 4, 4, 4]}
                                                            >
                                                                <LabelList dataKey="perdas" position="top" style={{ fontSize: '11px', transform: 'translateY(3px)'}}></LabelList>
                                                                <MdMoneyOff className={DashboardStyles.iconeProcedimentos} />
                                                            </Bar>
                                                        </BarChart>
                                                    </ChartContainer>
                                                </div>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                    <TableRow>
                                        <TableCell className="font-medium">HealthCorp</TableCell>
                                        <TableCell>200</TableCell>
                                        <TableCell>120</TableCell>
                                        <TableCell className="text-right">$12000</TableCell>
                                    </TableRow>
                                    {/* Adicione mais linhas conforme necessário */}
                                </TableBody>
                            </Table>
                        </section>
                    </div>
                </section>
            </main>
        </div>
    );
};

export default Dashboard;

reponse do get:

{
    "success": true,
    "data": [
        {
            "reference": "all",
            "updatedAt": "2025-01-01T12:00:00Z",
            "resume": {
                "totalPatients": 5000,
                "totalAppointments": 20000,
                "totalProcedures": 15000,
                "totalReceived": 300000.5,
                "totalToReceive": 100000.25,
                "totalGlossed": 15000,
                "totalLost": 2000
            },
            "list": [
                {
                    "payer": {
                        "id": "123e4567-e89b-12d3-a456-426614174000",
                        "name": "Hospital ABC"
                    },
                    "appointments": {
                        "total": 500,
                        "byStatus": {
                            "toReceive": 200,
                            "received": 250,
                            "lost": 30,
                            "glossed": 20
                        }
                    },
                    "patients": {
                        "total": 300
                    },
                    "financial": {
                        "total": 50000.75,
                        "byStatus": {
                            "toReceive": 20000.3,
                            "received": 25000.2,
                            "lost": 2000.1,
                            "glossed": 1000.15
                        }
                    }
                }
            ]
        },
        {
            "reference": "current-month",
            "updatedAt": "2025-01-01T12:00:00Z",
            "resume": {
                "totalPatients": 500,
                "totalAppointments": 2000,
                "totalProcedures": 1500,
                "totalReceived": 30000.5,
                "totalToReceive": 10000.25,
                "totalGlossed": 1500,
                "totalLost": 200
            },
            "list": [
                {
                    "payer": {
                        "id": "223e4567-e89b-12d3-a456-426614174001",
                        "name": "Clínica DEF"
                    },
                    "appointments": {
                        "total": 50,
                        "byStatus": {
                            "toReceive": 20,
                            "received": 25,
                            "lost": 3,
                            "glossed": 2
                        }
                    },
                    "patients": {
                        "total": 30
                    },
                    "financial": {
                        "total": 5000.75,
                        "byStatus": {
                            "toReceive": 2000.3,
                            "received": 2500.2,
                            "lost": 200.1,
                            "glossed": 100.15
                        }
                    }
                }
            ]
        },
        {
            "reference": "2024-12",
            "updatedAt": "2025-01-01T12:00:00Z",
            "resume": {
                "totalPatients": 450,
                "totalAppointments": 1800,
                "totalProcedures": 1400,
                "totalReceived": 29000.5,
                "totalToReceive": 9000.25,
                "totalGlossed": 1400,
                "totalLost": 180
            },
            "list": [
                {
                    "payer": {
                        "id": "323e4567-e89b-12d3-a456-426614174002",
                        "name": "Plano GHI"
                    },
                    "appointments": {
                        "total": 45,
                        "byStatus": {
                            "toReceive": 18,
                            "received": 23,
                            "lost": 2,
                            "glossed": 2
                        }
                    },
                    "patients": {
                        "total": 27
                    },
                    "financial": {
                        "total": 4500.75,
                        "byStatus": {
                            "toReceive": 1800.3,
                            "received": 2300.2,
                            "lost": 200.1,
                            "glossed": 200.15
                        }
                    }
                }
            ]
        },
        {
            "reference": "2024-11",
            "updatedAt": "2025-01-01T12:00:00Z",
            "resume": {
                "totalPatients": 400,
                "totalAppointments": 1600,
                "totalProcedures": 1300,
                "totalReceived": 28000.5,
                "totalToReceive": 8000.25,
                "totalGlossed": 1300,
                "totalLost": 160
            },
            "list": [
                {
                    "payer": {
                        "id": "423e4567-e89b-12d3-a456-426614174003",
                        "name": "Seguradora JKL"
                    },
                    "appointments": {
                        "total": 40,
                        "byStatus": {
                            "toReceive": 16,
                            "received": 20,
                            "lost": 2,
                            "glossed": 2
                        }
                    },
                    "patients": {
                        "total": 24
                    },
                    "financial": {
                        "total": 4000.75,
                        "byStatus": {
                            "toReceive": 1600.3,
                            "received": 2000.2,
                            "lost": 200.1,
                            "glossed": 200.15
                        }
                    }
                }
            ]
        }
    ],
    "messages": [
        "Nessa lista já vem todo o histórico, não terá paginação nessa versão"
    ],
    "isRedirected": false,
    "fakeResult": true
}