Building a B2B React CRM App with Refine and Deploying It on the cloud provider

				
					[label src/components/metricCard/index.tsx]
import React, { FC, PropsWithChildren } from "react";
import { Card, Skeleton, Typography } from "antd";
import { useList } from "@refinedev/core";
import { Area, AreaConfig } from "@ant-design/plots";
import { AuditOutlined, ShopOutlined, TeamOutlined } from "@ant-design/icons";
type MetricType = "companies" | "contacts" | "deals";
export const MetricCard = ({ variant }: { variant: MetricType }) => {
 const { data, isLoading, isError, error } = useList({
 resource: variant,
 liveMode: "off",
 meta: {
 fields: ["id"],
 },
 });
 if (isError) {
 console.error("Error fetching dashboard data", error);
 return null;
 }
 const { primaryColor, secondaryColor, icon, title } = variants[variant];
 const config: AreaConfig = {
 style: {
 height: "48px",
 width: "100%",
 },
 appendPadding: [1, 0, 0, 0],
 padding: 0,
 syncViewPadding: true,
 data: variants[variant].data,
 autoFit: true,
 tooltip: false,
 animation: false,
 xField: "index",
 yField: "value",
 xAxis: false,
 yAxis: {
 tickCount: 12,
 label: { style: { fill: "transparent" } },
 grid: { line: { style: { stroke: "transparent" } } },
 },
 smooth: true,
 areaStyle: () => ({
 fill: `l(270) 0:#fff 0.2:${secondaryColor} 1:${primaryColor}`,
 }),
 line: { color: primaryColor },
 };

 return (
 <Card
 bodyStyle={{
 padding: "8px 8px 8px 12px",
 height: "100%",
 display: "flex",
 alignItems: "center",
 justifyContent: "flex-start",
 }}
 size="small"
 >
 <div
 style={{
 display: "flex",
 flexDirection: "column",
 justifyContent: "space-between",
 }}
 >
 <div
 style={{
 display: "flex",
 alignItems: "center",
 gap: "8px",
 whiteSpace: "nowrap",
 }}
 >
 {icon}
 <Typography.Text
 className="secondary"
 style={{ marginLeft: "8px" }}
 >
 {title}
 </Typography.Text>
 </div>

 {isLoading ? (
 <div
 style={{
 display: "flex",
 alignItems: "center",
 height: "60px",
 }}
 >
 <Skeleton.Button
 style={{ marginLeft: "48px", marginTop: "8px" }}
 />
 </div>
 ) : (
 <Typography.Text
 strong
 style={{
 fontSize: 38,
 textAlign: "start",
 marginLeft: "48px",
 fontVariantNumeric: "tabular-nums",
 }}
 >
 {data?.total}
 </Typography.Text>
 )}
 </div>
 <div
 style={{
 marginTop: "auto",
 marginLeft: "auto",
 width: "110px",
 }}
 >
 <Area {...config} />
 </div>
 </Card>
 );
};
const IconWrapper: FC<PropsWithChildren<{ color: string }>> = ({
 color,
 children,
}) => {
 return (
 <div
 style={{
 display: "flex",
 alignItems: "center",
 justifyContent: "center",
 width: "32px",
 height: "32px",
 borderRadius: "50%",
 backgroundColor: color,
 }}
 >
 {children}
 </div>
 );
};
const variants: {
 [key in MetricType]: {
 primaryColor: string;
 secondaryColor?: string;
 icon: React.ReactNode;
 title: string;
 data: { index: string; value: number }[];
 };
} = {
 companies: {
 primaryColor: "#1677FF",
 secondaryColor: "#BAE0FF",
 icon: (
 <IconWrapper color="#E6F4FF">
 <ShopOutlined
 className="md"
 style={{
 color: "#1677FF",
 }}
 />
 </IconWrapper>
 ),
 title: "Number of companies",
 data: [
 { index: "1", value: 3500 },
 { index: "2", value: 2750 },
 { index: "3", value: 5000 },
 { index: "4", value: 4250 },
 { index: "5", value: 5000 },
 ],
 },
 contacts: {
 primaryColor: "#52C41A",
 secondaryColor: "#D9F7BE",
 icon: (
 <IconWrapper color="#F6FFED">
 <TeamOutlined
 className="md"
 style={{
 color: "#52C41A",
 }}
 />
 </IconWrapper>
 ),
 title: "Number of contacts",
 data: [
 { index: "1", value: 10000 },
 { index: "2", value: 19500 },
 { index: "3", value: 13000 },
 { index: "4", value: 17000 },
 { index: "5", value: 13000 },
 { index: "6", value: 20000 },
 ],
 },
 deals: {
 primaryColor: "#FA541C",
 secondaryColor: "#FFD8BF",
 icon: (
 <IconWrapper color="#FFF2E8">
 <AuditOutlined
 className="md"
 style={{
 color: "#FA541C",
 }}
 />
 </IconWrapper>
 ),
 title: "Total deals in pipeline",
 data: [
 { index: "1", value: 1000 },
 { index: "2", value: 1300 },
 { index: "3", value: 1200 },
 { index: "4", value: 2000 },
 { index: "5", value: 800 },
 { index: "6", value: 1700 },
 { index: "7", value: 1400 },
 { index: "8", value: 1800 },
 ],
 },
};